자바스크립트 내공 기르기 (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이 정상적으로 캔버스 내에서 움직인다.
'웹개발 자료실 > 웹게임제작 Code' 카테고리의 다른 글
자바스크립트 내공기르기(6) - 벽돌충돌 - (2) | 2019.04.12 |
---|---|
자바스크립트 내공기르기(5) - 벽돌 쌓기 - (0) | 2017.08.01 |
자바스크립트 내공 기르기(4) -Game Over 설계- (0) | 2017.07.31 |
자바스크립트 내공기르기 (2) - 공 충돌 만들기 - (0) | 2017.07.27 |
자바스크립트 내공기르기 (1) - 벽돌깨기 게임 (1) 캔버스 Setting- (0) | 2017.07.26 |
댓글