javascript game (5)

2017-04-21

game, html5, js

잡담

한 가지 우물을 파야 짱짱맨이 될 수 있다는데… 난 자꾸 이것 저것 해보고 싶어져서 큰일이다.

요즘은 Unity를 처음 접해서 Unity 매력에 푹 빠져 버렸다. Unity에서는 C#만 사용할 줄 알았는데 Javascript와 Boo) 라는 총 3개의 스크립트를 지원한다. 어느 스크립트를 사용하는게 성능상 유리할지는 아직 잘 모르겠지만, Javascript를 지원하니 뭔가 우리편인 거 같은 기분이(?) 들어서 더 친근감이 느껴진다. ~~말이야 똥이야~~

아무튼, 오늘은 Game Over 를 구현해보자.

지난 포스팅이 궁금하면 다음 아래 링크를 참고하기 바란다.

Game Over

지난 시간에 구현한 게임을 보고 있자면 끝없이 튕기는 공만 보이니 지루하기 그지 없다. 이제, 우리는 게임 종료에 대한 로직을 구현해보자!

Game Over 구현

이 게임에서 게임이 끝나려면 어떻게 하면 될까? 굉장히 간단하다. 공이 화면 아래로 떨어져버리면 끝난다.

그럼 어떻게 해야 할까? 먼저, 공이 Y축의 아래로 닿았을 경우 Game Over! 를 외치게 만들면 되겠다. 먼저, 예전에 작성한 아래와 같은 코드가 기억 나는가?

1
2
3

if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
    dy = -dy;
}

Y 축의 위 아래에 대한 공 튀기는 로직이다. 위 코드를 아래처럼 바꿔보자.

if (y + dy < ballRadius) {
  dy = -dy;
} else if (y + dy > canvas.height - ballRadius) {
  alert('Game Over!');
  document.location.reload();
}

복잡해졌다… 하나씩 살펴보자.

if (y + dy < ballRadius) 이 조건절을 알아보려면 먼저 y, dy, ballRadius가 뭐였는지 기억해내야 된다. 바로 공의 Y 좌표, 공의 Y축 이동 방향 (값과 방향이 있으니 벡터라고 해도 되겠다), 공의 반지름 되시겠다.

그럼 저 조건은 뭐냐! 바로, 공의 Y 좌표가 10보다 작은 위치에 있을 경우 true 를 만족하는 조건문이다. 즉, Y축 맨 꼭대기에 닿았다는 의미이다. 이때는 벽에 맞고 공이 튕겨야 되니깐 dy의 부호를 반대로 바꿔 방향을 바꾸도록 하는 것이다.

그렇다면 그 다음! } else if (y + dy > canvas.height - ballRadius) { 여기가 중요하다. canvas.height는 canvas의 높이를 나타내므로 좌표로 따졌을 때 Y축의 바닥 좌표를 나타낸다. 여기서 ballRadius인 10px만큼 뺐고, y + dy는 공의 위치를 나타낸다고 했으니, 종합해보면 아랫 바닥에 공이 부딪히면 true 인 조건문이라고 생각하면 되겟다.

그럼 이 경우가 true가 되면 공이 바닥으로 떨어져 버린거고, 우리는 신나게 Game Over!를 외쳐주면 된다. 여기에서는 alert() 함수를 통해 경고창을 띄우고, document.location.reload()를 사용해서 현재 페이지를 다시 로딩하도록 하고 있다.

자, 이제 공이 바닥에 닿으면 게임 오버 이므로 조심히 플레이 하기 바란다.

근데 이렇게만 해놓으면 공은 항상 바닥에 닿게되고, 게임이 끝나게 된다. 너무 재미 없다. 그래서 우리가 만든 판때기를 통해 공을 튕겨내도록 구현해보자.

판때기로 공 튕겨내기

어떻게 할 수 있을까? 좌표.. 좌표를 생각하자! 판때기는 항상 바닥에 붙어서 양 옆으로만 움직인다. 그리고 공이 판때기에 닿았을 경우에 공이 튕겨 나가도록 방향을 바꾸면 될 것 같다. 그렇지 않은가?

우리가 알고 있는 좌표는 공의 X, Y 좌표인 x, y와 판때기의 X 좌표인 paddleX, 그리고 판때기의 너비인 paddleWidth 를 알고 있다. 그럼 준비는 다 됬다.

공의 Y 좌표가 판때기의 Y 좌표에 오고, 즉 바닥에 닿고, 공의 X 좌표가 판때기 안으로 들어왔을 경우 방향을 바꾸면 되겠다. 구현해보자! 위으 코드를 다음과 같이 바꾸면 된다.

if(y + dy < ballRadius) {
    dy = -dy;
} else if(y + dy > canvas.height-ballRadius) {
    if(x > paddleX && x < paddleX + paddleWidth) {
        dy = -dy;
    }
    else {
        alert("GAME OVER");
        document.location.reload();
    }
}

우리가 중요하게 봐야 할 부분은 if(x > paddleX && x < paddleX + paddleWidth) 이다. 공의 X 좌표가 판때기의 위치를 나타내는 (paddleX, paddleX + paddleWidth) 좌표 내에 들어올 경우, 공의 방향을 바꾸는 조건문이다. ~~간단하지 않는가?~~

그럼 이번에 고친 내용들을 수행하면 아래 데모와 같을 것이다.

아, 게임 오버가 되면 계속 alert() 때문에 굉장히 귀찮아서 주석처리 해놨다.

그럼 나머지는 다음 시간에…

_이 포스트는 MDN 2D Breakout game 의 튜토리얼을 참고한 내용 입니다._

Dev Huna

JavaScriptGame

javascript game (5)

잡담

Game Over

Game Over 구현

판때기로 공 튕겨내기