Workshop › Snake › Step 9 of 28

Slow it down

What we are doing

The square is far too fast. We still draw every frame, but move only every 150 milliseconds.

```js
const SPEED = 150 // milliseconds between moves
let last = 0

function loop(time) {
  if (time - last >= SPEED) {
    last = time
    update()
  }
  draw()
  requestAnimationFrame(loop)
}
```

What it means

• SPEED is the wait between moves; last remembers when we last moved.
• loop(time) receives the current time in milliseconds from the browser.
• if (time - last >= SPEED) is true only when enough time passed; then we note the time and move.

Your turn

1. Under const CELL = 20 write the SPEED line; under let head = ... write let last = 0.
2. Change loop as shown: time in the parentheses and update() inside the if.

Skills: The game loop

← The game loop A direction to move in →

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