Hammy's Feast 🐹
A food-foraging arcade game where a hamster races against decay to score the best-ranked food
Hammy's Feast is a single-file HTML game starring a hamster running around a play area collecting falling foods. Each food has a freshness level shown by a colored ring around it. Fresh foods are worth 3 points, slightly stale 2, almost-rotten 1, and fully rotten foods are toxic — eating one makes Hammy sick for a few seconds. The decay ring drains over time, so timing matters: grab early for max points, or risk waiting and losing value.
Hammy is steered by tapping or clicking where you want him to run. The game has multiple difficulty levels and a per-level scoring system that rewards efficient collection.
Delivery
1 HTML file
Dependencies
0 installed
Food values
3 / 2 / 1 / rot
Levels
Progressive
Control
Tap to move
Storage
localStorage
Hamster movement
Tap anywhere in the play area — Hammy runs toward that point. The sprite flips left or right based on travel direction. Smooth interpolation, not teleporting.
Food spawning
Foods spawn at random positions with a starting freshness ring. Each food displays an emoji (fruit, vegetable, treat), a point badge, and a circular decay timer.
Decay ring
SVG circular stroke around each food drains over time. As it drains, the food shifts through freshness tiers — visible by color and glow, and by the point value on the badge.
Rotten = sick
Foods that fully decay turn rotten (green stink glow, grayscale, jittery shake). Eating one makes Hammy sick — green hue rotation, slowed movement for a few seconds.
Each food carries an SVG circle as its decay indicator, with stroke-dasharray set to the full circumference and stroke-dashoffset animated from 0 (full ring) to the full circumference (empty ring) over the food's lifetime. A CSS transition on the offset gives the ring a smooth countdown effect; a transition on the stroke color matches the ring color to the current freshness tier.
When Hammy reaches a food, the food plays a brief collect keyframe animation — scale up, fade, transform up and out — before being removed from the DOM. The animation runs with forwards so the food doesn't snap back, and pointer-events: none so clicks pass through during the fade.
Eating rotten food applies a hue-rotate(60deg) filter and green drop-shadow on Hammy, plus a debuff that reduces movement speed for a few seconds. The state clears automatically after a timer expires.
HTML + CSS + Vanilla JS
Entire game, single file
No framework
SVG circles
Decay rings — perfect circular countdowns
Native browser
CSS filters
Drop-shadow glows, grayscale rot, hue-rotate sick state
No image assets
Pointer Events
Tap-to-move steering
Native browser
CSS keyframes
Wobble, shake, collect, stink-pulse
No animation library
Higher levels increase spawn rate, decay speed, and the ratio of rotten foods. Hammy's movement speed stays consistent — what changes is the difficulty of the decision: at low levels you can pick the best fresh food; at high levels you must triage between many simultaneous decaying targets.
A level badge in the HUD shows current level. Level transitions are smooth — no full restart — so the player can flow through increasing difficulty in a single session.
The play area is a single positioned div containing the hamster sprite and dynamically added food sprites. Hammy's position is held in a JS state object and synced to CSS via left and top. Movement uses a small interpolation step per animation frame toward the latest tap target.
Each food is a DOM element added on spawn and removed on collection or full rot. Foods don't share a render loop — they each carry their own CSS transition and freshness class. The main JS loop polls food lifetimes and updates their classes when they cross freshness thresholds.
Collision detection is a simple Manhattan distance check between Hammy and each food on every frame. When distance drops below the collection radius, the food's tier determines the score change and whether the sick state is applied.