Case study
Connect Four
A clean implementation of the classic Connect Four board game built entirely with vanilla HTML, CSS, and JavaScript — no frameworks or dependencies. Players take turns dropping coloured discs into a 6×7 grid, with automatic win detection across all four directions (horizontal, vertical, and both diagonals). Winning discs are highlighted on victory, a draw is detected when the board fills, and a reset button restarts the game. Fully keyboard accessible with ARIA labels throughout.
The brief
Challenge
Build a fully functional Connect Four game with no libraries — clean game-state management, multi-directional win detection, and accessible controls in plain JavaScript.
Approach
What we made
Represented the board as a 2D array with values 0 (empty), 1, and 2 for each player. After every move, a single check function scans all four directions from the last-placed disc. Keyboard events map to column drops, and ARIA live regions announce the active player.
- Two-player local multiplayer with turn indicator.
- Win detection across all four directions with disc highlighting.
- Draw detection when the board is full.
- Full keyboard support and ARIA labels for accessibility.
- Bump animation feedback on full-column drops.
Outcome
Results
A lightweight, dependency-free Connect Four game playable in any browser, with solid game logic and accessible controls.
Gallery
Visual snapshots
Click any image to expand.