ZUMLA

{ZUMLA}Project Report

1. The Concept

ZUMLA is a mobile-first marble-chain shooter: aim, shoot, and clear runs of 3+ matching colors before the chain reaches the outer hole.

The hook is spatial pressure. Balls spawn from a glowing center portal and spiral outward along a path toward a danger vortex. Clearing the middle of the chain opens a gap — then the rear segment rushes to catch up, so every good shot can create a second chance… or a sudden collapse.

One sentence: *chain the colors, break the middle, and race the rush before the outer hole wins.*

Built for beginners (3 colors early, clear aim trail, next-ball preview + Space swap) and experts (up to 5 colors, faster feed, denser quotas across 100 progressive levels). Progress, unlocks, and mute preference persist in localStorage.

2. The Stack

• Single-file web app — index.html (HTML + CSS + vanilla JS)
• Rendering — HTML5 Canvas 2D, devicePixelRatio scaling, requestAnimationFrame
• Physics — fixed 60Hz step accumulator for stable chain motion
• Input — pointer events (mouse + touch), keyboard (Space = swap next ball)
• Audio — Web Audio API: procedural Z–U–M–L–A motif BGM, SFX, music ducking on impacts
• Persistence — localStorage (level, unlocked, cleared map, mute)
• Typography — Google Fonts (Orbitron + Rajdhani)
• Design guidance — Sakurai-inspired rules under /sakurai and /rules (risk/reward, stress/relief, beginner–expert balance)
• No framework, no build step, no assets folder — open the file and play

3. The 1 Day Sprint (+ polish pass)

Morning (Hours 1–3):

• Locked the concept: center spawn → spiral path → outer vortex fail state
• Scaffolded canvas, resize/DPR, title/HUD/game-over panels, neon brand treatment
• Built path sampling, ball-on-path motion, shooter aim + projectile flight
• First match-3 insert/clear loop (seed chain + shoot to join)

Afternoon (Hours 4–6):

• Gap logic after mid-chain clears + rear “rush to catch up” merge/re-match
• Level curve for 100 stages (colors 3→5, speed, spawn interval, seed size, quota)
• Progress save/unlock + level-select grid
• Web Audio: shoot/insert/match/lose/win + looping brand motif BGM
• Particles, float score text, aim trail, portal/vortex VFX

The Finish Line (Hour 7-8):

• Settings (sound toggle), mobile touch feel, safe-area HUD
• Win flow for clearing a level / campaign end state
• Tuning so early levels teach and late levels pressure without feeling unfair
• Ship a playable single-file build

Polish (Aug 10):

• Fixed-step physics for smoother chain motion
• Dropped shadowBlur (stutter / ghost trails) in favor of cheap rim/gradient glow
• Stronger clear/BOOM SFX with BGM ducking so hits cut through the music
• Aim trail hide while Settings is hovered/open; tighter insert cooldown and merge scans
• Copy/UX pass on title hint, over screen, and level banner clarity

4. The Roadblocks

1. Chain gaps that felt wrong — After a middle clear, leftover segments either sat forever or snapped incorrectly.

Needed explicit groups, gap thresholds, rush speed, and merge → re-check matches so the “rear rushes to catch up” fantasy actually played.

1. Insert placement bugs — Finding the right path distance for a projectile hit (front / middle / back) caused overlaps or phantom gaps;

cooldown + pack/merge passes were required.

1. Frame-rate dependent motion — Variable dt made the spiral feel rubbery on some devices. Fixed 60Hz accumulator fixed the “buttery chain” feel.

1. Canvas performance cosmetics — Soft glow via shadowBlur looked nice but caused stutter and trails; switched to radial fills + rim strokes.

1. Audio under impacts — Procedural BGM drowned clears until ducking + louder boom/noise layers made match feedback read clearly.

1. Scope vs. one day — Temptation to add modes, skins, or particle extravaganzas; stayed on one composition: brand, one loop, 100 levels, ship.

5. Key Takeaways

• A clear spatial fantasy (center hole → spiral → outer death) sells the game harder than feature count.
• Risk/reward lives in the gap: break the middle for big clears, but invite the rush.
• Constraints win sprints — one HTML file forced focus on feel over architecture.
• Juice is feedback design: aim trail, boom SFX, music duck, portal pulse — not more systems.
• Design rules (unique hook, beginner + expert, stress → relief) were useful as a checklist, not as bloat.

My final thought: ZUMLA proved that in one focused day you can ship a complete, branded arcade loop — and that polish is mostly making the chain *feel* inevitable: spawn, shoot, boom, rush, or lose.