Online Game Development Course (2)

This guide outlines the essential steps to build a multiplayer Snake game using JavaScript. The main components include managing the game state, player movements, collision detection, food mechanics, and setting up a game loop. Here, we’ll also consider multiplayer aspects using Socket.io for real-time communication.

1. Game State Management

We start by defining a structure to manage the overall game state:

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

This structure will hold player information, food positions, grid size, and canvas size.

2. Implementing Player Movement

Next, we implement the logic to move each player based on their current direction:

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();
  }
}

This function updates the player’s position and handles the growth of the snake when it eats food.

3. Collision Detection System

Collision detection is crucial for game mechanics. The following function checks for collisions with walls, the player’s own body, and other players:

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

  // Check collision with walls
  if (head.x < 0 || head.x >= gameState.gridSize || 
      head.y < 0 || head.y >= gameState.gridSize) {
    return true;
  }

  // Check collision with self
  for (let i = 1; i < player.segments.length; i++) {
    if (head.x === player.segments[i].x && head.y === player.segments[i].y) {
      return true;
    }
  }

  // Check collision with other players
  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;
}

This function ensures that any collision results in appropriate game actions, like ending the game for the player.

4. Food Mechanics and Scoring

To handle food consumption and scoring, we use the following functions:

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);
}

These functions manage food spawning and scoring when a player consumes food.

5. Game Loop

The game loop updates the game state and renders the game at regular intervals:

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

  // Check game end condition
  const alivePlayers = gameState.players.filter(p => p.alive);
  if (alivePlayers.length <= 1 && gameState.players.length > 1) {
    endGame();
  }

  render();  // Update the game display

  setTimeout(gameLoop, 100);  // Call gameLoop every 100ms
}

The game loop ensures continuous gameplay by repeatedly updating and rendering the game state.

6. Multiplayer Considerations

For multiplayer functionality, consider the following steps:

• Send each player’s inputs to the server.
• The server calculates the game state and syncs it with all clients.
• Handle network latency with client-side prediction.

These aspects will be detailed in the next post, focusing on real-time communication using Socket.io.

---

In this post, we covered the core logic for a Snake game. In the next part, we will expand this into a multiplayer online game using Socket.io. Stay tuned!

---

Previous Related Posts

• Project Outcome: Multiplayer Snake Game for 4 Players – CSAI
• Online Game Development Course (1) – CSAI