<style>
<style>
#myBall{
background-image: url("http://dh.aks.ac.kr/Edu/wiki/images/thumb/d/d6/Snoopypc.jpg/300px-Snoopypc.jpg");
background-size: 100% 100%;
/* transform: rotate(90deg); 90도 회전 */
/* transform: skew(85deg,0); 찌그러트리기 */
}
#myBar{
position: absolute;
bottom: 100px;
height: 70px;
width: 150px;
background-color: skyblue;
}<body>
<button>
<h1>메에롱</h1>
<button onclick="fCK()">시작하기</button>
<button onclick="fStop()">멈추기</button>메에롱
- 시작하기 버튼 누르면 (onclick) fCK() 이벤트 발생
- 멈추기 버튼 누르면 (onclick) fStop() 이벤트 발생
<div style="width: 500px;height: 500px;position: relative;border: 2px solid black;">
<div id="myBall" style=" position: absolute; left: 190px; top: 40px; width: 50px;height: 50px; border-radius: 50%; background-color: red;">
</div>
<div id="myBar" style="left: 50px;"></div>
</div>원본
더보기
Document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#myBall{
background-image: url("http://dh.aks.ac.kr/Edu/wiki/images/thumb/d/d6/Snoopypc.jpg/300px-Snoopypc.jpg");
background-size: 100% 100%;
/* transform: rotate(90deg); 90도 회전 */
/* transform: skew(85deg,0); 찌그러트리기 */
}
#myBar{
position: absolute;
bottom: 100px;
height: 70px;
width: 150px;
background-color: skyblue;
}
</style>
</head>
<body>
<h1>메에롱</h1>
<button onclick="fCK()">시작하기</button>
<button onclick="fStop()">멈추기</button>
<div style="width: 500px;height: 500px;position: relative;border: 2px solid black;">
<div id="myBall" style=" position: absolute; left: 190px; top: 40px; width: 50px;height: 50px; border-radius: 50%; background-color: red;">
</div>
<div id="myBar" style="left: 50px;"></div>
</div>
<script>
var myBar = document.querySelector("#myBar");
// 브라우져 탭을 나타내는js키워드는 window
window.addEventListener("keydown",function(){
// alert(event.key);
// alert(event.keyCode);
if(event.keyCode ==37){ //왼쪽 화살표
myBar.style.left = parseInt(myBar.style.left) -10 + "px";
}
if(event.keyCode == 39){ //오른쪽 화살표
myBar.style.left = parseInt(myBar.style.left) +10 + "px";
}
});
var hjTimer; //전역 변수
//멈춤 기능
function fStop(){
// clearTimeout(setTimeout이 리턴한 타이머값);
clearTimeout(hjTimer);
}
var myBall = document.querySelector('#myBall');
var mvPok = 10; // 수평 이동 값
var mvHok = 20; // 수직 이동 값
var vGak = 0; //회전각도 0 시작값 기본값 :z축 기준
function fCK(){
vGak = vGak +10;
// alert("흥");
// alert( parseInt (myBall.style.left));
//오른쪽으로 가던게 방향바꾸어서 왼쪽으로 진행!
myBall.style.left = parseInt (myBall.style.left) + mvPok+"px"; // 공 움직임
myBall.style.top = parseInt (myBall.style.top) + mvHok+"px"; // 공 움직임
//ball 돌리기
myBall.style.transform = "rotate("+vGak+"deg)";
var ballLeft = parseInt(myBall.style.left); //그냥 괜히 변수 넣기
var ballTop = parseInt(myBall.style.top);
//좌우 충돌
if(ballLeft >= 450 ||ballLeft <= 0){
// return; 선에 멈춤
// mvPok = -1 * mvPok;
myBall.style.transform = "skew(45deg,0)"
mvPok = -mvPok; //오른쪽 선에 팅겨짐
}
// 상하 충돌
if(ballTop >= 450 ||ballTop <= 0){
// return; 선에 멈춤
// mvPok = -1 * mvPok;
myBall.style.transform = "skew(0,45deg)"
mvHok = -mvHok; //오른쪽 선에 팅겨짐
}
clearTimeout(hjTimer);
//setTimeout 리턴값 timer
hjTimer = setTimeout(fCK,50); // 1초마다 재귀호출
}
// fCK(); // 한번 불러줘야 setTimeout 실행 됨
//setTiemout(함수이름, ms) 함수를쓰면 바로 함수 불러옴
// setTimeout(fCK,1500); //1500ms 뒤에 fCK를 불러라!
</script>
</body>
</html>메에롱
'JavaScript > 수업' 카테고리의 다른 글
| html1 (0) | 2024.02.06 |
|---|---|
| 시작.html (1) | 2024.02.06 |
