Flap Flap

• 

• 

Inspiration

Rage Flap started from one very serious scientific question:

$$ \text{What if Flappy Bird, but dignity = 0?} $$

We wanted to build a game that felt instantly understandable, funny to watch, and painfully chaotic to play. Instead of pressing a key to flap, the player has to blow, shout, or make noise into the microphone to keep the bird alive. The result is part arcade game, part lung test, part public embarrassment simulator.

What it does

Rage Flap is a voice-controlled Flappy Bird-style browser game.

The core rule is:

$$ \text{loud enough} \Rightarrow \text{bird goes up} $$

$$ \text{silence} \Rightarrow \text{bird falls} $$

The game first measures the room's background noise, then sets a dynamic scream/blow threshold:

$$ T = \max(B + 0.015,\ 0.01) $$

where:

• $B$ is the measured ambient noise baseline
• $T$ is the volume threshold required to flap

During gameplay, the microphone volume is converted into movement. If the player makes enough noise, the bird rises. If not, gravity wins. The player dodges pipes, earns points, and eventually discovers that breathing is not as easy as it sounds.

How we built it

We built Rage Flap as a React + Vite web game using the Canvas 2D API and the Web Audio API.

The microphone input is analyzed using RMS loudness:

$$ \text{volume} = \sqrt{ \frac{1}{N} \sum_{i=1}^{N} x_i^2 } $$

This gives us a real-time estimate of how loud the player is being.

The bird movement is intentionally simple and arcade-like:

$$ y_{t+1} = y_t + G $$

and when the player is loud enough:

$$ y_{t+1} = y_{t+1} - F $$

where:

• $G$ is the falling force
• $F$ is the flap/rise force

Pipes spawn at intervals, move left across the screen, and use circle-vs-rectangle collision detection against the bird. The whole game loop runs inside requestAnimationFrame, keeping the gameplay fast and responsive.

Challenges we ran into

The hardest part was making microphone input feel playable.

Microphones are messy. Different rooms, laptops, browsers, and background noise levels produce wildly different values. A fixed threshold would make the game too easy in one room and impossible in another.

So we added calibration:

$$ \text{calibration} = \text{listen quietly for 1 second} $$

Then the game adapts the threshold to the current environment.

Another challenge was making the game still work when mic permission is denied. For that, we added a fallback mode where holding Space or clicking acts as the flap input. That way, the game remains playable even if the browser blocks microphone access.

Accomplishments that we're proud of

We are proud that the ridiculous idea actually works.

The game has:

• real microphone-based controls
• automatic room-noise calibration
• canvas-rendered gameplay
• pipe spawning and scoring
• collision detection
• fallback keyboard/click controls
• a clean restart loop
• a very silly emotional tone

Most importantly, it creates the exact moment we wanted:

$$ \text{player} + \text{browser} + \text{panic} = \text{comedy} $$

What we learned

We learned that silly ideas still need real engineering.

Rage Flap taught us about:

• Web Audio microphone streams
• RMS volume detection
• dynamic input thresholds
• canvas game loops
• collision math
• browser permission handling
• making a game feel responsive with very little code

We also learned that if you make people blow into a laptop to control a bird, they will absolutely do it.

What's next for Rage Flap

Next, we would love to add:

• a live volume meter
• difficulty scaling over time
• power-ups based on different sound patterns
• mobile polish
• local high scores
• more dramatic bird rage animations
• multiplayer chaos mode

The final dream is simple:

$$ \lim_{\text{noise} \to \infty} \text{fun} = \infty $$

Rage Flap is dumb, loud, and weirdly addictive, which makes it exactly the kind of game we wanted to build.

Built With

• css
• eslint
• github
• html5
• javascript
• react
• vercel
• vite
• web-audio-api