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 brief burst of filtered noise (the air escaping) combined with a very short decay envelope and a subtle pitch drop. 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 carries small random variations in pitch and amplitude, so a rapid sequence of pops 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 "pop everything before the timer ends." 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 countdown timer, 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.

The Grid Regeneration System

One design choice that required iteration: what happens when you pop all the bubbles? The first version stopped — an empty grid, game over. That felt like hitting a wall. The revised version regenerates the grid while maintaining continuity — popped sections begin refilling after a short delay, creating a rolling replenishment cycle.

Regeneration means Classic mode can run indefinitely without the board clearing entirely — the game becomes about maintaining a high pop rate against a continuously refilling grid. That sustains engagement through the full timer rather than having the last thirty seconds be a race against an almost-empty board.

What Bubble Wrap Taught Us About "Simple" Games

Games without a win condition 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