Workshop › Snake › Step 12 of 28

A body made of a list

What we are doing

A snake is more than a head: it is a list of cells. We keep them in an array and draw every one with a loop.

```js
let snake = [
  { x: 5, y: 5 },
  { x: 4, y: 5 },
  { x: 3, y: 5 },
]

  ctx.fillStyle = 'lime'
  for (const part of snake) {
    ctx.fillRect(part.x * CELL, part.y * CELL, CELL, CELL)
  }
```

What it means

• [ ... ] is an array: a list in order. The first item (index 0) is the head.
• for (const part of snake) repeats its body once for each item, calling the current one part.

Your turn

1. Under let head = ... write the snake array.
2. In draw, replace the lime fillRect line with the for loop.

Skills: Arrays and objects

← Steer with the arrow keys Move the whole body →

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