Stacky Bird Project Report
1. The Concept
Stacky Bird is a cute endless stacking game for mobile and desktop browsers. The bird scrolls forward on its own. The player holds to spawn square blocks under the bird, raising the stack so it can clear walls, hanging ceilings, tunnels, and sky platforms. Release, and the whole stack falls with gravity and can land on the ground or a platform top. Coins collected during a run unlock character skins in the shop. The run ends only when the bird’s head hits a solid, falls into a pit, or stacks too high into the upper ceiling.
2. The Stack
The Stack: Vanilla HTML, CSS, and JavaScript in a single index.html, plus WebP portraits in assets/. No framework, no build step, no backend. Motion uses requestAnimationFrame and CSS transforms. Input uses Pointer Events (tap/hold) and Space. Progress, coins, skins, and sound settings persist in localStorage. The playfield is a 9:16 viewport scaled to window height.
The AI Assist: Cursor, used as a pair-programmer against the Project Handoff: core loop, obstacle families, collision, shop, and visual polish from mockups.
3. The 1 Day Sprint:
Morning (Hours 1–3): Locked the architecture to one HTML file and the shared 1U grid (48px). Built Home, Play, Pause, Settings, and the hold-to-stack loop with gravity, landing, and a forgiving head hitbox. Wired the first-run HOLD TO STACK hint.
Afternoon (Hours 4–6): Spawned obstacle patterns (walls, stair-hills, ceilings, tunnels, pits, sky stairs). Added coins, a magnet power-up, Game Over stats, and a six-skin shop with buy/equip saved locally. Fatal collision stayed head-only; floor walls can be used as steps.
The Finish Line (Hour 7-8): Matched walls and ground to a grass-on-dirt tile (grass only on the top of a stack). Restyled Game Over (Retry only) and Shop from mockups. Wrote the README, then deleted unused images so the repo only ships portraits and the coin icon.
4. The Roadblocks
Roadblocks: Head-hitbox vs body collision had to stay strict so side-steps on walls felt fair. The upper ceiling looked upside down until grass sat on the player-facing edge and the same tile language moved to the ground. Shop layout flipped between 2×3 and 3×2 before settling on two rows, three columns. The single-file rule meant every visual change lived in index.html, so CSS had to stay scoped (Game Over and Shop) so Pause and Home did not break.
5. Key Takeaways
A small endless game can ship as one HTML file if the unit grid, hitboxes, and screen list are decided up front.
Mockups beat guesswork: walls, Game Over, and Shop only clicked after matching reference images, then cutting anything the mockup did not need (Home on Game Over, unused sprites).
My final thought: Constraints (one file, 1U, head-only death) made the sprint faster, not smaller. The fun is in the hold, the step-up, and a clean retry—not in more systems.