Game · Spec-Driven Dev · Vanilla JS
Tiny Tamagotchi
A browser virtual pet built spec-first: every behaviour — ticking vitals, the care loop, the sick/evolved state machine, personality quirks — was written as a markdown specification, then translated to vanilla JavaScript on a tiny observer-pattern store. No framework, no canvas, no backend.
Overview
The point of this one isn't the pet — it's the process. It was built for a spec-driven-development challenge: the rules live in markdown first (mission.md, per-feature requirements.md/feature-plan.md/validation.md), and the code is a faithful translation of those specs. Stats are bounded 0–100, the pet has exactly one evolution and one recovery path, and a delta-time loop keeps the simulation predictable even when the tab is throttled.
What's in it
📉 Ticking vitals
Hunger, happiness and energy drift downward over time on a delta-timed loop, each strictly clamped to 0–100.
🍎 Care actions
Feed, Play and Rest each replenish a specific vital — the only levers the player has against entropy.
🔁 State machine
Defined transitions between Normal, Sick and Evolved, with exactly one recovery path out of sickness.
🎭 Personality
Small textual and visual quirks give the pet character without bloating the scope — faces and lines react to its state.
How it works
- Single source of truth: a lightweight centralised store holds state and exposes specific mutations; the UI observes it and re-renders, so there are no cyclical update collisions.
- Spec → code: thresholds and formulas come straight from the
requirements.mdfiles — the implementation is meant to be auditable against the spec, not improvised. - Delta-time loop:
requestAnimationFrameplus timestamp deltas keep ticking honest across tab-throttling, with no database to persist to. - Build: Vite for instant dev refresh; the production build is a few KB of static HTML/CSS/JS — which is exactly what's hosted here.