Skip to main content
lab.golamrabbani.org

Flappy Bird Clone

Browser flappy-bird clone with canvas, rAF physics, and tap or Space to flap through the pipes.

Written by Golam Rabbani, Founder & Lead Engineer

Score: 0Best: 0Phase: idle

Tap the canvas or press Space / Arrow Up to flap. Avoid the pipes.

Score 0.

How to use this flappy bird clone

  1. Tap the canvas or press Space, Arrow Up, or W to make the bird flap upward against gravity.
  2. Each subsequent flap resets vertical velocity, so timing matters more than rapid tapping.
  3. Steer the bird through the gap in each pair of green pipes; touching a pipe or the ground ends the game.
  4. Watch the score counter at the top of the canvas — one point per pair of pipes you clear.
  5. Press Reset after Game Over to return to the idle screen, then tap or Space to play again.

About this flappy bird clone

Flappy Bird Clone is a small browser remake of the famous side-scroller. A canvas-based game loop runs on requestAnimationFrame and uses the elapsed time between frames to integrate gravity and velocity, which keeps the physics consistent at 60 Hz, 120 Hz, and 240 Hz displays. Gravity adds about 1100 px/s² of downward velocity, a flap snaps vertical velocity to −360 px/s, pipes move left at 130 px/s, and a new pair spawns every 1.6 seconds with a randomised vertical gap of 130 px.

Collisions are checked every frame against the pipes and the ground. The bird is a circle of radius 12; a pipe is a vertical pair (top column above the gap, bottom column below) of width 50 px. If the circle's axis-aligned bounding box overlaps the pipe rect while the gap does not contain the full circle vertically, you lose. Each pipe pair is marked passed when its right edge slips behind the bird, which is when your score ticks up. A small clamp on delta-time prevents the bird from jumping forward in a single burst after a tab is restored from background.

Worked example: from the idle screen, press Space — the bird leaps to about 60 px above the centre and starts falling. By the time the first pipe pair arrives (~1.6 s later) you should have flapped once more to keep the bird in the gap. If the top pipe in the first pair is 180 px tall, the gap runs from y=180 to y=310; aim to drop into y≈245 as you slide past. Clear the first pair and the score goes to 1; clear five pairs and you have a session score of 5 with "Best: 5" pinned in the stats row. Crash into a pipe and the result panel reads "Game over. You scored 5. Personal best this session: 5."

FAQ

Why is the canvas only 320 px wide?
A small canvas keeps the per-frame fill rate low and the layout phone-friendly. The aspect ratio is fixed at 320×480 so the game looks the same on every screen.
Does the speed change as I score?
No — pipe speed, spawn interval, and gravity are constants in this clone. Difficulty comes from the random vertical placement of the gap, not from a creeping speed-up.
Why does the bird feel jumpy after tab-switching back?
The loop caps delta-time at 50 ms per frame, so a stalled tab cannot dump several seconds of gravity in a single frame. You may still see a small drop, but the game stays survivable.
Are scores saved between page loads?
No — the "Best" counter resets when you refresh because nothing is persisted. Within a session, Reset wipes the current score but keeps the best.
Can I play on mobile?
Yes. The canvas registers pointer events, so a tap is identical to pressing Space. The Flap button below the canvas does the same thing for keyboard-only users.
Is this a copy of the original Flappy Bird?
No — it is an original implementation written for this site. The artwork is plain shapes (no sprite assets), and the physics constants were tuned by hand rather than reverse-engineered.