Workshop › Flappy-style Bird › Step 14 of 30

Draw the pipes

What we are doing

Each pipe object becomes two green rectangles: the top one from y = 0 down to gapY, the bottom one from gapY + GAP down to the ground. A for ... of loop draws every pipe in the array.

```js
ctx.fillStyle = 'green'
for (const pipe of pipes) {
  ctx.fillRect(pipe.x, 0, PIPE_WIDTH, pipe.gapY)
  ctx.fillRect(pipe.x, pipe.gapY + GAP, PIPE_WIDTH, canvas.height - pipe.gapY - GAP)
}
```

What it means

• for (const pipe of pipes) repeats its body once for each item, calling the current one pipe.
• The top rectangle is gapY tall; the bottom one starts at gapY + GAP and fills the rest of the height.
• The pipes are drawn after the sky and before the bird, so the bird flies in front of them.

Your turn

In draw, under the sky's fillRect, leave an empty line and write the pipe lines (before the gold bird lines).

Skills: Drawing on a canvas, Loops

← A pipe as data The world moves, not the bird →

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