Duck Face Stretch

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Create a responsive full-screen casual arcade game titled “Duck Face Stretch,” using a 2D canvas that fills the browser viewport and supports mouse and touch pointer input. The setting is a cheerful minimalist outdoor scene: a vertical gradient sky from sky blue at the top to very pale blue near the bottom, two soft semi-transparent white cartoon clouds drifting subtly horizontally, and a large rounded green hill rising from below the screen. Use clean, colorful, friendly vector shapes with no textures.

The player controls a cute yellow duck centered around 50% of the screen width and 58% of the screen height. The duck has a plump golden-yellow oval body, darker yellow/orange oval wing shapes on both sides, and a lighter pale-yellow circular/oval face. Its face has two dark navy circular eyes with tiny white highlights, a bright orange oval bill with a darker orange horizontal center line, and a small curved dark-brown smile beneath it. The body remains smoothly pulled back toward its home position at the center while the face is able to stretch away from it. When the player holds the pointer down and drags, calculate the direction from the duck’s body to the pointer and extend the face along that direction, with the stretch distance capped at about 150 pixels. The face should visibly separate from the body, the bill should lengthen as stretch increases, and the whole duck should scale up slightly, up to roughly 24%, at maximum stretch. Rotate the face to point along the drag direction. When the pointer is released, the stretch smoothly returns toward zero. While holding, show a semi-transparent white dashed guide line from the duck body to the pointer.

Golden crumbs are the collectibles and the main challenge. Spawn one irregular, angular golden-yellow crumb at a time on a random position within the playable area, avoiding the very top and lower edge; spawn intervals begin around 1.2 seconds and become shorter as score increases, but never below about 0.38 seconds. Each crumb should be a small rotating faceted polygon with a pale cream outline and a gentle pulsing scale animation. The duck catches crumbs when the endpoint of its stretched reach overlaps them: aim the face toward the pointer, use a reach beginning around 92 pixels from the body and extending by roughly 0.78 times the current stretch, and collect a crumb when it is within about 32 pixels plus its radius of that endpoint. Remove collected crumbs and increment the score by one. Also remove crumbs that leave the visible play area. There is no timer, lives system, enemy, or explicit game-over state; gameplay continuously produces collectibles.

Add a fixed HUD over the canvas. At the top, show two rounded white translucent pill panels with subtle border and shadow: “Score 0” on the upper left and “Best 0” on the upper right. Use dark blue text, bold weight, and a slight light text shadow. Track the best score persistently in browser local storage and update it immediately whenever the current score exceeds it. On initial load, display a centered translucent white rounded instruction panel near the upper portion of the screen containing the large title “Duck Face Stretch,” the text “Drag anywhere to stretch the duck's face and catch the golden crumbs.”, and an orange rounded button labeled “Start stretching” with a darker orange pressed shadow. The game begins when that button is clicked, or when the player presses the canvas; hide the instruction panel and show a bottom-centered translucent rounded hint reading “Hold and drag — longer beak, bigger reach!” During play, reset score and duck position when starting a new session, clear all crumbs, and initialize a short spawn delay. Pointer input should work on desktop and mobile, prevent page scrolling on the canvas, capture the pointer where supported, and release the drag on pointer up, pointer cancel, or window blur. Keep the composition responsive to window resizing and use device-pixel-ratio-aware canvas rendering so it remains crisp on high-density screens. The game should feel like a simple polished one-screen touch game with smooth interpolation and animation rather than discrete grid movement.