Workshop › Tic-tac-toe › Step 28 of 33

Rule two: win when you can

What we are doing

Before anything else, the computer should win if it can. It tries O in every free cell on a copy of the board and asks winningLine whether that completes a line.

```js
// A free cell that would complete a line for `mark`, if there is one.
const completes = (mark) =>
  free.find((index) => {
    const copy = [...cells]
    copy[index] = mark
    return winningLine(copy)
  })
const random = free[Math.floor(Math.random() * free.length)]
return completes('O') ?? (cells[4] === '' ? 4 : random)
```

What it means

• completes(mark) returns the first free cell that would complete a line for mark, or undefined.
• [...cells] makes a copy, so the real board is untouched.
• a ?? b means "use a, unless it is null or undefined, then use b". So: win if possible, otherwise the old rule.

Your turn

In computerMove, above the random line, write the comment and completes. Then change the return line as shown.

Skills: Functions, Arrays and objects

← Rule one: take the center Rule three: block the opponent →

All steps

1. Get the canvas and the pen
2. Paint the board
3. The first grid line
4. Repeat with a loop
5. Finish the grid
6. The board as a list
7. A function that draws
8. Write an X
9. From cell number to position
10. Draw what the board holds
11. A color for each mark
12. Make a move
13. No playing on a taken cell
14. Listen for clicks
15. Which cell was clicked?
16. Clicks on any screen size
17. The eight winning lines
18. Find three in a row
19. Win, draw or go on
20. The round ends
21. Show who won
22. Light up the winning line
23. A function for a fresh round
24. Click to play again
25. A computer that picks a cell
26. The computer answers
27. Rule one: take the center
28. Rule two: win when you can
29. Rule three: block the opponent
30. Score a finished game
31. Look ahead: minimax
32. A computer that never loses
33. Build it yourself: keep score