Workshop › Flappy-style Bird › Step 17 of 30

A pipe every 90 frames

What we are doing

We count the frames of play in frame. Every 90 frames (one and a half seconds) a new pipe is added. The remainder operator % tells when: frame % 90 === 0 is true on frames 90, 180, 270...

```js
const PIPE_EVERY = 90 // frames between new pipes

let frame = 0

  frame += 1
  if (frame % PIPE_EVERY === 0) addPipe()
```

What it means

• frame counts the frames of play; update adds 1 each time.
• % is the remainder: frame % PIPE_EVERY is 0 only when frame is a multiple of 90.
• On those frames addPipe() puts a new pipe at the right edge, and the loop below slides it left.

Your turn

1. Under PIPE_SPEED, write PIPE_EVERY.
2. Under let pipes = [], write let frame = 0.
3. In update, above the pipe loop, write the two frame lines.

Skills: The game loop

← A new pipe at a random height Remove the pipes you passed →

All steps

1. Get the canvas and the pen
2. Paint the sky
3. Draw the bird
4. A function that draws
5. A function that moves
6. The game loop
7. Gravity
8. A flap
9. Space, Up arrow or a tap
10. Wait for the first flap
11. The ground and the sky
12. Tell the player
13. A pipe as data
14. Draw the pipes
15. The world moves, not the bird
16. A new pipe at a random height
17. A pipe every 90 frames
18. Remove the pipes you passed
19. Is the bird level with a pipe?
20. Through the opening
21. Score each pipe once
22. Show the score
23. A function for a fresh start
24. Try again
25. One place where the game ends
26. Remember the best score
27. Show the best score
28. The same speed on every screen
29. No catching up after a pause
30. Build it yourself: a medal