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

The round ends

What we are doing

The rules exist, but the game ignores them: you can keep playing after a win. We keep the round's result in result, update it after every move, and refuse moves once it is set.

```js
let result = null // null while playing, then 'X', 'O' or 'draw'

function play(index) {
  if (result || board[index] !== '') return false
  board[index] = player
  player = player === 'X' ? 'O' : 'X'
  result = outcome(board)
  return true
}
```

What it means

• result starts as null: the round is still going.
• result || ... means "or": if the round is over, or the cell is taken, no move.
• After each move, result = outcome(board) records a win or a draw.

Your turn

1. Under let player = 'X', write the result line.
2. In play, add result || to the if, and write result = outcome(board) under the line that switches player.

Skills: Game states

← Win, draw or go on Show who won →

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