Tic-Tac-Toe vs. AI

Xinyue (Lily) Feng’s opponent plays by five rules, checked in order: win if it can, block you if you’re about to win, take the center, take a free corner, otherwise take a side.

// 3. Take center
if (board[4] === "") {
  return 4;
}

// 4. Take a corner
const corners = [0, 2, 6, 8];
const availableCorners = corners.filter(index => board[index] === "");

From her getBestMove(), the Medium opponent.

It plays sensibly, but it can be beaten. Take a corner; when it takes the center, take the opposite corner. Its next move is always a corner, which threatens a line; block it, and your block creates a fork: two lines that each need one more X. It can only block one of them.

• Easy mostly picks a random free square, but pounces on a win about half the time.
• Medium plays by her five rules.
• Hard uses minimax. On each turn it searches ahead to the end of the game, assumes you will always make your best move, and picks the move with the best guaranteed result, preferring faster wins. Alpha-beta pruning skips branches that can’t change the answer, so each search takes a few milliseconds. The best you can do against it is a draw: in all 16,752 possible games, it never loses.

With “Show AI thinking” switched on, every empty square shows the minimax verdict for it, from the computer’s side: a forced win, a draw, or a square that would let you win. You can watch a move go from “draw” to “loss” for the AI the moment you set up a fork, and see why Medium’s corner move is a mistake.

After each AI move, a short note says which of Lily’s rules it just followed, or how minimax chose, and points out when the move was a mistake.