JavaScriptGame

javascript game (4)

game, html5, js

잡담

오늘은 공을 튕길 수 있는 판때기를 만드는 방법과 키보드를 통해 그 판때기를 이동하도록 구현을 해볼 것이다. 이제 좀 게임같이 보일 것이다.

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

  1. 캔버스 생성과 그리기
  2. 공 움직이기
  3. 벽에 공 튀기기

판때기 구현과 키보드 컨트롤

그럼 시작 해 볼까?

판때기 구현

판때기 구현을 위해 몇 가지 변수를 선언해보자. 필요한 변수는 판때기 높이와 너비, 그리고 판때기의 X 좌표를 저장할 변수이다. 바로 이렇게!

1
2
3
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width - paddleWidth) / 2;

판때기 높이는 10px, 너비는 75px, X 좌표는 canvas의 너비를 기준으로 판때기 만큼 뺀 다음 2로 나눠서 중앙에 위치하도록 설정했다. 왜 canvas.width / 2 로 안하고 (canvas.width - paddleWidth) / 2 로 하냐고? 전자는 판때기가 중앙에 위치하지 않는다. 못믿겠으면 아래 판때기 그리는 함수를 구현한 후 실행해보면 된다.

판때기 그리는 함수를 만들어 보자.

1
2
3
4
5
6
7
function drawPaddle() {
  ctx.beginPath();
  ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
  ctx.fillStyle = '#0095DD';
  ctx.fill();
  ctx.closePath();
}

위에 선언했던 변수들을 바탕으로 직각사각형 하나를 그렸다. Y축의 시작 좌표가 왜 canvas.height - paddleHeight 인지 궁금한 사람이 있을 것이다. canvas.height는 웹에 표시되는 canvas의 가장 아래 좌표를 가리킨다. 우리는 canvas를 선언할 때 다음과 같이 했었다. 기억 안나지?

1
<canvas id="myCanvas" width="480" height="320"></canvas>

즉, 320px로 지정했으니 canvas.height의 값은 320이 나올 것이다. 그런데! 만약 우리가 판때기의 위치 중 Y좌표를 canvas.height 만 했다면? 판때기가 canvas 아래로 벗어나서 보이지 않을 것이다. 따라서 Y축 위치를 위로 10px만큼 옮겨주기 위해 canvas.height - paddleHeight 가 된 것이다.

그리고 나서 drawPaddle() 함수를 draw()에 넣어주자. 그럼 화면에 판때기 하나가 그려졌을 것이다. 하지만 움직이지 않는다…

사용자가 키보드를 사용해서 판때기를 움직이게 하기

쉽다. 이벤트를 구현해주면 된다. 이벤트는 뭔가요?

먼저 우리는 오른쪽, 왼쪽에 대한 값을 저장할 변수가 필요하다. 선언하자.

1
2
var rightPressed = false;
var leftPressed = false;

두 변수의 초기값이 false인 이유는 처음에는 당연히 키보드가 안눌려 있기 때문이다. 내가 먼저 누를꺼니깐

그럼 저 변수를 어떻게 사용할 것인가? 바로 순수 자바스크립트를 이용해서 왼쪽 방향키와 오른쪽 방향키에 대해 이벤트를 등록해서 사용할 것이다. 바로 이렇게!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
document.addEventListener('keydown', function(e) {
  if (e.keyCode === 39) {
    rightPressed = true;
  } else if (e.keyCode === 37) {
    leftPressed = true;
  }
}, false);

document.addEventListener('keyup', function(e) {
  if (e.keyCode === 39) {
    rightPressed = false;
  } else if (e.keyCode === 37) {
    leftPressed = false;
  }
}, false);

MDN의 예제에는 콜백 함수가 따로 선언되어 있지만 나는 귀찮아서 익명 함수로 생성해서 사용했다. 그리고 파라미터로 넘어간 e는 이벤트 객체이다.

addEventListener()는 여기 에서 참고해서 보면 된다. 절대 귀찮아서 그런거 아니다

자, 이제 실행해 보자. 잘 움직이는가? ㅋㅋㅋㅋ

움직이지 않을 것이다. 왜? 이벤트만 추가했지 실질적으로 판때기를 움직이는 로직은 아직 구현하지 않았기 때문이다.

마지막으로 아래 코드를 draw() 함수에 끝부분에 적어준다.

1
2
3
4
5
6
if(rightPressed && paddleX < canvas.width-paddleWidth) {
    paddleX += 7;
}
else if(leftPressed && paddleX > 0) {
    paddleX -= 7;
}

간단하다. 오른쪽 방향키가 눌리면 rightPressed가 true가 될 꺼고, 판때기 X 좌표가 canvas.width - paddleWidth 보다 작다면 paddleX 에 7px 만큼 더해줘서 오른쪽으로 움직이는 효과를 주었다. 그럼 왼쪽은 반대로 생각하면 되겠지?

자, 이제 코드를 실행해보자. 이번엔 잘 움직일 것이다. 바로 이렇게






그런데 판때기가 공을 튕기지 않는 기분이다… 나머지는 다음 시간에!





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

Share