Blocky Boom

{Blocky Boom} Project Report

Project: Blocky Blast Puzzle (shipped as Blocky Boom) Format: 1-day sprint + polish passes · single-file web game Outcome: Playable mobile-first puzzle with two modes, three difficulties, 100 levels, gems, SFX, haptics, and save progress

1. The Concept

Blocky Boom is a touch-first block puzzle built around one clear loop: drag polyomino pieces onto an 8x8 board, then feel the payoff when rows and columns clear with a boom.

The game solves a simple design problem — “how do you make line-clearing feel explosive and still give players a second reason to place carefully?” — with two modes:

BOOM

• Goal: Collect the level’s pink pentagon gems and blue diamond gems by clearing the lines they sit on
• Feel: Risk/reward placement, multi-line chains, gems riding on blocks so every drop has a target

BUILD

• Goal: Fill a glowing picture silhouette (home, animal, fruit, and more)
• Feel: Calm construction; same placement rules, different win condition

Identity in one line: a Block Blast–style drag puzzle where clears explode, BOOM mode hunts gems, and BUILD mode turns the board into a picture you complete.

Easy to start (title → PLAY → pick mode and difficulty → place pieces). Room to grow for experts through chaining clears, gem routing, harder piece sets, and 100 levels per mode with progress unlocks on Easy / Medium / Hard.

2. The Stack

Kept deliberately thin so a full game could ship in one day:

App shell — Single index.html No build step, open and play 9:16 portrait stage (1080x1920), letterboxed on other screens

UI — HTML + CSS (Nunito, CSS variables, safe-area insets) Mobile layout, punchy 3D buttons, night-ocean palette

Logic — Vanilla JavaScript (IIFE, "use strict") Grid, pieces, gems, clears, levels, overlays in one place

Input — Pointer events + drag ghost Works for finger and mouse

Audio / feel — Web Audio API (oscillators + noise bursts) + vibration haptics Boom, place, chain, win/fail without asset files

Persistence — localStorage (blockyBoom_dom_v2) Best level per mode x difficulty; migrates older bestBoom / bestBuild saves

Design guidance — Sakurai-style rule docs + UI/design rules in repo Concept, motion, sound, and UX checks before and during build Portrait 9:16, one screen / one job, no browser-page chrome

No framework, no bundler, no external game engine — one file, one day, one playable product.

3. The 1 Day Sprint (+ polish passes)

The sprint goal was not “prototype UI mocks.” It was: by end of day, a stranger can open the file, pick BOOM or BUILD, clear a level, and want one more.

Scope locked early:

• 8x8 board, three-piece tray, drag-to-place
• Line clears that only boom on full rows/cols (no messy neighbor spread)
• Dual modes sharing the same placement feel
• Title → levels → play → win/fail overlay
• Light juice: particles, float text, title demo animation, SFX

Anything that didn’t serve that loop waited.

Morning (Hours 1–3):

Hours 1–2 — Foundation

• Locked the concept: BOOM (clears / collectibles) vs BUILD (picture fill).
• Scaffolded the app shell: title, levels, play screens, overlay card.
• Set design tokens (coral / mint / gold on a deep field) and mobile-safe layout (100dvh, safe areas, touch-action: none).
• Built the 8x8 DOM board and three tray slots.

Hour 3 — Core loop

• Piece shapes, placement validation (canPlace / anyPlaceable).
• Drag ghost with valid/invalid feedback.
• First pass of row/column clear detection and board update.
• Seeded board fill and level config skeleton so difficulty could scale later.

By lunch: you could place blocks and watch lines clear — raw, but real.

Afternoon (Hours 4–6):

Hours 4–5 — Modes & progression

• Finished BOOM: line clears, combo/chain tracking, collectible cores on later levels (later refined into pink / blue gems).
• Finished BUILD: picture masks (HOME, CAT, FISH, APPLE, …), glowing targets, fill progress banner, silhouette celebration into win.
• Level select with paging (100 levels, 25 per page), lock/unlock from best progress.
• localStorage save/load for BOOM and BUILD bests.

Hour 6 — Feel

• Blast timing (wave delay), particles, float scores (“CORE”, chain feedback).
• Web Audio: place taps, boom noise + thud, chain ping, win arpeggio, fail drop.
• Title demo animation previewing the boom fantasy before the first tap.
• HUD: goal bar, level pill, home button, tips for first-time players.

Afternoon turned a mechanic into a game people could feel.

The Finish Line (Hour 7-8):

• Polished win/fail overlay (score, chain echo, NEXT / MENU).
• Hardened edge cases: no moves left, resolving mid-blast, picture complete vs collectible goal.
• Mobile pass: tray drag, ghost snap, button press depth, overscroll blocked.
• Quick playtest both modes from level 1 through a mid-tier challenge.
• Trimmed scope creep (no gacha, no account system, no asset pipeline) so the file stayed shippable.

Done when: open index.html → BOOM or BUILD → clear a level → progress saved → want to continue.

Polish (Aug 10):

A short follow-up pass after the sprint — not new features for their own sake, just making the shipped fantasy clearer and the first session smoother.

