DEV Community

Haris
Haris

Posted on • Originally published at blog.harislab.tech on

How I Fit Flappy Bird into a Single QR Code

Flappy Bird Canvas
Discover how Flappy Bird fits inside a single QR code using a Python tool, data URI, and minimalist HTML/JS design — scan to play instantly.

It started with a quiet thought, one that refused to leave my head:

What is the absolute smallest place a real game can live?

Not a download. Not a website link. The game itself.

I picked Flappy Bird. Why? Because it doesn’t lie. If gravity feels off, you notice. If collision fails, the illusion breaks. If timing is off, it’s unplayable.

If this game survived compression, it meant the idea worked.

Step One: Breaking Comfort

QR codes hate comfort.

  • They hate images.

  • They hate libraries.

  • They hate anything that isn’t essential.

  • So I stopped thinking like a web developer and started thinking like a machine.

  • No sprites

  • No fonts

  • No frameworks

The bird became a shape. The pipes became rectangles. The sky became a color fill. Everything was drawn inside a single

element.

Here’s a glimpse of the code skeleton:

<canvas id="c" width="320" height="480"></canvas>
<script>
b = { y: 220, v: 0 }; // Bird
p = [];                // Pipes

function loop() {
  // gravity
  // pipes
  // collision
}

loop();
</script>
Enter fullscreen mode Exit fullscreen mode

Notice something? That’s all I’m showing. Enough to hint at the game — but not enough to give it away.

Step Two:

I could tell you how I handled gravity, pipes, collisions, scoring… but then the secret would be gone.

This experiment is about precision, compression, and ingenuity. Every character mattered. Every symbol had a cost.

This tool is not limited to games. It can package any kind of HTML, CSS, or JavaScript — from demos and experiments to landing pages, interactive tools, or visual ideas — directly into a single QR code.

The game fits entirely inside a single QR code. No downloads. No fetching. Just scan. Tap. Play.

If you’re curious how I made it happen, and want to see the full story, complete with the Python tool and the actual game code, you can read it here:

➡️ Read the full story

Top comments (2)

Collapse
 
prodev26 profile image
Haris

Where i get the source code?

Some comments may only be visible to logged-in visitors. Sign in to view all comments.