Online Snakes & Ladders: Real-Time Multiplayer for up to 8 Players

Overview

Snakes and Ladders is an online multiplayer game that I built to play with friends. No install and no sign-up: you write your name, make a room, send the four-letter code or the invite link, and everyone plays on the same board; from a phone or a computer, up to 8 players at the same time. Every move shows for everybody instantly. The game runs at marpele.alipour.me and you can try it right now.

Game features

• Rooms with a code: make a room with a four-letter code, copy the invite link and share it. In the waiting room you see all the players, and the host starts the game.

• A random board: the board has 144 cells and in every round the snakes and ladders are laid out again at random, with rules that keep the board fair and playable (no chained snakes or ladders, none too close to each other, and all of them short).

• Rules: to win you must land exactly on the last cell, and rolling a 6 gives you an extra turn.

• Animation: the dice, the token moving from cell to cell, climbing a ladder and sliding down a snake, and a celebration for the winner, with sound that can be muted.

• Chat and emoji: an in-game chat with quick emoji, and a game log that writes down every move.

• Watchers: if the game has started, you join a room by its code as a watcher. Up to 60 watchers are allowed and they can chat too.

• Disconnects: if a player's internet drops, he or she has one minute to come back and return to the same place in the game; after that the dice are rolled for him or her so that the game does not stop. The host can remove a disconnected player.

• Play again: at the end, the host starts a new round with the same group.

• On one device: up to 8 players can play on one phone or computer, and if you are alone the computer joins the game as an opponent.

• Installable: it installs like an app on the phone's home screen, and its shell opens offline.

The diagram below shows how the parts talk to each other.

Interface design

The game screen is dark and Persian (right to left), with a board on which the snakes and ladders are drawn. The layout is designed separately for desktop and mobile: on a computer the board is in the middle with the list of players and the log beside it, and on a phone the board takes the full width and the chat and the log open from the bottom. Each player has a fixed colour so the tokens are easy to tell apart.

How it works (technical)

• The server decides. The server rolls the dice and runs the rules of the game, so nobody can cheat. The code of the rules is a single module that both the server and the page use, so it works the same everywhere.

• Every room is a separate unit. Every room is an independent instance on Cloudflare Durable Objects that keeps the state of the game and tells all the players over WebSocket. The state is stored, so even a restart of the server does not lose the game.

• The edge of the network. The game runs on Cloudflare Workers, so it is close to the user and needs no separate server to maintain.

• Safety. Names and messages are sanitized, chat is rate-limited, connections are accepted only from the site itself, and rooms have limits on size.

• No dependencies. The page is written with plain JavaScript and Canvas, and the Persian font comes with the game.

Tools

• JavaScript, HTML Canvas, CSS

• Cloudflare Workers and Durable Objects, WebSocket

• PWA (Service Worker and Web App Manifest)

Result

A complete and smooth game that starts with one link, works between several people at the same time, and feels just as good on mobile and on a computer.