Hi everyone! I made a small fireworks puzzle game. Tap the night sky to launch a rocket. Every paper lantern its sparks touch bursts into its own firework and lights its neighbours, so one well-placed tap can set off the whole sky. The crowd on the shore goes “Ooooh!”, “Aaaah!”, and on a really long chain, “Grandma fainted!”.
Play (free, desktop and mobile): Boom Bloom! – Play free online | Glowbit Games
There are 16 shows in 4 night venues (Harbour Lights, Lantern Lake, Desert Stars, Aurora Bay) and 10 lantern shells: peony, Big Mum, crossette, willow, halo, crackle, zoomer, a heart, a cat face and a lucky star that gives you an extra rocket. There is also an endless Festival mode and a Show Maker where you can share shows as text codes.
Some technical bits
- Analytic GPU fireworks: every spark is one instanced, camera-facing streak. Its motion (launch velocity, linear drag, gravity) is solved in closed form in the vertex shader, so the CPU writes each spark only once, when it is born, into a ring buffer of 24k sparks. Delayed spawns cost nothing: they just have a start time in the future. Each streak runs from where the spark was a moment ago to where it is now, which gives real trails. Sparks with zero velocity need a capsule SDF in the fragment shader, or they render as squares.
- Visuals match the gameplay exactly: a render-free, deterministic simulation decides which lanterns catch fire (the ignition zones of each shell, comet paths, rain clouds, scoring). The fireworks use the same radii, timings and comet paths, so what you see is what lit the lantern. Unit tests and a bot run the sim in Node, and a test checks that the bot can 3-star every show.
- Lanterns with faces: all lanterns are one instanced mesh (a lathe body with ribs and wooden caps, a tassel, and cat ears that only the kitty keeps), lit from inside by a flickering candle. Their painted faces come from a canvas atlas and react to nearby sparks: calm, curious, nervous, ecstatic, or soggy after rain.
- Lighting the scene: a pool of 5 point lights flashes the venue in the colour of each burst. The flash must stay subtle; with 5 lights adding up, my first version turned the whole canyon crimson. The lake uses three’s
Reflectorwith a rippled fresnel water shader, and the sky dome has stars, a Milky Way band, aurora curtains and thin clouds that light up in the firework colours. - Cheap dioramas: each venue on the far shore is built from merged low-poly pieces (houses and a clock tower, a pagoda and torii, mesas and cacti, snowy peaks and cabins), so it is only a handful of draw calls. Post is
postprocessingwith a strong mipmap bloom on a half-float buffer, AgX tone mapping, vignette and SMAA. - 100% procedural: there are no image or sound files. Web Audio makes the mortar thumps and whistles, booms with crackle tails, willow fizz, a “meow” for the kitty shell, chain notes that climb a pentatonic scale, a formant-filtered crowd going “ooooh”, and a plucked soundtrack for each venue. The whole game is about 256 KB of gzipped JS.
Stack: three.js r186, TypeScript, Vite, postprocessing.
I’d love to hear your longest chain, and how it runs on your devices!
