Every project / Games
🐤 Flappy Square
Tap to flap through the pipes. Gravity is not your friend.
- Language
- HTML, CSS & JavaScript
- Level
- Beginner
- Category
- Games
What you'll learn
- Gravity & velocity
- Spawning objects
- Collision boxes
- Click & key input
- High scores
How it works
- Every frame, gravity adds to the bird's falling speed. A flap sets the speed to a negative number, which means up.
- A new pipe appears every 95 frames at a random height and slides left. Pipes that leave the screen are removed.
- Each frame checks the bird's box against every pipe and the ground. Touching one ends the run.
- Getting past a pipe scores a point. Your best score is saved with localStorage.
Knobs to turn
These settings are near the top of the code. Remix it, change one, and watch what happens. The preview updates as you type.
| Setting | Starts at | File | What it does |
|---|---|---|---|
GRAVITY | 0.45 | game.js | how fast you fall |
FLAP | -7.5 | game.js | how hard a flap pushes you up |
PIPE_SPEED | 2.4 | game.js | how fast pipes slide left |
PIPE_GAP | 150 | game.js | space to fly through |
PIPE_EVERY | 95 | game.js | frames between new pipes |
GROUND | 40 | game.js | height of the ground |
Files
| File | Lines | |
|---|---|---|
index.html | 13 | the page: what shows up |
game.js | 150 | what it does |
style.css | 16 | how it looks |
Challenges
Each one is a bit harder than the last. Teachers: these make good assignment instructions.
- Change GRAVITY and FLAP and see how the game feels.
- Make the gaps between pipes get smaller as your score goes up.
- Draw the bird as a circle with an eye instead of a square.
- Add coins between some pipes that give bonus points.
- Add a day/night cycle: fade the sky color every 10 points.