자바스크립트: Snake 게임 만들기 2 – 블럭이 스스로 움직이도록 만들기 & 사과(먹이) 만들기

• 자바스크립트: Snake 게임 만들기 1 – 블럭 움직이기
• 자바스크립트: Snake 게임 만들기 2 – 블럭이 스스로 움직이도록 만들기, 사과(먹이) 만들기
• 자바스크립트: Snake 게임 만들기 3 – 뱀 몸체 만들기, 마무리 (完)

velocity 변수 추가

let positionX = 10, positionY = 10
const gridSize = 20, tileCount = 20

let velocityX = 0, velocityY = 0

function game() {

    // ...
}

Snake 게임에서 중요한 부분은 여러 개의 블록으로 이루어진 뱀이 계속해서 움직여야 한다는 점입니다. 이전 글에서 블록 한 개가 움직이도록 만들었지만 사실 그게 아닙니다. 그러므로 방향 키는 움직이는 블록의 방향과 속도만 정해져야 합니다. 따라서 방향을 지정하는 velocityX, velocityY 변수를 생성하겠습니다.

keyPush 함수 변경

방향키의 이벤트가 설정된 keyPush 함수에서 방향키를 눌렀을 때 position 이 아닌 velocity가 조정되도록 변경합니다.

function keyPush(evt) {
    switch (evt.keyCode) {
        case 37:
            velocityX = -1;
            velocityY = 0;
            break;
        case 38:
            velocityX = 0;
            velocityY = -1;
            break;
        case 39:
            velocityX = 1;
            velocityY = 0;
            break;
        case 40:
            velocityX = 0;
            velocityY = 1;
            break;
    }
}

game 함수에 velocity에 따라 position이 동적으로 변하도록 코드 추가

function game() {
    
    positionX += velocityX
    positionY += velocityY

    if (positionX < 0) {
        positionX = tileCount - 1
    }
    if (positionX > tileCount - 1) {
        positionX = 0
    }
    if (positionY < 0) {
        positionY = tileCount - 1
    }
    if (positionY > tileCount - 1) {
        positionY = 0
    }
    
    ctx.fillStyle = "black"
    ctx.fillRect(0, 0, canvas.width, canvas.height)

    ctx.fillStyle = "lime"
    ctx.fillRect(positionX * gridSize, positionY * gridSize, gridSize - 2, gridSize - 2)
}

게임의 프레임이 진행될 때마다 포지션이 velocity 쪽으로 가속하여 이동하도록 위의 하이라이트 부분을 추가합니다.

여기까지 블록이 움직이게 됩니다. 아래 스크린샷은 버그가 발생했을 때 찍은 것이기 때문에 움직임이 이상합니다.

사과(먹이) 만들기

게임에서 뱀은 먹이를 먹으면 길이가 늘어나게 됩니다. 사과의 위치를 지정하는 변수를 만들도록 하겠습니다. 초기값을 랜덤으로 지정하면 좋겠지만 단순화를 위해 (15, 15) 로 설정하도록 하겠습니다.

let positionX = 10, positionY = 10
const gridSize = 20, tileCount = 20

let velocityX = 0, velocityY = 0

let appleX = 15, appleY = 15

사과는 빨간색 블록으로 하고 이것을 그리는 코드를 game 함수 내에 작성해 보도록 하겠습니다. game 함수의 최하단에 작성합니다.

function game() {
    
    // ......

    // 사과 그리기
    ctx.fillStyle = "red"
    ctx.fillRect(ax * gridSize, ay * gridSize, gridSize - 2, gridSize - 2)
}

사과를 먹으면 다른 위치에 생성되도록 하기

뱀이 사과를 먹는다면 사과는 없어지고 다른 랜덤한 위치에서 생성되도록 하는 부분입니다. 사과 그리기 부분 위에 작성합니다.

function game() {
    
    // ...
    
    if(appleX === positionX && appleY === positionY) {
        appleX = Math.floor(Math.random() * tileCount)
        appleY = Math.floor(Math.random() * tileCount)
    }
    
    // 사과 그리기
    ctx.fillStyle = "red"
    ctx.fillRect(appleX * gridSize, appleY * gridSize, gridSize - 2, gridSize - 2)
}

positionXY가 appleXY의 위치와 같다면, 랜덤 기능을 사용하여 새로운 위치에 apple 을 지정하도록 합니다.

아직 불완전한 코드이지만 어느 정도는 동작하는 것을 볼 수 있습니다.

• 자바스크립트: Snake 게임 만들기 1 – 블럭 움직이기
• 자바스크립트: Snake 게임 만들기 2 – 블럭이 스스로 움직이도록 만들기, 사과(먹이) 만들기
• 자바스크립트: Snake 게임 만들기 3 – 뱀 몸체 만들기, 마무리 (完)