• Tightened identity: Blocky Boom naming, stronger coral/mint/gold contrast, punchier title demo.
• Drag & board feel: ghost alignment, valid/invalid feedback, safer touch hit-testing on small screens.
• Mode clarity: BOOM vs BUILD copy on title and play tip so players know how they win before they place.
• BUILD pictures: cleaned silhouette masks, fill-progress banner readability, win celebration timing.
• Juice & audio: boom wave delay, particle count, float text, and synth SFX levels tuned so clears feel loud without noise fatigue.
• Progression UX: level paging, lock states, and save key (blockyBoom_dom_v2) checked after playtests.
• First-session help: short “DRAG TO PLACE” tip so new players learn place → boom without a manual.

Polish rule: if it didn’t make “place a piece → boom” more obvious or more satisfying, it didn’t ship.

Polish (Aug 13):

A second pass aimed at “this should feel like a phone game, not a web page.” Layout, win goals, and menus were brought in line with the design rules (9:16, one screen / one job) and playtests of later BOOM levels.

• Stage: locked a 1080x1920 / 9:16 portrait frame. Phones fill it; tablets and desktops letterbox the same stack.

Landscape still plays as portrait, not a sideways webpage.

• Title is one job: PLAY. Mode and difficulty live on the levels screen (BOOM / BUILD tabs, EASY / MEDIUM / HARD sliding pills).
• BOOM win is gems, not a score number. Pink pentagons and blue diamonds spawn on pieces and the board;

you win by collecting the level’s quota. Score still ticks, but the HUD goal is the gems.

• Difficulty is real: Easy uses smaller pieces, fewer gems, and a BUILD tray rescue if you get stuck.

Hard uses larger pieces, higher gem counts, and no assist. Progress unlocks separately per mode x difficulty.

• Pause: the home control pauses (Resume / Retry / Home) instead of dumping you to title mid-match.
• Scene: drifting glossy blocks, soft orbs, and twinkles behind menus; field fades during play so it doesn’t fight the board.

Backdrop shifted from teal to night-ocean blue so coral / mint / gold read louder.

• Buttons: 3D gloss, press depth, Play shine sweep. Mode and difficulty use a sliding pill instead of a row of flat toggles.
• Responsive: short phones shrink the demo and hide extra floats; tablets bump type and Play size; reduced-motion users get a still scene.
• Feel: vibration haptics on place / boom / win / fail, on top of the existing synth SFX.

BUILD catalog after this pass: HOME, CAT, FISH, DOG, APPLE, CHERRY, GRAPE, HEART, STAR, TREE, CAR, BUNNY.

Same rule as Aug 10: if it didn’t make the loop clearer, the board more readable, or the phone-game feel stronger, it didn’t ship.

4. The Roadblocks

1. Touch drag vs DOM layout — Ghost positioning and board hit-testing fought CSS sizing;

fixed with pointer coords, cell centers, and a dedicated #dragGhost.

1. Clear rules — Early impulse was “blast spreads to neighbors”; that muddied strategy. Locked rule: only full rows/cols boom.

1. Two modes, one brain — BUILD needed picture progress without breaking BOOM;

shared place/resolve path with mode-specific win checks (gems vs silhouette).

1. Audio without assets — No time for WAVs; Web Audio synthesis had to sound “boom” enough with noise + low thud + crack.

1. Scope clock — Picture catalog, 100 levels, and juice all wanted more hours;

capped pictures to a rotating set and procedurally scaled goals/piece hardness instead of hand-authoring every level.

1. “Web page” vs “phone game” — Early layouts stretched like a browser tab. The 9:16 stage,

one-action title, and letterboxing on desktop were the fix: same stack on every device.

1. BOOM goals that didn’t teach — A score bar didn’t tell you why to clear a specific line.

Pink / blue gems on the board made the target visible before the boom.

5. Key Takeaways

• Ship the fantasy first. Place → boom is the product; modes, gems, and levels only exist to serve that moment.
• One file beats half architecture. A thin stack (HTML/CSS/JS) kept every hour on play feel, not tooling.
• Dual modes share one brain. Divergence only at win checks kept the loop consistent and the code honest.
• Constraints create clarity. Full-row/col clears only, no asset pipeline, no accounts, 9:16 portrait — each “no” protected the day.
• Polish is selective. Aug 10 improved clarity and feel; Aug 13 made it a phone game (stage, gems,

difficulty, pause) without reopening the feature floodgates.

• Design rules earn their keep. Sakurai / UI notes (one screen / one job, 70–90% play area,

no landing-page chrome) turned gut feel into checks you can run mid-sprint.

My final thought:

A one-day game only works if the fantasy is tiny and sharp. For Blocky Boom that fantasy was never “a platform with modes.” It was place a piece → boom. Everything else — BUILD silhouettes, gems, difficulties, SFX, level paging — only earned its place by making that boom more satisfying or giving a second way to chase it.

Shipping one honest HTML file beat a half-finished “proper” architecture. The stack stayed invisible so the puzzle could stay loud.

Blocky Boom: tap Play. Pick a mode. Fill the board. Make it boom.