Workshop › Flappy-style Bird › Step 1 of 30

Flappy-style Bird: Get the canvas and the pen

Tap to flap between the pipes. Velocity, gravity, game states, spawning obstacles and a frame-rate-proof loop.

What we are doing

The game is drawn on a tall <canvas>, 400 pixels wide and 600 high, with the id game. We find it from JavaScript and ask it for its 2D context, the object that holds every drawing command.

```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
```

What it means

• document is the page; getElementById('game') finds the element whose id is game.
• const canvas = gives what was found a name, so later lines can use it.
• canvas.getContext('2d') asks the canvas for its 2D drawing tools; we call them ctx (short for context).

Your turn

Write the two lines under the three comment lines, then press Run.

Skills: Drawing on a canvas

Paint the sky →

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