Timing Derby

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, single-screen 2D canvas timing game titled “Timing Derby.” It is a baseball batting mini-game played over exactly 10 pitches/rounds. Use a full-viewport landscape/portrait-friendly composition with a stylized, flat geometric illustration and a dark translucent HTML-style HUD layered over the canvas.

Scene and camera: use a fixed, front-facing side/diagonal baseball-diamond view. The background is a dusk gradient sky, dark navy at the top fading to light blue near the horizon, with a pale yellow circular moon/sun in the upper-right. Along the horizon is a dark teal stadium wall or skyline made from a horizontal dark band and repeated vertical rectangular panels. The lower half is a green outfield with a lighter curved green foreground shape. In the foreground center-bottom, draw a tan oval pitcher’s mound/home-area shape and a pale cream triangular perspective path extending upward toward the pitcher, with white perspective lines and a small white ball/marker at the bottom point.

Characters: on the left foreground, draw a simplified batter facing right: dark navy/black legs and body made with thick rounded strokes, a dark head/helmet circle with a peach face circle, and a wooden orange bat angled upward toward the center. On the right/middle distance, draw a simplified pitcher in a white uniform: peach circular head, red horizontal cap/hat shape, white rectangular torso, and white stick-like legs. Keep the art abstract and geometric, with no detailed textures.

Core mechanic: begin in a ready state with the message “Time your swing” and the instruction “Tap SWING when the pitch reaches the green zone. Spacebar works too.” The player starts a pitch by pressing the large SWING button or Space/Enter. Each pitch lasts a random duration from 2.0 to 2.7 seconds. Animate a white baseball with red seam marks traveling from the pitcher (approximately 58% screen width, 47% height) toward the batter/contact point (approximately 28% width, 65% height), following a shallow upward arc using a sine curve and leaving a short fading trail. Display a moving white needle in a horizontal contact-timing meter near the bottom center while the pitch is active. The meter has a broad acceptable/OK interval from 27% to 73% and a green perfect interval from 42% to 58%, with the needle tracking normalized pitch progress from 0 to 100%.

The player may swing only once per pitch. Evaluate the normalized pitch progress when SWING is pressed: if the absolute distance from the center (50%) is at most 8%, award one run and show green “PERFECT! HOME RUN”; if distance is at most 23%, also award one run and show yellow “SOLID CONTACT”; otherwise award no point and show pink/red “TOO EARLY” when before center or “TOO LATE” when after center. Show the result prominently around the upper-middle of the play area with a glow/shadow. After about 1.25 seconds, automatically advance to the next round. If the player does not swing before the pitch reaches its endpoint, automatically resolve it as too late and continue the same result flow. Once round 10 resolves, stop play and show a final message: “You own the derby.” for scores 7 or higher, “Solid round.” for scores 4–6, or “Keep your eye on the ball.” for scores below 4, followed by “Final score: X home runs out of 10.” Hide/disable SWING at game end and show a “Play again” button that resets round and score.

HUD: at the top, place a dark translucent rounded brand panel on the left reading “TIMING DERBY” in bold yellow uppercase and the subtitle “Read the pitch. Crush the swing.” Place three matching panels on the right labeled ROUND (show “1 / 10” through “10 / 10”), SCORE, and BEST. Persist BEST in local storage across sessions and update it whenever the current score exceeds it. Center an upper message area for current instructions and results. Near the bottom center, show the uppercase label “CONTACT TIMING,” the timing bar, and the large yellow rounded SWING button with a darker pressed/shadow base. Put the hint “Perfect timing sends it over the wall” below. Include a small “Play again” button in the bottom-right, initially hidden. Make the interface touch-friendly, prevent accidental scrolling, support pointer/touch activation and Spacebar/Enter keyboard input, and scale all canvas artwork and UI fluidly to the viewport.