[Javascript]벽돌깨기

<style>
        *{
            margin: 0;
            padding: 0;
        }
        section{
            position: relative;
            width: 270px;
            height: 300px;
            border: 1px solid#888;
           
        }
        .ball{
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #58a787;
            border-radius: 50%;
        }
        #bar{
            position: absolute;
            width: 75px;
            height: 15px;
            background-color: #000;
        }
        .벽돌row_벽돌 {
            width: 50px;
            height: 20px;
            background-color: #c4cb90;
            margin: 2px;
            float: left;
        }
        #start_btn{
            margin-left: 110px;
            margin-top: 10px;
            width: 50px;
        }
        
    </style>

 <script>
        window.onload = function(){

            playChk = true
            
            bar = document.getElementById("bar")
            bar.xx = 97
            bar.yy = 285
            bar.style.left = bar.xx+"px"
            bar.style.top = bar.yy+"px"
        
           ball = document.getElementsByClassName("ball")[0]
           ball.xx = 124.5
           ball.yy = 265
           ball.xDir = 3
           ball.yDir = 3
           ball.style.left = ball.xx+"px"
           ball.style.top = ball.yy+"px"

           bricks = document.getElementsByClassName("벽돌row_벽돌")
           
           function ballMove(){ //ball 의 경로
                if(ball.xx>270-20 || ball.xx<0){ball.xDir *= -1} //좌우를 빠져나가지 못하게
                if(ball.yy>300-20 || ball.yy<0){ball.yDir *= -1} //위아래를 빠져나가지 못하게
                
                ball.xx += ball.xDir 
                ball.yy += ball.yDir
                ball.style.left = ball.xx+"px"
                ball.style.top = ball.yy+"px"
                
                hit()
                if(ball.yy+10<bar.yy && ball.xx>bar.xx && ball.xx<bar.xx+75){ 
                    ballMove2()
                }else if (ball.yy+5>bar.yy){
                    over()
                }
            }
            
           function ballMove2(){ // bar와 만났을 때 ball의 경로
                if(ball.xx>270-20 || ball.xx<0){ball.xDir *= -1} //좌우를 빠져나가지 못하게
                if(ball.yy>300-30 || ball.yy<0){ball.yDir *= -1} //위아래를 빠져나가지 못하게
                
                ball.xx += ball.xDir 
                ball.yy += ball.yDir
                ball.style.left = ball.xx+"px"
                ball.style.top = ball.yy+"px"
           }

            start =  document.getElementById("start_btn") //start 누르면 시작
            start.onclick  = function(){
                gogo = setInterval(ballMove, 25)
           }
            
        }
            
        window.onkeydown = function(e){
            switch(e.keyCode){
                case 37: //좌
                bar.xx -= 20
                break
                case 39: //우
                bar.xx += 20
                break
            }
            if(bar.xx<0){bar.xx = 0}
            if(bar.xx>270-75){bar.xx=270-75}
           
            if(playChk){
                bar.style.left = bar.xx+"px"
            }
          
        }
        
        function hit(){ //ball 벽돌 부딪혔을 때
            //ballChk = true
            for (let i = 0; i < bricks.length; i++) { //벽돌 없어짐
                const brick = bricks[i]
                brick.yy = brick.offsetTop
                brick.xx = brick.offsetLeft
                if(ball.yy<brick.yy+20 && ball.xx>brick.xx&&ball.xx<brick.xx+50){
                    brick.style.visibility = "hidden"
                }
                /*if(bricks.length == 0){
                clearInterval(gogo) 
                    alert("clear") 
            }*/
               //벽돌이 싹 다 없어졌을 때 clear 창이 나왔으면 좋겠는데 실패했습니다
                /*if(brick[5].style.visibility = "hidden"){. 
                    clearInterval(gogo) 
                    alert("clear") 
                }*/
                /*if(i+1==6){
                    clearInterval(gogo) 
                    alert("clear") 
                }*/
            }
            
        }
       
        function over(){  
                playChk = false
                clearInterval(gogo) 
                alert("game over") 
        
        }
    </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>벽돌깨기</title>
    </head>
<body>
    <h1>벽돌깨기</h1>
    <section>
        <div class="ball"></div>    
        <div id="bar"></div> 
        <div class="벽돌row">
            <div class="벽돌row_벽돌"></div>
            <div class="벽돌row_벽돌"></div>
            <div class="벽돌row_벽돌"></div>
            <div class="벽돌row_벽돌"></div>
            <div class="벽돌row_벽돌"></div>
        </div>
    </section>
   <input type="button" value="start" id="start_btn">
</body>
</html>