Workshop › Connect Four › Step 30 of 38

Win, or block

What we are doing

computerMove() picks a column. The first two rules: if the computer can win with a move, play it; if the player could win next move, block that column. For now, otherwise it takes the first open column.

```js
function computerMove() {
  const open = [...Array(COLS).keys()].filter((col) => dropRow(col) !== -1)
  // 1. Win if we can. 2. Block the player's win.
  for (const who of [2, 1]) {
    const col = open.find((c) => winsWith(c, who))
    if (col !== undefined) return col
  }
  return open[0]
}
```

What it means

• [...Array(COLS).keys()] is [0, 1, 2, 3, 4, 5, 6]; filter keeps the columns that are not full.
• The loop tries the computer (2) first, then the player (1): find gives the first column where that player would win.
• find returns undefined when nothing matches; column 0 is a real answer, so we check !== undefined.

Your turn

Above function colAt( write computerMove, followed by an empty line.

Skills: Game states, Arrays and objects

← Try a move and take it back Don't help the player →

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