볼튕기기 :: 췐틀맨 devlog

볼튕기기

2024년 10월 17일

chantleman
작성자
2024.10.17.:49

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>

728x90

'js' 카테고리의 다른 글

localStorage (0)	2024.10.23
Configure Snippets. 템플릿 (0)	2024.10.23
복사와 참조 (0)	2024.10.11
node 설치 (4)	2024.10.11
ajax로 데이터 송수신 (0)	2024.10.03

다음 글이 없습니다.

이전 글이 없습니다.

'js' 카테고리의 다른 글

티스토리툴바