How to make a multiplayer browser game

Pick turn-based, real-time or host-run play, say how many players and how they play together, and Go Bananas builds a game your friends join from a link.

Multiplayer is what turns a small game into an evening with friends. The hard parts are keeping every player's screen in agreement, handling people who join late or drop out, and sharing the game without anyone installing anything. On Go Bananas you describe the game, and the site handles rooms, invites and connections. This guide covers the three kinds of multiplayer, how to ask for the one you want, how playing together works, and what to keep in mind when you design for more than one person.

The three kinds of multiplayer

Every multiplayer game on Go Bananas uses one of three ways of keeping players in sync. You don't have to name them, but knowing them helps you describe your game well.

Turn-based is the most forgiving. Nothing happens between moves, so a slow connection only delays a turn. Checkers, chess, tic-tac-toe and trivia all fit.

Real-time feels alive but needs more care. Each player sends their own state about 20 times a second, and the other screens draw what they receive. It suits games where each player controls their own character, like a race or a dogfight.

Host-run is for games where something besides the players moves: a ball both teams chase, waves of enemies, a shrinking arena. One game decides what happens, so everyone sees the same ball in the same place.

How to ask for a multiplayer game

Be specific about how people play together. A good request answers these questions:

• How many players? Games can have up to 16. Say "2 players" or "up to 8 players".
• Turn-based or real-time? "Players take turns" or "everyone moves at the same time".
• Versus or co-op? Are players against each other, or working together against the game?
• Teams? "Two teams of 3", "every player for themselves".
• What ends the game? A score to reach, a timer, the last player standing.

For example:

A real-time top-down racing game for up to 6 players on one track with tight corners. Three laps, first to finish wins. Each player picks a car color. Show everyone's position on a mini-map.

Or:

A turn-based game for 2 players: connect four on a 7 by 6 grid. Show whose turn it is, highlight the winning line, and offer a rematch.

Every game also gets a single-player mode with a "Play vs AI" button and Easy, Medium and Hard levels, so people can try it alone. When a game starts in multiplayer mode it skips that menu and starts right away.

How playing together works on Go Bananas

Starting a room

1. Open the game and choose Multiplayer instead of Play Solo. The Multiplayer option only appears for games made for more than one player.
2. Choose Create Room. You become the host.
3. The lobby shows a room code and a link under "Share this link with friends", with buttons to copy it or open your phone's share menu.
4. Friends join, and their names appear in the player list.
5. Only the host can press Start Game.

Joining

There are two ways in:

• The link. Opening the invite link shows a Join Game window: "Your friend made this game with AI!", a box for your name and a Join Game button. No account and no install needed.
• The room code. Choose Multiplayer, then Join Room, and type the 6-character code. Codes leave out O, 0, I and 1, so they're hard to misread.

People can join a game that's already running if there's a free place. If every place is taken, they see "Room is full".

When someone leaves or loses connection

Phones drop connections, and people switch apps to send the invite. Go Bananas plans for that:

• A host who switches apps while waiting in the lobby keeps the room, so the invite still works when they come back.
• If the host leaves for good, a new host is picked from the players still connected. When nobody is left, the room closes.
• A player who loses connection gets their place held for 15 minutes.
• The game tries to reconnect on its own, 5 times, 5 seconds apart, and shows "Connection lost — Reconnecting" while it tries.
• A room with no activity closes after 30 minutes, and any room closes after 4 hours.

Designing for more than one player

A multiplayer game has to be fair and has to agree with itself on every screen. These habits help, and you can ask for them directly.

Give each player their own starting point. Players who spawn on top of each other start the game confused. In board games, each player should see the board from their own side.

Let one game decide shared random things. If a card deck is shuffled or a map is generated randomly, the host should do it once and send the result. Otherwise each screen rolls its own dice and the players end up in different games.

Never send hidden information. If players have secret hands or hidden roles, don't send the other players' secrets at all. Anything sent to a browser can be read by a curious player.

Use commit-then-reveal for simultaneous choices. In rock-paper-scissors style games, each player first locks in a choice without revealing it. Only when everyone has locked in are the choices shown.

Plan for lag. Real-time updates arrive about 20 times a second, and each takes some time to travel. Smooth the movement of other players instead of jumping them from one position to the next, and decide hits in one place so two screens don't disagree.

Decide what happens when someone leaves. Does their character stay, vanish or get taken over by the computer? Does the match end if only one player is left? Say so in your request.

Keep messages small. Send what changed, not the whole game, and stay under about 60 messages a second per player.

For developers: the multiplayer helpers

Go Bananas games get a ready-made connection, so a game must not open its own WebSocket. In multiplayer mode, window.gameOptions describes the session (mode, playerId, isHost, players, roomCode, playerName), and the shortcuts window.playerId, window.isHost and window.playerName are set. In single-player mode window.mp is a do-nothing stand-in, so the same code runs alone.

Sending, through window.mp:

• sendTurn(data): a move in a turn-based game. Don't use a key named type in data, or the message is dropped.
• sendState(state): your own player's state in a real-time game. It's limited to about 20 sends a second.
• sendAction(action): a one-off event in a real-time game, such as firing or jumping.
• sendHostState(state): the shared state, sent by the host in a host-run game.

Receiving, by defining functions on window: onRemoteTurn, onRemoteState, onRemoteAction, onHostState, onPlayerJoined, onPlayerLeft, onPlayerDisconnected, onPlayerReconnected and onNewHost.

// Define receive callbacks at the top level of the script, not inside a
// function that runs later, or messages that arrive early are lost.
window.onRemoteTurn = function (turn) {
  applyMove(turn.column);      // the fields the other player sent
  myTurn = true;
  draw();
};

window.onPlayerLeft = function () {
  showMessage('Your opponent left the game');
};

window.onNewHost = function () {
  // The host left and a new one was picked. If this game is now the host,
  // it takes over sending the shared state.
};

function dropPiece(column) {
  if (!myTurn) return;
  applyMove(column);
  myTurn = false;
  draw();
  window.mp.sendTurn({ column: column });   // you never receive your own message
}

A few rules keep this working:

• window.mp is ready once your scripts have run, so send from game events, not from the first lines of the script.
• The sender never receives its own message back. Apply your move locally, then send it.
• Keep each state object well under 1 MB.
• In multiplayer, "Play Again" reloads the game so every player starts fresh together.

Related

• How to make a video game
• Game design basics
• How to describe a game so the AI builds it
• How to make a 3D browser game
• Sound effects and music
• Making games work on phones
• Publishing and sharing your game
• Using Go Bananas from ChatGPT or Claude
• All file formats