Real-time Multiplayer Game Server

Project roadmap

1. 01

   Run a server game loop

   ~2h

   Create a Node.js project with Express (to serve the client) and Socket.IO. Write a game loop that runs at a fixed 30 ticks per second with setInterval, using the real elapsed time to stay accurate. Store the world state (arena size, players, food) in plain objects. Add and remove a player when a socket connects or disconnects. Done when: the server logs the tick rate and the number of connected players.

2. 02

   Move players on the server

   ~2.5h

   Clients send only their input: the direction they want to move, tagged with an input sequence number. The server stores the latest input per player and, on each tick, moves every player at a fixed speed, keeping them inside the arena. Reject malformed or impossible input (for example, faster than allowed). Done when: a test client's inputs move its player on the server, and the server ignores invalid input.

3. 03

   Add food, collisions and scoring

   ~2h

   Spawn food at random positions up to a maximum. On each tick, check circle-to-circle collisions: a player touching food eats it, gains a point and grows slightly, and new food spawns. A player touching a moving hazard respawns at a random spot and loses half their score. Done when: players can eat food and grow, and hazards cause a respawn.

4. 04

   Broadcast the game state

   ~2h

   About 20 times per second, send each client a compact snapshot: a tick number, each player's id, position, size and score, plus the last input sequence number the server processed for that client. Send the full food list only when it changes, keeping messages small. Done when: clients receive snapshots at a steady rate, and the message size stays small with 10 players.

5. 05

   Draw the game with interpolation

   ~2.5h

   Draw the arena, food and players on a canvas with requestAnimationFrame, keeping the camera centered on the local player. Draw other players about 100 ms in the past, smoothly interpolating between the two snapshots around that time, so they move smoothly instead of jumping at each update. Show a scoreboard with the top 5 players. Done when: other players move smoothly in the browser.

6. 06

   Predict the local player

   ~3h

   Apply the local player's inputs immediately on the client using the same movement code as the server, and keep a list of inputs not yet confirmed. When a snapshot arrives, reset the local player to the server's position and replay the inputs the server hasn't processed yet (server reconciliation). Test it with an artificial 150 ms delay added on the server. Done when: the local player responds instantly, even with added delay.

7. 07

   Test the game logic

   ~2h

   Put the movement and collision code in a shared module used by both server and client. Write tests with Vitest or node:test for movement, keeping players inside the arena, eating food, respawning after a hazard, and reconciliation producing the same position as the server. Done when: the tests pass.

Resources

• DocsSocket.IO documentation
• ArticleFast-paced multiplayer: client-side prediction (Gabriel Gambetta)
• ArticleFast-paced multiplayer: entity interpolation (Gabriel Gambetta)
• DocsCanvas API tutorial (MDN)
• ArticleFix your timestep (Glenn Fiedler)