RCWeb Flappy Birds App

The RCWeb Flappy Birds App (app/flappy) is a multiplayer arcade game built within the RCWeb ecosystem. It demonstrates the Asymmetric Pattern, where a single shared screen acts as the game engine and canvas, while multiple users use their mobile devices as remote controllers.

Icon

Screenshot

What it does

• Multiplayer Arcade Action: A classic pipe-dodging arcade game redesigned from the ground up to support dozens of players simultaneously on the exact same screen.
• Drop-in Drop-out Gameplay: Displays a QR Code on the main screen. Anyone who scans the code instantly drops into the game with their own uniquely colored bird and a one-button controller interface on their phone.
• Round-Based Elimination: The game continuously manages rounds. When a bird hits a pipe or the floor, it drops out. The last bird flying is awarded a win on the persistent leaderboard (roster). Once all birds crash, the game elegantly rewinds the camera back to the start line for the next round.
• Automated Demo Mode (AI): If the room lies dormant with no human input for 10 seconds, the game automatically drops into an AI-powered "Demo Mode" where three computer-controlled birds continuously navigate the obstacles to attract attention.

How it works

The game logic is encapsulated within script.js, utilizing an HTML5 <canvas> rendering loop synced via the comms.js server architecture.

• Game Engine & Rendering Loop: Relies on a standard requestAnimationFrame(loop) cycle that computes precise delta times (dt). update(dt) manages a scrolling backdrop (clouds, hills), computes procedural gap generation (makePipe), and applies rigid gravity and velocity (vy) vectors to every bird object.
• Asymmetric Peer Connection: The main viewer app listens for ensureBird(id) interactions originating from remote control apps (/flappy-control/?r=...). Each remote controller acts purely as an input trigger, while the local viewer app handles all collision detections, score calculations, and logic resolving.
• Dynamic Identification: As new players join, they are automatically slotted into the birdOrder array and assigned a highly distinct HSL color generated algorithmically (hue = birdOrder.length * 67 % 360).
• Web Audio Integration: Sounds are synthesized directly in the browser via native AudioContext oscillators (e.g., playFlapSound, playCoinSound, playLoseSound), completely eliminating the need to load external mp3 or wav files over the network.
• Demo Mode Scripting: When idle, updateDemoIdle initiates startDemoMode. A specialized updateDemoBird function intercepts the AI birds, calculating the Y-position of the next upcoming pipe and mathematically determining exactly when the AI should trigger a flap to gracefully clear the obstacle.

Launch RCWeb App