Workshop › Flappy-style Bird › Step 16 of 30

A new pipe at a random height

What we are doing

The test pipe goes away; the list starts empty. addPipe pushes a new pipe at the right edge, with its opening at a random height that never touches the top or the bottom.

```js
let pipes = []

function addPipe() {
  const gapY = 60 + Math.random() * (canvas.height - GAP - 120)
  pipes.push({ x: canvas.width, gapY })
}
```

What it means

• [] is an empty array; pipes.push(...) adds an item to its end.
• Math.random() is a random number from 0 up to 1. Times 320 (600 - 160 - 120) it is 0 to 320; plus 60 it is 60 to 380, so the opening always keeps a 60 pixel margin from the edges.
• { x: canvas.width, gapY } is short for { x: canvas.width, gapY: gapY }.

Your turn

1. Change pipes to start as an empty array [].
2. Under the pointerdown line, leave an empty line and write addPipe. Press Run.

Skills: Arrays and objects

← The world moves, not the bird A pipe every 90 frames →

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