{Pop Flower}Project Report
1. The Concept
Pop Flower is a mobile-first PopStar-style puzzle: tap groups of 2+ matching adjacent flowers, clear them for points, watch the board fall under gravity, and hit a stage score target before you run out of moves.
The hook is familiar mechanics with a garden skin — jasmine, sakura, hydrangea, rose, and sunflower as the five colors — so clearing reads as “bloom and burst,” not just popping blocks. Risk/reward is classic PopStar: bigger groups score n² × 5, leftovers yield an end bonus (up to 2000 for a perfect clear), and you keep playing until no moves remain, then pass or fail the target.
Built as a one-screen smartphone game (title → play → pause / clear / game over), guided by the Sakurai-style design rules in the repo: one job per screen, fun first, beginner-simple with depth through stage targets.
2. The Stack
- App: Single-file index.html (HTML + CSS + JS, no build step)
- UI: CSS variables, Google Fonts (Fredoka, Playfair Display), inline SVG flower art
- Logic: Vanilla JS — 10×10 grid, flood-fill groups, gravity, ~200-stage target curve
- Feel: CSS animations + DOM VFX (shatter petals, sparks, float scores, combo banners)
- Audio: Web Audio API (procedural beeps/booms — no sound files)
- Persist: localStorage (best score; continue save for stage / score / grid)
- Target: Mobile web (viewport lock, safe-area, touch-first, PWA-ish meta tags)
Design reference lives in sakurai/ and rules/ (Khmer UI/game-design constraints), not in a separate engine.
3. The 1 Day Sprint (+ polish pass)
Morning (Hours 1–3): Core loop: 10×10 board, color fill with guaranteed playable starts, flood-fill match groups, select → confirm tap to pop, PopStar scoring, column gravity with sliding tiles, HUD (stage / score / best / target).
Afternoon (Hours 4–6): Stage system (targets ramp across ~200 stages), stage clear vs game over, remain bonus + leftover “bloom away” sequence, pause / restart / quit, title screen with PLAY + CONTINUE, localStorage progress.
The Finish Line (Hour 7-8): Web Audio unlock (incl. iOS silent-buffer trick), pop/clear/fail SFX, flower SVGs on tiles, shatter + spark FX, combo banners, float scores, title garden (petals, grass, sky gradients), mobile layout polish (--app-max, board sizing).
Polish (Aug 10): Visual and feel pass — clearer flower identity per color, softer garden atmosphere, clearer overlays (Stage Clear / Pause / Game Over), leftover sweep animation, continue-save UX, small motion/audio tweaks so the build feels like a finished casual puzzle, not a prototype.
4. The Roadblocks
- Authentic PopStar rules — score formula, end bonus, and “play until no moves, then check target” had to stay correct while still feeling fair mid-stage.
- Gravity + DOM — tiles needed to keep identity so slides animate; empty cells and column packing are easy to get wrong.
- Mobile audio — browsers (especially Safari) block sound until a user gesture; unlock + silent buffer was required.
- Readable flowers — decorative SVGs still had to read instantly as five distinct match colors on a small phone grid.
- Stage curve — balancing early targets (~1000) vs deep stages without a separate data pipeline, all in one JS function.
- Scope discipline — one HTML file and no asset pipeline meant everything (art, SFX, UI) had to stay procedural/inline.
5. Key Takeaways
- A full casual puzzle loop (match → gravity → stages → save → juice) fits in one day if the stack stays vanilla and the rules are borrowed from a known classic.
- Juice (VFX + procedural audio + clear overlays) mattered as much as the grid math for making it feel like a “real” mobile game.
- Design constraints (one screen, one job; smartphone game, not a dashboard) kept the UI honest and small.
- The flower theme is the product identity; without it, this is just another PopStar clone.
My final thought: Pop Flower proves you can ship a charming, playable mobile puzzle in a day when the concept is sharp and the stack is intentionally tiny — and that the polish pass is what turns “it works” into “I’d tap PLAY again.”