Workshop › Snake › Step 8 of 28

The game loop

What we are doing

A game loop runs again and again: update, draw, and ask the browser to run it again before the next screen refresh (requestAnimationFrame, about 60 times a second).

```js
function loop() {
  update()
  draw()
  requestAnimationFrame(loop)
}

requestAnimationFrame(loop)
```

What it means

• loop runs one turn: move, then draw.
• requestAnimationFrame(loop) inside it books the next turn, so it keeps going.
• The last line starts the loop. It replaces the old single draw() call.

Your turn

Replace the draw() call at the bottom with the loop function and requestAnimationFrame(loop).

Skills: The game loop

← A function that moves Slow it down →

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