Project
Roulette

Connect Four with AI

Drop a disc against an opponent that actually thinks ahead.

IntermediateWeb appGame10–20hAI-buildable 4/5no setup

Connect Four with a minimax opponent and alpha-beta pruning. The game is trivial; the AI is the project. Watching search depth translate directly into how hard it is to beat makes the algorithm concrete in a way reading about it doesn't.

UI
Logic
Useful

Hosting · Free forever

Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.

Deploy it and share a link.

Core features · 7

  • Discs drop with animation and settle correctly
  • Win detection across all four directions
  • An AI opponent using minimax with alpha-beta pruning
  • Search depth is selectable as a difficulty setting
  • The AI move doesn't freeze the UI while it thinks
  • Draw detection when the board fills
  • The winning line is highlighted

The interesting part

  • A position evaluation function that produces sensible play
  • Keeping the UI responsive during search, which means yielding or a worker
  • Alpha-beta ordering to make deeper search feasible

Once it works

  • Add a board evaluation heatmap showing what the AI is considering
  • Add iterative deepening with a time budget
  • Add a two-player local mode

Suggested stack

reacttypescripttailwindframer-motion

Track it