2. 게임 로직 설계(지렁이 온라인 게임)

안녕하세요. 온라인 Snake 게임 개발 교육과정의 두 번째 시간입니다. 오늘은 게임의 핵심 로직을 설계하고 구현하는 과정을 살펴보겠습니다.

Table of Contents

1. 게임 상태 관리

먼저 게임의 전체적인 상태를 관리할 구조를 설계해야 합니다.

const gameState = {
  players: [],
  foods: [],
  gridSize: 20,
  canvasSize: 400
};

이 구조를 통해 플레이어들의 정보, 먹이의 위치, 그리드 크기 등을 관리할 수 있습니다.

2. 플레이어 움직임 구현

각 플레이어의 움직임을 구현하기 위해 다음과 같은 로직이 필요합니다:

function movePlayer(player) {
  const head = {...player.segments[0]};
  switch(player.direction) {
    case 'UP': head.y--; break;
    case 'DOWN': head.y++; break;
    case 'LEFT': head.x--; break;
    case 'RIGHT': head.x++; break;
  }
  player.segments.unshift(head);
  if (!eatFood(player)) {
    player.segments.pop();
  }
}

이 함수는 플레이어의 현재 방향에 따라 새로운 머리 위치를 계산하고, 먹이를 먹지 않았다면 꼬리를 제거합니다.

3. 충돌 감지 시스템

충돌 감지는 게임의 핵심 메커니즘 중 하나입니다. 다음과 같이 구현할 수 있습니다:

function checkCollision(player) {
  const head = player.segments[0];

  // 벽과의 충돌 체크
  if (head.x < 0 || head.x >= gameState.gridSize || 
      head.y < 0 || head.y >= gameState.gridSize) {
    return true;
  }

  // 자기 자신과의 충돌 체크
  for (let i = 1; i < player.segments.length; i++) {
    if (head.x === player.segments[i].x && head.y === player.segments[i].y) {
      return true;
    }
  }

  // 다른 플레이어와의 충돌 체크
  for (let otherPlayer of gameState.players) {
    if (otherPlayer !== player) {
      for (let segment of otherPlayer.segments) {
        if (head.x === segment.x && head.y === segment.y) {
          return true;
        }
      }
    }
  }

  return false;
}

4. 먹이 시스템 및 점수 계산

먹이를 먹었을 때의 로직과 점수 계산은 다음과 같이 구현할 수 있습니다:

function eatFood(player) {
  const head = player.segments[0];
  for (let i = 0; i < gameState.foods.length; i++) {
    if (head.x === gameState.foods[i].x && head.y === gameState.foods[i].y) {
      gameState.foods.splice(i, 1);
      player.score += 10;
      generateFood();
      return true;
    }
  }
  return false;
}

function generateFood() {
  const food = {
    x: Math.floor(Math.random() * gameState.gridSize),
    y: Math.floor(Math.random() * gameState.gridSize)
  };
  gameState.foods.push(food);
}

5. 게임 루프

게임의 상태를 주기적으로 업데이트하고 렌더링하는 게임 루프를 구현합니다:

function gameLoop() {
  for (let player of gameState.players) {
    if (player.alive) {
      movePlayer(player);
      if (checkCollision(player)) {
        player.alive = false;
      }
    }
  }

  // 게임 종료 조건 체크
  const alivePlayers = gameState.players.filter(p => p.alive);
  if (alivePlayers.length <= 1 && gameState.players.length > 1) {
    endGame();
  }

  render();  // 화면 갱신

  setTimeout(gameLoop, 100);  // 100ms 후 다음 프레임
}

6. 멀티플레이어 고려사항

멀티플레이어 게임에서는 다음과 같은 추가적인 고려사항이 필요합니다:

각 플레이어의 입력을 서버로 전송
서버에서 게임 상태를 계산하고 모든 클라이언트에게 동기화
네트워크 지연 보정 (예: 클라이언트 사이드 예측)

이러한 로직들은 다음 포스팅에서 다룰 Socket.io를 이용한 실시간 통신 구현에서 자세히 살펴보겠습니다.

이번 포스팅에서는 Snake 게임의 핵심 로직을 설계하고 구현하는 방법을 살펴보았습니다. 이러한 기본 로직을 바탕으로, 다음 단계에서는 이를 실제 멀티플레이어 온라인 게임으로 확장하는 과정을 알아보겠습니다.

다음 포스팅에서는 Socket.io를 이용한 실시간 멀티플레이어 기능 구현에 대해 다루겠습니다. 감사합니다!

이전 관련 포스팅 링크

프로젝트 결과물: 지렁이 게임 멀티 4인용(ver. 1.0) – CSAI

1. 프로젝트 개요 및 기획(지렁이 게임 온라인) – CSAI