Game setup

This was pretty straightforward with a couple hash maps to track everything

Server loop

• Before thinking about game state I need to figure out how to setup the loop for the game(s).
• For now, always having the loop running and broadcasting to every room available is fine. It’ll allow me to test a single user’s paddle moves before worrying about the other’s and the ball.
• But then how do I manage the ball, could it be as simple as only updating the ball position if 2 players are in the room? Maybe that will help with DCs too.

Game state

• I think having the server being the source of truth will be simplest to start with and I can iterate from there
• In the name of simplicity, the player’s sessionId will be their sole identity
• Lets start with the server broadcasting game state at 60fps. Idk if this will be jittery or overkill but I want it to feel smooth and if I keep the game state tiny I think this should not be an issue networking wise
• Send the full game state for now, can optimize with just deltas later

Punting

• win / lose state
• point transition (it’s jarring but for now just immediately update the score & reset the ball)
• disconnects

Game setup flow:

• server running a game loop
• server calculates new ball position
• server broadcasts to every player with their room’s game state

Server loop flow (interval of X ms):

• server iterates rooms
• server recalculates ball position (iff room full)
  • check for paddle collision, reverse x velocity on hit
  • check for left / right wall collision, update score and reset ball on hit
  • check for top / bottom wall collision, reverse y velocity on hit
  • server will just move ball to the collision point on hit. This avoids the edge case of 2 collisions on the same frame and since we’re aiming for 60fps I think the updates will be small enough this will not be too jarring
• server broadcasts game state
• client receives game state
• client renders new state

Game interaction flow:

• user interacts
• client sends move to server { dy: -0.05 }
  • This is percentage based to decouple the game logic from rendering. This will make future debuffs like a “slowdown” even easier too, all I need is to add a multiplier.
  • This way the server can throttle veleocity and down the line can apply debuffs if I ever introduce them
  • I should throttle client updates, at the minimum to the same tick rate of the server. I wonder if allowing clients to update more often than the server will have any impact, theoretically I think no but maybe it will be good for network hiccups and the like?
• server patches user’s position

Game state

interface GameState {
  player1: { y: number; score: number };
  player2: { y: number; score: number };
  ball: { x: number; y: number; vx: number; vy: number };
}

Client events

• User drags mouse 100px down on a 2000px tall window
• Client Websocket sends message:

  {
    sessionId,
    action:"player:move",
    payload: {
        dy:-.05
    }
  }

Server handlers

const { sessionId, action, payload } = message;
const game = GameRoomManager.getGameBySessionId(sessionId);
const playerId = getPlayer(sessionId);

switch (action) {
  case "player:move":
    GameController.move(game, playerId, payload.dy);
    break;
}

! GameController will just mutate game for now. Immutable feels like a bit much for the point of this project

Server loop

iterate rooms
    skip empty
    update ball position
        on ceiling/floor/paddle hit:
            reroute
        on left/right wall hit:
            score
            reset ball
        else
            add plain velocity to ball
    iterate room sessions
        send game state

Game Logic

class GameController {
    initialVelocity = { x: .02, y: .02 }

    move(game: GameState, player, dy) {
        constrain delta magnitude
        apply delta
        apply player bound constraints
    }

    tick(game: GameState) {
        const ballDistance = pythag(dx,dy)

        if(paddle collision){
            move to collision point
            ball.dx *= -1
        } else if ( ceiling / floor hit ) {
            move to collision point
            ball.dy *= -1
        } else if ( ball out of bounds ) {
            score for player on opposite wall
            reset ball to center & initialVelocity
        } else {
            move distance
        }
    }
}

Server Events - new client

• client connects via websocket

• server generates session id

• server finds room for client

• server sends client initial info

  {
      action: "game:init";
      payload: {
      sessionId: SessionId;
      player: "player1" | "player2";
      roomId: number;
      };
  }

Server Events - tick

• server tick
• server computes new state
• server sends new state

  {
      action: "game:setState";
      payload: GameState;
  }