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

Win, draw or go on

What we are doing

outcome(cells) sums up a board in one word: 'X' or 'O' if someone has three in a row, 'draw' if the board is full, and null while the game goes on.

```js
function outcome(cells) {
  const line = winningLine(cells)
  if (line) return cells[line[0]]
  if (cells.every((cell) => cell !== '')) return 'draw'
  return null
}
```

What it means

• If there is a winning line, the mark in its first cell is the winner.
• cells.every(test) is true when every cell passes: all filled means a draw.
• null means "nothing yet". Order matters: a win on the last move is checked before the draw.

Your turn

Under winningLine, leave an empty line and write outcome (still above function play). Press Run.

Skills: Functions, Arrays and objects

← Find three in a row The round ends →

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