Workshop › Connect Four › Step 3 of 38

The blue board

What we are doing

The board has 7 columns and 6 rows of 64-pixel cells, and starts 96 pixels from the top, leaving room above it. We give these numbers names and paint the blue board.

```js
const COLS = 7
const ROWS = 6
const CELL = 64
const TOP = 96 // room above the board for the messages and the next disc

  ctx.fillStyle = '#1d4ed8'
  ctx.fillRect(0, TOP, COLS * CELL, ROWS * CELL)
```

What it means

• COLS and ROWS are the size of the board, CELL the size of one cell and TOP the room above the board.
• The blue rectangle starts at (0, TOP) and is COLS * CELL = 448 wide and ROWS * CELL = 384 high.

Your turn

1. Under the ctx line, after an empty line, write the four constants.
2. In draw, under the background, leave an empty line and write the two blue lines.

Skills: Drawing on a canvas

← A drawing function One hole →

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