Workshop › Snake › Step 4 of 28

Think in cells

What we are doing

Snake moves on a grid: the 400-pixel board is 20 cells of 20 pixels each way. We name the cell size CELL and draw one green cell: the snake's future head.

```js
const CELL = 20

ctx.fillStyle = 'lime'
ctx.fillRect(5 * CELL, 5 * CELL, CELL, CELL)
```

What it means

• const CELL = 20 names the cell size once, so we never repeat the number 20.
• 5 * CELL is 100: column 5 starts 100 pixels from the left, row 5 starts 100 pixels from the top.
• The last two CELLs make the square exactly one cell wide and tall.
• It comes after the background, so it is painted on top of it.

Your turn

1. Under const ctx = ... leave an empty line and write const CELL = 20.
2. At the very end, leave an empty line and write the two lime lines. Press Run.

Skills: Drawing on a canvas

← Paint the board Keep the position in a variable →

All steps

1. Find the canvas
2. Get the pen
3. Paint the board
4. Think in cells
5. Keep the position in a variable
6. A function that draws
7. A function that moves
8. The game loop
9. Slow it down
10. A direction to move in
11. Steer with the arrow keys
12. A body made of a list
13. Move the whole body
14. Pick a spot for the food
15. Draw the food
16. Eat and grow
17. Never put food on the snake
18. A table of turns
19. No U-turns
20. Crash into the walls
21. Crash into yourself
22. The game over message
23. Show the score
24. One function that starts a game
25. Play again with Space
26. Remember the best score
27. Speed up as you grow
28. Build it yourself: through the walls