Tic-Tac-Toe vs. AI

For the class activity “Play with AI,” Xinyue (Lily) Feng built a browser game against a computer opponent with 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 original getBestMove(), which the game still uses as its Medium opponent.

It plays sensibly and is fun to beat, and 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 grabs a winning move about half the time, so it still feels like it’s trying.
• Medium is her original rule-based AI, kept rule for rule; a test checks that it makes the same move as the untouched original in every reachable position.
• 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.

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. It makes the algorithm visible. 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.

The game was extended for this portfolio with AI coding tools. Her rule-based AI and the original files are kept in the repository; the additions are:

• Easy and Hard opponents, a choice of who moves first, and separate scores for each difficulty.
• The “Show AI thinking” overlay, a note explaining each AI move, and a short explainer for each strategy.
• A redesign that matches this site, with drawn-on X and O marks and an animated winning line.
• Full keyboard play and screen-reader labels for every square.
• Automated tests, including an exhaustive check that Hard never loses: they play all 16,752 possible games against it (6,112 with you moving first, 10,640 with the AI first).