Workshop › Snake › Step 5 of 28

Keep the position in a variable

What we are doing

To move the square later, its position must be data that can change. An object head holds its column and row, and the drawing reads from it.

```js
let head = { x: 5, y: 5 }

ctx.fillRect(head.x * CELL, head.y * CELL, CELL, CELL)
```

What it means

• let makes a variable: a name whose value can change later (const cannot).
• { x: 5, y: 5 } is an object: two named values in one package. x is the column, y the row.
• head.x reads the x inside head. The square is now drawn wherever head says.

Your turn

1. Under const CELL = 20 write let head = { x: 5, y: 5 }.
2. In the last line, replace each 5 with head.x and head.y. Press Run.

Skills: Game states

← Think in cells A function that draws →

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