자바스크립트 내공 기르기(4) -Game Over 설계-

내공 기르기(4) -Game Over 설계-

지난 포스팅에서 공이 벽면에 충돌하는 것까지 진행했다. 이번에는 공이 캔버스 하단에 부딪치면 'Game Over'가 되고, Paddle에 부딪치면 다시 튕겨져 나가는 '충돌'까지 구현해보자.

1 『draw함수 수정 』

---

if( x>canvas.width-ballRadius || x<ballRadius){

    dx = -dx;

}else if( y < ballRadius ){

    dy = -dy;

}else if( y > canvas.height - ballRadius ){

                   ...( 공이 패달과 부딪치는 경우와 아닌 경우로 나눠야 함 )

}

---

공의 y 값이 천정에 닿는 부분은 가속도 dy방향이 반대 부호로 바꿔야 한다. 하지만 y값이 하단에 닿을 경우에는 경우의 수가 발생한다. 첫번째는 paddle밖에 닿는 경우로 'game over' 문구가 떠야한다. 두 번째는 paddle안에 공이 닿을 경우인데, 이때는 다시 공이 튕겨져 나와야 하므로 'dy = -dy'가 온다.

2 『y축 충돌코드 』

y축이 하단에 닿거나 넘어갈 경우, 특별한 조치가 필요하다. 게임이 끝나야 하기 때문이다.  

---

if( x>canvas.width-ballRadius || x<ballRadius){
       dx = -dx;
 }  else if  ( y < ballRadius  ) {

      dy = -dy;

 }else if ( y > canvas.height-ballRadius-paddleHeight ) {  

           if(x > paddleX && x < paddleX + paddleWidth){

                         dy = -dy;
             }else{

                         alert('Game over');
                         document.location.reload();
                  }
        }

---

공의 x값 ( x )이 패달의 넓이 paddleX부터 paddleX + paddleWidth 사이에 위치할 때에만 dy = -dy 방향이 전환된다. 반대로 공의 x값이 패달 바깥에 있을 경우에는 'game over'라는 경고가 뜨고, 게임을 재실행한다. document.location.reload( );코드가 실행되기 때문이다.

게임오브 코드는 꽤 간단하다.