Tic-Tac-Toe vs Computer — Free HTML CSS JS Snippet

Tic-Tac-Toe is small enough to reason about completely, which makes it an ideal vehicle for teaching a genuinely useful pattern: a rule-based heuristic AI that plays competently without the complexity of a full minimax search. This snippet implements a real, playable game where the human is X and the computer is O, with a four-tier decision heuristic, accurate win/draw detection across all eight lines, and a running scoreboard that persists across rounds within the session.

Representing the board and detecting wins

The board state is a flat array of nine values, cellState, where each entry is 'X', 'O', or null. All eight possible winning lines — three rows, three columns, and two diagonals — are hardcoded as index triplets in the WIN_LINES array, e.g. [0,4,8] for the main diagonal. checkWinner() iterates every line and checks whether all three cells share the same non-null value; if so it returns the winning mark and the specific line indices so the UI can highlight exactly those three cells. If no line matches and every cell is filled, the function returns a draw result instead. This flat-array-plus-index-triplet approach avoids any 2D coordinate math entirely — the nine cells and eight lines are small enough that hardcoding is clearer than deriving them algorithmically.

The four-tier heuristic AI: win, block, center, corners, edges

Rather than implementing minimax or another exhaustive search, the computer opponent in computerMove() follows a well-known Tic-Tac-Toe heuristic that plays correctly (or draws) against any human opponent in the vast majority of real games, and is far easier to read and extend than a recursive search. The priority order is: (1) win now — findWinningMove('O') scans every line for one where the computer already has two marks and the third cell is empty, and takes it immediately; (2) block the human — if no winning move exists, the same function is called with 'X' instead of 'O' to find and occupy the cell that would let the human complete a line next turn; (3) take the center — cell index 4 is part of four different winning lines (one row, one column, both diagonals), making it statistically the most valuable opening cell; (4) take a corner — corners (indices 0, 2, 6, 8) are each part of three lines and are chosen randomly among the available ones; (5) take an edge — edges (1, 3, 5, 7) are each part of only two lines and are the last resort. This ordering is what makes the opponent feel "smart" without ever running a deep search: it always secures an immediate win or blocks an immediate loss, and otherwise falls back to positionally sound cells.

findWinningMove() as a shared building block

The same function powers both the "can I win" and "must I block" checks — the only difference is which mark is passed in. For each of the eight lines, it counts how many cells already hold the target mark and how many are still empty. A line with exactly two marks of the target and exactly one empty cell is a move that completes (or would complete) that line; the function returns that empty cell's index immediately. Reusing one function for both offense and defense keeps the AI logic compact and makes the priority order in computerMove() read almost like plain English: try to win, else try to block, else fall through the positional preferences.

Turn sequencing and the scoreboard

humanMove() places an X, checks for a winner, and — if the game continues — disables the board, updates the turn indicator to "Computer's turn...", and schedules computerMove() after a 450ms setTimeout so the computer's response feels like a deliberate move rather than an instant snap. Win detection happens through the same endTurnCheck() path after both human and computer moves, keeping the win/draw logic in exactly one place. The scores object ({ X, O, D }) accumulates across rounds and is rendered to the scoreboard on every completed game; calling newGame() resets the board and turn state but deliberately leaves scores untouched, so the tally persists across as many rounds as the player wants within the session, similar to the running win/loss tracking used in the Word Guess Game.