Othello against alpha-beta search, with its pruned tree unfurling beside the board.
The engine searches the game tree with negamax and alpha-beta pruning: once a reply refutes a move, the remaining replies cannot change the answer and are skipped. Iterative deepening searches depth 1, then 2, and so on, and each pass orders moves for the next using the previous pass's scores, a transposition table of best replies, and a one-step look at how few moves each option leaves the opponent, which is what makes the cutoffs happen early. Positions are scored by square weights that prize corners, mobility, and the disc count near the end. Beside the board, the current iteration's top three plies unfurl as a tree with the principal variation in gold and the snipped branches as grey stubs, while a log-scale chart compares the nodes actually searched with the full minimax tree, typically more than 95 percent pruned. The heatmap shows each candidate move's score, with a less-than sign where alpha-beta only proved an upper bound.
Try it. Click a square (or Play Black or Play White) to take over; on your turn the heatmap is the engine's hint, and H or Space plays it. Choose a depth from 2 to 7 and switch move ordering off to watch the work explode. W watches the AIs again, N starts a new game.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an Othello game where I play against an alpha-beta search engine, with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Draw a green 8x8 board with the four starting discs. Let me click to place a black disc; a move is legal if it flanks one or more white discs in any of the 8 directions, and those discs flip. If a player has no legal move they pass; when neither can move, the game ends.
- Write an evaluation function: a table of square weights (corners very good, the squares diagonally next to them very bad, edges good), plus a bonus for having more legal moves than the opponent.
- Write negamax with alpha-beta pruning to a fixed depth of 4 and let the computer play white. Make and unmake moves on one board instead of copying it.
- Count the nodes searched and show the number next to the board.
Once that works, make it beautiful:
- Add iterative deepening (depth 1, 2, 3...) and order moves using the previous iteration's scores, best moves first. Compare node counts with ordering on and off.
- Turn the search into a generator function that yields every few hundred nodes, and run a slice of it per animation frame so the page stays smooth at depth 6.
- Shade each legal square by its score while the engine thinks, and draw the top two or three plies of the search tree beside the board, with cut-off branches greyed out.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as a transposition table with Zobrist hashing, flip animations for the discs, or a chart comparing searched nodes with the full minimax tree.
