신입 개발자의 게임 개발기

Sanke

처음 마주한 게임 보일러 플레이트

들어가기에 앞서

화면에 대한 고민

초기 게임 시작 화면

• 타이틀

• 닉네임 입력 BOX

• 게임 시작 버튼

초기 게임 화면

• 최상단 점수 및 닉네임

• 게임 Canvas 영역

초기 게임 오버 화면

• 랭킹 보드

• 다시하기 및 끝내기 버튼

Snake 게임 설계

1. 사방이 막혀있는 네모난 공간에 조종 가능한 스네이크가 존재한다.

2. 스네이크는 현재 머리가 향하는 방향으로 멈추지 않고 이동한다.

3. 플레이어는 방향키로 머리가 진행하는 방향만 바꿀 수 있다.

4. 스네이크가 벽이나 자신의 몸 이불에 머리를 부딪치면 게임 오버된다.

5. 목적은 최대한 화면에 생성된 사과를 먹어 길이를 늘리는 것이다.

// 테스트케이스 일부 예시
describe('방향 테스트', function () {
  it('왼쪽 화살표를 누르면 다음 방향이 W가 된다.', function () {
    move('ArrowLeft');
    assert.deepEqual('W', snakeObject.beforeDirection);
  });
  it('아래쪽 화살표를 누르면 다음 방향이 S가 된다.', function () {
    move('ArrowDown');
    assert.deepEqual('S', snakeObject.beforeDirection);
  });
  it('오른쪽 화살표키를 누르면 다음 방향이 E가 된다.', function () {
    move('ArrowRight');
    assert.deepEqual('E', snakeObject.beforeDirection);
  });
  it('위쪽 화살표키를 누르면 다음 방향이 N이 된다.', function () {
    move('ArrowUp');
    assert.deepEqual('N', snakeObject.beforeDirection);
  });
  it('머리 방향이 위쪽일때 반대방향인 아래쪽을 누르면 아무 변화가 없다.', function () {
    move('ArrowDown');
    assert.deepEqual('N', snakeObject.beforeDirection);
  });
});```

본격적인 개발 시작

방향을 바꿔봅시다.

// 이 아이는 머리 방향을 정해줍니다!
function move(key) {
  if ((key === 'ArrowUp' && !snakeObject.direction = 'S')) {
    snakeObject.direction = 'N';
  } else if ((key === 'ArrowDown' && !snakeObject.direction = 'N')) {
    snakeObject.direction = 'S';
  } else if ((key === 'ArrowLeft' && !snakeObject.direction = 'E')) {
    snakeObject.direction = 'W';
  } else if ((key === 'ArrowRight' && !snakeObject.direction = 'W')) {
    snakeObject.direction = 'E';
  }
}

해당 방향으로 자동으로 움직여봅시다.

// 여기서 정리된 스네이크가
function snake({ ctx }) {
  if (snakeObject.direction === 'W') {
    snakeObject.pos.x -= gameConfig.size;
  } else if (snakeObject.direction === 'E') {
    snakeObject.pos.x += gameConfig.size;
  } else if (snakeObject.direction === 'N') {
    snakeObject.pos.y -= gameConfig.size;
  } else if (snakeObject.direction === 'S') {
    snakeObject.pos.y += gameConfig.size;
  }
  renderSnake({ ctx, snake: snakeObject, color: '#5c9a63' });
}

// 여기서 그려집니다.
function renderSnake({ ctx, snake, color }) {
  const { direction, beforeDirection } = snake;
  let { x, y } = snake.pos;
  let { x: changeX, y: changeY } = snake.changePos;
  for (let f = 0; f <= (snake.size - 1) * gameConfig.size; f++) {
    let posX = x;
    let posY = y;
    if (direction === 'E') {
      posX = x - f;
    } else if (direction === 'W') {
      posX = x + f;
    } else if (direction === 'S') {
      posY = y - f;
    }
    drawRect({
      ctx,
      x: posX,
      y: posY,
      width: gameConfig.size,
      height: gameConfig.size,
      color,
    });
  }
}

먹이를 추가해 봅시다.

const apple = { x: 0, y: 0 };

function appleMake() {
  apple.x =
    Math.floor(Math.random() * (gameConfig.width / gameConfig.size)) *
    gameConfig.size;
  apple.y =
    Math.floor(Math.random() * (gameConfig.width / gameConfig.size)) *
    gameConfig.size;
}

충돌을 체크해 봅시다.

function crashCheck() {
  // Canvas Size 400 * 400
  if (snakeObject.pos.x < 0 || snakeObject.pos.x > 390) {
    console.log('충돌했어요!');
  }
  if (snakeObject.pos.y < 0 || snakeObject.pos.y > 390) {
    console.log('충돌했어요!');
  }
  if (snakeObject.pos.x === apple.x && snakeObject.pos.y === apple.y) {
    console.log('먹었어요!');
    snakeObject.size += 1;
    appleMake();
  }
}

우리 스네이크가 이상해요... 🤔

처음부터 다시 해봅시다.

// 스네이크 배열
const body = [{ x: 200, y: 200 }]; // 0번 인덱스는 머리가 된다.

function crashCheck() {
  // 스네이크 배열 인덱스 0 은 머리입니다.
  if (body[0].x < 0 || body[0].x > 390) {
    console.log('충돌했어요!');
  }
  if (body[0].y < 0 || body[0].y > 390) {
    console.log('충돌했어요!');
  }
  if (body[0].x === apple.x && body[0].x === apple.y) {
    console.log('먹었어요!');
    body.push({ x: body[0].x, y: body[0].y });
    appleMake();
  }
}

function renderSnake({ ctx, snake, color }) {
  for (let f = 0; f < body.length; f++) {
    crashCheck(snake.body[0].x, snake.body[0].y);

    // 스네이크의 머리와 몸을 구분해서 그려준다.
    if (f === 0) {
      drawRect({
        ctx,
        x: snake.body[f].x,
        y: snake.body[f].y,
        width: gameConfig.size,
        height: gameConfig.size,
        color: '#104216',
      });
    } else {
      drawRect({
        ctx,
        x: snake.body[f].x,
        y: snake.body[f].y,
        width: gameConfig.size,
        height: gameConfig.size,
        color,
      });
    }
    drawRect({
      ctx,
      x: apple.x,
      y: apple.y,
      width: gameConfig.size,
      height: gameConfig.size,
      color: 'red',
    });
  }
}

새로운 버그가 생겼습니다.

function crashCheck(headX, headY) {
  if (!gameOver) {
    if (headX < 0 || headX > gameConfig.width - 10) {
      gameEnd();
    }
    if (headY < 0 || headY > gameConfig.height - 10) {
      gameEnd();
    }
    // 여기와!
    for (let i = 0; i < snakeObject.body.length; i++) {
      if (headX === snakeObject.body[i].x && headY === snakeObject.body[i].y) {
        gameEnd();
      }
    }
    // 여기서 문제 발생!!
    if (headX === snakeObject.apple.x && headY === snakeObject.apple.y) {
      snakeObject.score += 10 * snakeObject.body.length;
      scoreSpan.innerText = `score : ${snakeObject.score}`;
      appleMake();
      snakeObject.body.push({
        x: snakeObject.body[0].x,
        y: snakeObject.body[0].y,
      });
    }
  }
}

    // 이제 사과는 안전합니다.

    // 머리와 목은 제외하고 순회한다. (길이 4까지는 충돌이 원래 없다.)
    for (let i = 2; i < snakeObject.body.length; i ++) {
      if (headX === snakeObject.body[i].x && headY === snakeObject.body[i].y) {
        gameEnd();
      }
    }

    if (headX === snakeObject.apple.x && headY === snakeObject.apple.y) {
      snakeObject.score += 10 * snakeObject.body.length;
      scoreSpan.innerText = `score : ${snakeObject.score}`;
      appleMake();
      snakeObject.body.unshift({ x: snakeObject.body[0].x, y: snakeObject.body[0].y });
    }
  }
}

function appleMake() {
  snakeObject.newApple.x =
    Math.floor(Math.random() * (gameConfig.width / gameConfig.size)) *
    gameConfig.size;
  snakeObject.newApple.y =
    Math.floor(Math.random() * (gameConfig.height / gameConfig.size)) *
    gameConfig.size;
  for (let i = 0; i < snakeObject.body.length; i++) {
    if (
      snakeObject.body[i].x !== snakeObject.newApple.x &&
      snakeObject.body[i].y !== snakeObject.newApple.y
    ) {
      snakeObject.apple = snakeObject.newApple;
    } else {
      // 겹치면 새로 다시 랜덤으로 생성
      snakeObject.newApple.x =
        Math.floor(Math.random() * (gameConfig.width / gameConfig.size)) *
        gameConfig.size;
      snakeObject.newApple.y =
        Math.floor(Math.random() * (gameConfig.height / gameConfig.size)) *
        gameConfig.size;
    }
  }
}

랭킹을 만들어봅시다.

app.post('/rank', (request, response) => {
  const logDate = new Date();
  const { name, score } = request.body;
  if (Number.isInteger(score) && score > 0 && name !== '') {
    console.log(`New Log : ${name}, ${score} : ${logDate}`);
    rank.push({ name, score });
    response.send(rank);
  }
});

fetch('/rank', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name, score: snakeObject.score }),
})
  .then(res => res.json())
  .then(json => ranking(json));

function ranking(json) {
  // 랭킹을 초기화 후 새로 그려준다.
  while (rankDiv.hasChildNodes()) {
    rankDiv.removeChild(rankDiv.firstChild);
  }

  // 점수가 높은 순으로 내림차순 정렬
  json.sort((a, b) => b.score - a.score);

  json.forEach((e, i) => {
    const rankSpan = document.createElement('span');
    rankSpan.setAttribute('class', 'rank-span');
    rankSpan.innerText = `${i + 1} . ${e.name} ${e.score}점`;
    rankDiv.appendChild(rankSpan);
  });
}