Tic Tac Toe, Reconsidered
3×3 to 5×5 boards, an unbeatable minimax opponent on the classic grid, dark mode, and motion polish — the game everyone's built once, done properly.
Play It
You're X. The AI is unbeatable on 3×3 (true minimax) — 4×4 and 5×5 use a faster heuristic AI since full minimax isn't computable in real time at that size.
Case File
Three angles on the same build — click through.
Tic Tac Toe is the canonical first project — which is exactly why it's worth doing properly. Most versions stop at a single 3×3 board with a coin-flip AI. The interesting part isn't the game, it's the algorithm underneath it.
The goal was to actually implement game-tree search correctly (minimax, not "AI" that's just weighted randomness), and then find where that approach breaks down — because it does, once the board grows.
- Minimax on 3×3 — full recursive game-tree search exploring every possible outcome from the current state, scoring terminal states, and picking the move that minimizes the opponent's best-case outcome. This is what makes the 3×3 AI genuinely unbeatable, not just "hard."
- Why Minimax Doesn't Scale — a 3×3 board has at most 9 moves, so the full game tree is small enough to search exhaustively. A 5×5 board's game tree is astronomically larger — full minimax would freeze the browser. That's a real algorithmic constraint, not a shortcut.
- Heuristic AI for 4×4 / 5×5 — instead of full search, the larger boards use a rule-based approach: block an immediate opponent win, take a winning move if available, otherwise favor central and high-connectivity cells. Beatable, but not dumb.
- Multi-Size Board Engine — the win-checking and rendering logic had to be written generically for any N×N size, not hardcoded to 3×3 — the harder part of "just add board size options."
A genuinely unbeatable 3×3 opponent (not just a good one), plus a generic board engine that scales to 4×4 and 5×5 with a different, deliberately-scoped AI strategy for each.
The real lesson was recognizing where an exact algorithm stops being practical and knowing what to substitute instead — the same trade-off that shows up constantly in real systems, just visible here on a board you can actually see and click.
Stack
Click any tag to see how it's actually used in this project.
Click any technology above to see exactly how it's used in this build.