Squares

A browser-based multiplayer implementation of the classic Dots and Boxes pencil-and-paper game, styled to look like it's being played on a lined notebook resting on a wooden desk.

How to Play

Squares is a turn-based game for 2–6 players.

• Players take turns claiming the walls (lines) between dots on a grid.
• When a player places the fourth and final wall around a square, they claim it — and get another turn.
• The game ends when all squares are claimed.
• The player with the most squares wins.

Getting Started

Open index.html in a browser — no build step or server required.

1. Choose the number of players (2–6) and grid size.
2. Press Start Game.
3. For each player in sequence, enter your initials (up to 2 characters) and pick a colour. Colours already chosen by other players are disabled.
4. Play begins. Tap or click a wall gap to claim it.

Controls

Action	Input
Claim a wall	Click / tap between two dots
Pan the board	Click-drag / one-finger swipe
Zoom in/out	Scroll wheel
Pause	Pause button (bottom-right) or P
Start game	Enter

Features

• Hand-drawn aesthetic — board, walls, and UI all use a lined-paper / felt-tip style rendered with p5.js and p5.Scribble.
• Responsive — works on desktop and mobile browsers.
• Per-player customisation — each player chooses a bold colour and initials that appear inside their claimed squares.
• Progress bar — a colour-coded strip on the right edge tracks ownership in real time.
• Pan & zoom — the board can be panned and zoomed, with the view clamped so the paper never scrolls off screen.
• Smart turn logic — claiming the final wall of a square grants an extra turn automatically.

Tech Stack

Library	Purpose
p5.js	Canvas rendering and input handling
p5.Scribble	Hand-drawn line style
Caveat / Nova Square	Handwritten UI fonts

No build tools, no frameworks, no dependencies beyond the above libraries (bundled locally).

File Structure

squares/
├── index.html       # Entry point and UI markup
├── sketch.js        # All game logic and p5.js rendering
├── style.css        # UI styling
├── p5.min.js        # p5.js library
├── p5.scribble.js   # p5.Scribble library
└── addons/
    └── p5.sound.*   # p5 sound addon (unused)