자바스크립트 내공 기르기 (3) -벽돌 움직이기-

자바스크립트 내공 기르기 (3) 

-Paddle 움직이기-

지난 포스팅에서, 공을 생성하고, 캔버스 벽에 튕기는 것까지 구현했었다. 이번에는 벽돌모양의 네모 Shape을 캔버스에서 생성한 후에 좌우로 움직이는 모션까지 진행해보자.

 

1 『 네모 도형 만들기 』

 

-> paddle은 좌우로만 움직이면 되니깐 paddleX 변수만 만든다.

-> paddleX값은 캔버스 좌우 너비에서 paddle크기(paddleWidth)를 뺀 후에 /2를 좌표에 위치시킨다.

 

-> leftPressed와 rightPressed값은 각각 키보드 화살표 좌우버튼을 의미한다. 게이머가 입력할 때만 작동해야 한다. 따라서 처음에는 false로 설정한다.

2 『 paddle 그리기 』

ctx.rect는 사각형을 그리는 캔버스 매서드인데, rect에서 r이 소문자로 시작된다는 점에 주의하자.

  

draw()함수에 drawPaddle()함수를 입력하면, 아래처럼 paddle이 나타난다.

 

3 『 이벤트 생성하기 』 

document엘리먼트를 사용해서 'keydown' , 'keyup' 키보드를 눌렀다 떼는 동작에 관한 두개의 이벤트를 생성한다. 

-> 키보드를 눌렀을 때, 39번은 오른쪽 화살표, 37번은 왼쪽 화살표로 컴퓨터가 인식한다.

-> keyDown핸들러 함수를 만들고, 왼쪽인지 오른쪽인지 if구문으로 정리한다. 

-> rightPressed, leftPressed 변수에 미리 false값을 넣어놨기 때문에 이를 true로 변경하면, 키가 눌러졌음을 의미한다.   

 

4 『 패들 움직이기 』

leftPressed:true일때와 rightPressed:true일 때, paddleX값에 각각 -,+값을 추가해서 캔버스가 paddle을 갱신하도록 만든다.  

  

* 문제점 : paddle이 캔버스 바깥으로 넘어가는 문제가 발생한다. 

  

5 『 paddle 제한값 설정 』

paddle이 캔버스의 좌측 바깥에 나갔을 때는 아무런 동작을 못하도록 &&( And의미)로 묶어서 if값에 넣어준다. 오른쪽 한계점도 아래처럼 설정한다.

 

위의 코드를 실행하면, paddle이 정상적으로 캔버스 내에서 움직인다.