bar를 움직이려면 화면을 클릭하고 하세용!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*부모 relative ,자식 absolute*/
#wrapper{
position:relative;
width:800px;
height:600px;
border:10px groove gold;
}
#ball{
position:absolute;
width:100px;
height:100px;
background-color: rgb(237, 156, 156);
border:1px solid rgb(237, 156, 156);
border-radius: 50%;
left:30px;
top:10px;
background-image:url("https://item.kakaocdn.net/do/a1866850b14ae47d0a2fd61f409dfc057154249a3890514a43687a85e6b6cc82");
background-size:100% 100%;
transform: rotateZ(45deg); /*그냥 rotate로 하면 Z가 생략된 것임. z축 기준으로 45도 회전
rotateX, rotateY는 X축 Y축으로 45도 회전하라는 뜻. 좀 찌그러져있음
skewX(), skewY()는 X축으로 찌그러지
*/
}
#bar{
position:absolute;
width:200px;
height:25px;
background-color: rgb(255, 0, 140);
bottom:100px;
left:100px;
}
</style>
</head>
<body>
<button onclick="fStart()">시작</button>
<button onclick="fStop()">중지</button>
<!-- focus 받을 수 없는 것은 keyboard이벤트 안됨 해결은 tabindex=0 -->
<div id="wrapper" tabindex="0" onkeydown="fkeyDown()">
<div id="ball"></div>
<div id="bar"></div>
</div>
</body>
<script>
const wrapper= document.querySelector("#wrapper");
const ball = document.querySelector("#ball");
const bar = document.querySelector("#bar");
let timerId;
//직접 fMove를 부르지 않고 거쳐서 감 (Proxy 대리인 패턴)
let isRunning = !1; //false
function fStart(){
if(!isRunning){
fMove();
isRunning = !0; //true
}
}
function fStop(){
clearTimeout(timerId);
isRunning = !1; //상태값을 시작버튼 누르기 이전으로
}
function fkeyDown(){
let xSpeed = 10;
let barleft = parseInt(bar.style.left);
//alert(event.key);
// alert(event.keyCode);
if(event.keyCode==37 && barleft>0){
bar.style.left = parseInt(bar.style.left)-xSpeed+"px";
}
if(event.keyCode==39 && (barleft+200) < 800){
bar.style.left = parseInt(bar.style.left)+xSpeed+"px";
}
}
if(!ball.style.left){ //script를 이용한 초기화
ball.style.left = "30px";
ball.style.top = "100px";
bar.style.left="30px";
}
//parseInt는 문자 숫자 섞여있어도 숫자만 떼어옴(40px -> 40)
//스타일은 꼭 단위를 붙여줘야 적용됨
//ball.style.left = parseInt(ball.style.left) + 50 +"px"; //인라인 스타일만 읽어올 수 있음. 근데 인라인 스타일은 권장하고있지 않기때문에 스크립트에서 위처럼 초기화해줘야함
// setTimeInterval : 주기적으로
// setTimeout: 한번만
let xSpeed = 10; //const는 상수기때문에 값을 못바꿈.
let ySpeed = 10;
let gakdo = 0;
function fMove(){
gakdo=gakdo+10;
ball.style.left = parseInt(ball.style.left) + xSpeed +"px";
ball.style.top = parseInt(ball.style.top) + ySpeed +"px";
ball.style.transform = `rotate(${gakdo}deg)`;
//벽충돌
let ballLeft = parseInt(ball.style.left);
let ballTop = parseInt(ball.style.top);
if((ballLeft+100) >= 800 || ballLeft<=0){ //wrapper width를 800, ball width를 100으로 했기떄문
xSpeed = -xSpeed;
ball.style.transform = `skewX(45deg)`;
}
if((ballTop+100) >= 600 || ballTop<=0){
ySpeed = -ySpeed;
ball.style.transform = `skewY(45deg)`;
}
let barloc=parseInt(bar.style.left);
if(ballTop>=375 && (ballLeft-(barloc+200)<=0) && (barloc-(ballLeft+100)<=0)){
xSpeed;
ySpeed = -ySpeed;
}
if(ballTop==500){
clearTimeout(timerId);
alert("게임 종료!");
location.reload();
}
//setTimeout의 return값은 스탑워치를 가리키는 id를 리턴
timerId = setTimeout(fMove, 50); //재귀호출
}
//fMove();
</script>
</html>
'js' 카테고리의 다른 글
| localStorage (0) | 2024.10.23 |
|---|---|
| react, vite (0) | 2024.10.11 |
| 복사와 참조 (0) | 2024.10.11 |
| node 설치 (4) | 2024.10.11 |
| ajax로 데이터 송수신 (0) | 2024.10.03 |