๐ŸŽฎ My First Browser Game โ€ข Episode 1 of 6 โ€ข See All Episodes
๐ŸŽฎ Episode 1 โ€ข Beginner โ€ข No Experience Needed

Flap or Fall!
Flappy Bird Clone

Build the infamous one-button game right in your browser: an HTML canvas, gravity, pipe gaps and a score that makes your friends rage. No installs, a text editor and a browser is everything you need. See the finished game first, then build yours step by step.

๐ŸŽฎ Ages 10+ ๐ŸŽฎ ~1.5 Hours ๐ŸŽฎ JavaScript โœ“ Free
๐ŸŽฎ HTML canvas ๐ŸŽฎ requestAnimationFrame ๐ŸŽฎ Gravity ๐ŸŽฎ Pipe generation ๐ŸŽฎ Collision ๐ŸŽฎ Scoring
โญ
0 XP
Level 1
๐Ÿ”ฅ0
Your Progress 0 / 6 steps
๐ŸŒ
How to run: Open the HTML file in your browser - double-click it or drag it into Chrome. In this build-along you write the code, then watch it come alive in the canvas on the right.
๐ŸฆŠ
Lumo says: every step adds one feature to the same game. Type a little, click Apply to Canvas, and test it straight away. There is no wrong answer you canโ€™t undo.

Build Flappy Step by Step

Each step adds a feature. Write the code, watch it come alive in the canvas.

Step 1 / 6
Click or press Space to flap