벽돌깨기 게임 만들기(4)

5. Paddle과 키보드 제어

5.1 Paddle 정의

• 움직이는 공을 치기 위해서는 paddle이 필요하다.

var paddleHeight = 10; //높이
var paddleWidth = 75;  // 넓이
var paddleX = (canvas.width-paddleWidth)/2;  // x축 위에 시작지점

• 위 코드와 같이 paddle에 관련된 변수를들을 선언해준다.

function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight); 
    ctx.fillStyle = "green";
    ctx.fill();
    ctx.closePath();
}

• drawPaddle() 함수를 만들어 paddle을 그려준다.
• beginPath() ~ closePath() 설명은 벽돌깨기 게임 만들기(1)를 참조

5.2 Paddle 제어

• paddle은 사용자의 키보드 컨트롤에 반응을 해야한다. 그렇기 때문에 키보드 컨트롤을 할 수 있는 코드가 필요하다. 코드는 다음과 같다.

1. 왼쪽 or 오른쪽 컨트롤 버튼이 눌렸는지 확인하는 두개의 변수

var rightPressed = false;
var leftPressed = false;

• 처음에는 컨트롤 버튼이 눌려지지 않은 상태이므로 right과 left 둘 다 기본값 false이다.

2. keydown과 keyup 이벤트 리스너 버튼이 눌렸을 때 paddle의 움직임을 조종할 수 있는 코드

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

• 키가 눌렸음을 인식하기 위해 EventListener를 설정한다.
• 키가 눌리면 keydown이벤트 , 키에서 손을 때면 keyup이벤트가 발생한다.

3. 버튼이 눌렸을 때 keydown과 keyup 이벤트를 핸들링하는 두개의 함수

function keyDownHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = true;
    }
    else if(e.keyCode == 37) {
        leftPressed = true;
    }
}

function keyUpHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = false;
    }
    else if(e.keyCode == 37) {
        leftPressed = false;
    }
}

• keyCode는 눌려진 키에 대한 정보를 가지고 있다. 만약에 keyCode == 37면 왼쪽 방향키, keyCode == 39면 오른쪽 방향키의 정보를 얻을 수 있다.

4. paddle이 왼쪽 혹은 오른쪽으로 움직이는 기능

if(rightPressed && paddleX < canvas.width-paddleWidth) {
    paddleX += 7;
}
else if(leftPressed && paddleX > 0) {
    paddleX -= 7;
}

• 왼쪽 방향키를 누르면, paddle은 좌측으로 7px 움직이고, 오른쪽 방향키를 누르면 우측으로 7px 움직인다. 하지만 좌측 또는 우측으로 계속 움직이다 보면 캔버스 밖으로 사라지기 때문에 paddle이 캔버스 안에서만 움직이도록 계산해야한다.
• paddleX의 위치는 캔버스 왼쪽 끝 0 위치와 오른쪽 canvas.width-paddleWidth 에서 움직이게 된다.