Connect Four
A two-player board game in the browser with gravity, column selection, and win detection across rows, columns, and both diagonal directions.
Context & goals
Connect Four is a strong algorithmic exercise: the UI is simple, but the rules require a disciplined grid representation and efficient win checks as pieces stack. I wanted a demo that feels fair — illegal moves are impossible, wins are highlighted clearly, and a draw state is handled when the board fills.
Model & win detection
The board is stored as a 2D structure mapping logical rows and columns to either empty cells or player tokens. Each drop resolves to the lowest free row in the chosen column; that mirrors physical gravity and keeps validation centralized. After every successful placement, the engine scans outward from the last move to detect four in a line horizontally, vertically, or diagonally, stopping early when a win is found.
Keeping win detection localized to the last piece avoids scanning the entire board every turn and keeps performance predictable even if the grid size were parameterized later.
What I shipped
- Interactive grid with click/tap column selection and animated piece placement
- Turn indicators, disabled columns when full, and reset / new match controls
- Authoritative win and draw detection with clear end-state messaging
- Responsive board container that preserves readable cell size on phones
- Static hosting on GitHub Pages with no install step for reviewers
Tech & constraints
HTML, CSS, and JavaScript with DOM rendering. State lives in plain data structures rather than framework stores, which makes the flow easy to trace in code review.
Results & lessons
The final game is stable under fast clicking: input is ignored after a terminal state, and column clicks are ignored when full. The biggest takeaway was to write the win checker as pure functions first, then wire the UI — that order caught edge cases around diagonal boundaries before they became visual bugs.
An obvious extension is an AI opponent using minimax or heuristic column scoring; the current architecture separates rules from rendering so that can slot in behind the same event bus.