Vibe Arcade Blog

Dev stories, game design, and the art of building with AI

How We Built Bubble Wrap Challenge With AI: When the Joke System Arrived Uninvited

The brief was simple: a bubble wrap popping game. The AI came back with a BPM tracker, three bubble sizes, and a hidden joke delivery system. We kept all of it.

· Vibe Arcade

game dev vibe coding audio engineering behind the scenes

Most of our games have a complicated design origin. Neon Snake started as a simple concept and came back with a mission system. Sushi Ninja started as a slice game and came back as a recipe assembly game. Bubble Wrap Challenge is different — the concept was always simple, and it stayed simple. What surprised us wasn't the game design. It was everything that arrived alongside it.

Want to play first, then read the build story?

▶ Play Bubble Wrap Now

The Brief

The prompt was exactly what it sounds like: a virtual bubble wrap popping game. You see a sheet of bubbles, you pop them, satisfying sounds play. That's it. No progression, no enemies, no unlocks. Just the tactile satisfaction of popping things in a browser.

It's a deceptively interesting design problem. "Simple" doesn't mean "without choices." Bubble wrap works in real life because of the combination of visual feedback (the bubble deforms and flattens), tactile feedback (resistance and then release), and audio feedback (the pop sound). In a browser game, you only have visual and audio. Making that feel genuinely satisfying rather than hollow was the real challenge.

The Audio Engineering Problem

The pop sound is the game. If the sound is wrong, no amount of visual polish fixes it. A flat, synthetic "click" doesn't feel like popping. The AI reached for the Web Audio API via Tone.js — a synthesis library that can generate sounds procedurally rather than playing pre-recorded audio files.

The approach it used was layered synthesis: a burst of pink noise (the air escaping) run through a low-pass and a band-pass filter, with a very short decay envelope. The result is a sound that's close enough to the real thing to trigger the same neural response. It's not a recording — it's a description of what a pop sounds like, rendered in real time.

The benefit of synthesis over recordings is that each pop can be slightly randomized. Real bubble wrap doesn't produce identical pops — each one has a slightly different pitch and character. The Tone.js implementation re-randomises the decay length and the volume on every pop, so a rapid sequence doesn't produce the robotic repetition you'd get from looping a single audio file.

Why synthesis over samples: Procedurally generated audio can vary each instance slightly, matching how real bubble wrap actually sounds. Loading audio samples requires either a large file or noticeable repetition — neither works well for a game where you might pop hundreds of bubbles in a minute.

Three Bubble Sizes and Why They Feel Different

The bubble size selector — Small (30px), Medium (50px), Large (75px) — wasn't in the original brief, but it shows up as a config option in the first output. Bubble sizes affect the game in ways that aren't immediately obvious from the description.

Smaller bubbles mean more bubbles on screen, smaller tap targets, and a faster pace — it's physically harder to pop them quickly on mobile, and the grid looks denser. Larger bubbles mean fewer in the grid but a more satisfying visual deformation animation. Each size has a different rhythm to it. Experienced players develop a preference. Some find Large bubbles the most satisfying; others prefer Small as the challenge mode. The choice turned what could have been a single-configuration game into something with meaningful replay variation.

The BPM Tracker

Classic mode adds a score, but the AI added a secondary metric we hadn't asked for: BPM — bubbles per minute. It tracks your popping rate in real time and displays it alongside your score.

This turned out to be one of the most engaging things about the game. BPM gives players something to optimize beyond just "clear the sheet." Players develop popping techniques — faster finger movement patterns, strategic grid routing to minimize travel distance between pops — specifically to push their BPM higher. It adds a layer of skill expression to what is otherwise a pure reflex activity.

Measuring rate rather than just count also changes the strategy. In a game with a fixed countdown, you can slow down at the end and still score. When BPM is on screen, slowing down is immediately visible. Players push to maintain or improve their rate throughout the session.

Pop-a-Joke Mode: The Feature Nobody Asked For

The second game mode was completely unasked for. The initial output included a mode selector with two options: Classic (timed, scored) and Pop-a-Joke. Pop-a-Joke hides jokes inside bubbles — first tap reveals the setup, second tap reveals the punchline.

Our first instinct was to remove it. It seemed off-brand for an arcade site — jokes? But we played it. The experience of popping bubbles to reveal hidden content is distinct from the timed mode. The anticipation of "what's in this one" changes the physical act of popping. You're not racing — you're exploring. The two modes serve genuinely different mental states: Classic is for competitive play, Pop-a-Joke is for decompression.

That distinction is why we kept it. The jokes themselves are family-friendly. The setup/punchline two-tap structure means there's always a beat between the question and the answer — the same rhythm as a real joke delivery.

What Pop-a-Joke changed about the game's audience: Classic mode appeals to players who want a score to beat. Pop-a-Joke mode appeals to players who want to decompress without any competitive pressure. Keeping both modes effectively doubled the game's addressable audience without requiring two separate builds.

Where a Run Ends

One design choice that required iteration: what happens when you pop all the bubbles? What we shipped treats that as the finish line rather than a wall. Clearing the last bubble ends the run and brings up an end screen with your time, score, final BPM, and best combo. There's no fail state and no countdown — the only thing that stops a run is running out of bubbles.

That quietly turns the bubble size selector into a run-length dial. The grid is built once, sized to fill the play area, so Small packs the most bubbles onto the sheet and gives you the longest stretch to hold a rate over, while Large is a sprint. The game becomes about maintaining a high pop rate all the way down to an emptying board — and the last stretch, chasing the stragglers left on a mostly-popped sheet, is where the BPM figure is actually decided.

What Bubble Wrap Taught Us About "Simple" Games

Games you can't lose are harder to design than they look. Without a loss state or a progression goal, the only thing keeping players engaged is the intrinsic satisfaction of the activity itself. Everything — the audio, the visual feedback, the timing, the grid density — has to be tuned to support that moment-to-moment satisfaction.

The BPM tracker and the mode selector were the AI's solutions to the "what do players optimize for?" problem. Even in a game with no enemies and no death, players want something to measure and improve. Give them a rate metric and they'll invent a technique to improve it. Give them a mode selector and they'll return to the game in different headspaces.

Those additions turned a single-purpose toy into a game that people return to. That's the design problem Bubble Wrap Challenge solved.

Play Bubble Wrap Challenge →

Related: Free Online Bubble Wrap Game – Pop Bubbles in Your Browser · What Is Vibe Coding? · Vibe Coding Tools: From Chatbots to AI IDEs