Home Run 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 portrait-friendly, full-screen 2D canvas baseball timing game titled “HOME RUN DERBY.” The player controls a cartoon batter and must hit ten incoming pitches by swinging at the right moment; the goal is to maximize the score over 10 pitches. Use a responsive canvas filling the viewport, with touch input and keyboard input.

Camera and scene: use a fixed batter’s-eye/side-on arcade view of a baseball field. Paint the background in simple flat geometric/vector shapes: a vertical gradient sky from bright cyan-blue at the top to pale blue near the horizon, a thin pale horizon highlight, and a green outfield occupying the bottom half. Add a large dark-green elliptical mound/field shape centered around the lower middle, a tan home-plate/batter’s-box or infield wedge extending toward the bottom, a small tan oval plate area, and small white plate/field markings. Across the middle distance draw a dark teal horizontal backstop band and a row of alternating teal-blue rectangular stadium stands above it. Keep the visual style clean, colorful, minimal, and cartoon-like, with no textures or detailed sprites.

Draw the batter in the lower-right/center foreground as a simple stylized human made from shapes. Position the player around 68% of viewport width and 67% of viewport height. Give them dark navy straight legs, a white rectangular jersey, peach skin, a round head, and a red baseball cap with a brim. Draw peach arms extended toward a brown wooden bat angled upward to the right. During a swing, briefly show a translucent white curved swing arc around the bat. The batter should be large enough to be prominent in the foreground.

Pitch mechanic: after a short “GET READY” start message, automatically launch a pitch roughly every 0.65 seconds after the previous pitch finishes. Each pitch begins around 18% screen width and 27–35% screen height and travels smoothly toward the plate around 58% screen width and 64% screen height over about 1.55–1.75 seconds. Use eased motion and a small randomized vertical curve. Draw the ball as a white circle that grows from about radius 7 to 13 as it approaches, with a small red curved seam. The user can swing only while a pitch is active by tapping the large red circular SWING button, tapping the canvas, pressing Space, or pressing Enter. The ideal swing occurs when pitch progress is near 82%: within about 3.5 percentage points award 3 points and show “HOME RUN!”; within about 8.5 percentage points award 2 points and show “LINE DRIVE!”. For a successful hit, change the ball animation so it leaves the plate toward the upper-right, shrinking slightly; add a brief screen shake, stronger for a home run, and a short swing arc. A home run feedback message should be gold/yellow; other feedback is white.

If the player swings somewhat late, approximately between 68% and 98% pitch progress but outside the successful timing window, show “FOUL BALL,” increment the strike counter internally, and animate the ball slightly back/upward from the plate before ending the pitch. If the swing is outside that window, show “SWING AND MISS,” increment strikes, and end the pitch. If the player never swings before the ball reaches the plate/end of its travel, show “STRIKE,” increment strikes, and end the pitch. Strikes are part of the game state but are not displayed in the visible HUD. There are no outs or strikeout termination rules; always continue until ten total pitches have been completed.

HUD/UI: overlay a fixed, pointer-transparent HUD above the canvas. At the top, show “HOME RUN DERBY” in bold uppercase gold/yellow text with a subtle dark shadow on the left and a white score counter on the right formatted as “score / 10,” initially “0 / 10.” The score counter represents points accumulated from hits, while the denominator represents the ten-pitch session. Near the upper center show large bold feedback/status text such as “GET READY,” “HOME RUN!,” “LINE DRIVE!,” “FOUL BALL,” “SWING AND MISS,” or “STRIKE,” with a dark text shadow. At the bottom center show a dark translucent rounded pill with pale text: “Tap SWING or press Space when the ball reaches the plate.” At the lower-right place a large red circular button labeled “SWING” in white bold type, with a white outline, dark red offset shadow, and pressed-down visual state. On game over, after pitch ten, show either “MVP PERFORMANCE” when score is at least 20 or “NICE HACK” otherwise, and reveal a centered gold “PLAY AGAIN” button; tapping it resets the game. Also allow swinging after game over to reset if desired.

Implement smooth animation with requestAnimationFrame and responsive resizing. Preserve the simple color palette: cyan/pale-blue sky, greens, tan infield, dark teal stands/backstop, red cap/button/ball seams, white jersey/ball/UI, navy legs, and gold title/positive feedback. Prevent page scrolling and make the game work equally well on mobile touch screens and desktop keyboard/mouse input. Do not add extra modes, enemies, menus, or baseball rules beyond this single ten-pitch timing challenge.