Workshop › Connect Four › Step 24 of 38

We have a winner

What we are doing

When a disc lands, land asks wins4. If there is a line of four, that player is the winner and the line is kept; otherwise the turn passes. Once there is a winner, play does nothing.

```js
let winner // 0 while playing, 1 or 2, or 'draw'
let line // the four winning cells

  winner = 0
  line = []

function play(col) {
  if (winner || falling || dropRow(col) === -1) return

  falling = null
  const four = wins4(row, col)
  if (four) {
    winner = who
    line = four
  } else {
    turn = 3 - turn
  }
```

What it means

• winner is 0 while playing. 0 counts as false, so if (winner ...) in play means "the game is over".
• if ... else: a win sets winner and line, otherwise the turn passes.

Your turn

1. Under let turn write let winner and let line; in reset, under turn = 1, write winner = 0 and line = [].
2. In play, add winner || at the start of the check.
3. In land, replace turn = 3 - turn with the if ... else.

Skills: Game states

← Four in a row? Circle the four →

All steps

1. A dark background
2. A drawing function
3. The blue board
4. One hole
5. A whole row
6. All 42 holes
7. The board in memory
8. Discs in their colors
9. Draw every frame
10. Where does the disc land?
11. Play a column
12. Taking turns
13. Click to play
14. The next disc
15. Whose turn?
16. Playing with the keyboard
17. Keys 1 to 7
18. A disc on its way
19. Gravity
20. Watch it fall
21. Inside the board?
22. Walking along a line
23. Four in a row?
24. We have a winner
25. Circle the four
26. Who won?
27. A draw
28. Play again
29. Try a move and take it back
30. Win, or block
31. Don't help the player
32. Prefer the middle
33. The computer's turn
34. Only on your turn
35. You and the computer
36. Counting wins
37. Show the score
38. Build it yourself: the loser starts