Workshop › Pong › Step 7 of 26

The game loop

What we are doing

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

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

requestAnimationFrame(loop)
```

What it means

• loop draws, then books the next turn with requestAnimationFrame(loop).
• The last line starts the loop. It replaces the single draw() call.
• loop has no parentheses there: we hand over the function, the browser calls it later.

Your turn

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

Skills: The game loop

← A function that draws Remember held keys →

All steps

1. Get the canvas and the pen
2. A black court
3. One dash of the net
4. The whole net
5. Two paddles
6. A function that draws
7. The game loop
8. Remember held keys
9. Move the paddles
10. Stay on the court
11. The ball
12. The ball moves
13. Bounce off the top and bottom
14. Does the ball touch a paddle?
15. The paddles hit back
16. Serve again
17. Keep the score
18. Show the score
19. First to five
20. Who won?
21. Play again
22. Aim with the paddle
23. Faster every hit
24. A computer opponent
25. One player or two
26. Build it yourself: a serve pause