Workshop › Snake › Step 13 of 28

Move the whole body

What we are doing

The trick of Snake: to move, add a new head in front and remove the last cell. The body follows by itself.

```js
function update() {
  const head = { x: snake[0].x + dir.x, y: snake[0].y + dir.y }
  snake.unshift(head)
  snake.pop()
}
```

What it means

• snake[0] is the current head. The new head is one step from it in the direction dir.
• unshift puts the new head at the front of the array; pop removes the last item (the tail).

Your turn

1. Delete the line let head = { x: 5, y: 5 }.
2. Replace the two lines inside update with the three new ones.

Skills: Arrays and objects

← A body made of a list Pick a spot for the food →

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