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 responsive 2D canvas game titled “Home Run Derby.” It is a simple timing-based baseball batting game viewed from behind home plate toward the pitcher and batter, with a stylized flat/vector art look. Fill the entire viewport with the game canvas and overlay a responsive HUD.

Scene and camera: Use a fixed, full-screen orthographic-like composition. Paint a vertical sky gradient from dark blue at the top through light blue to tan near the bottom. Across the middle distance, show a dark navy stadium/crowd band with many small warm yellow and reddish square lights/people. In front of it, draw a large dark green outfield arc/semicircle. Draw a brown infield/pitching lane as a widening trapezoid extending from a narrow point near 61% of the screen height toward the bottom corners. At the far/narrow end center, draw a cream home plate/pitching marker as a circular shape with a simple white three-line Y-shaped marking extending toward the foreground.

On the right side, around 78% of viewport width and 59% of viewport height, draw a stylized batter: dark navy circular helmet/head silhouette, peach face, red rectangular jersey/body, peach arms and legs. The batter holds a brown bat diagonally. The idle bat points up/right from the hands; during a swing, animate/rotate the bat to a more leftward angle for roughly 0.22 seconds. Use simple geometric shapes, no detailed textures.

Pitching mechanic: Each pitch is a white baseball with red curved seam marks, initially entering from just beyond the right edge around 57% of viewport height and moving horizontally left at a constant speed. Give it a faint short white motion trail. The first pitch speed is about 470 pixels/second and increase it by 18 pixels/second for each subsequent pitch. Add a small random vertical offset of up to about 13 pixels above or below the pitch line at spawn. The target is an orange translucent rectangular “CONTACT ZONE” centered at 68% of viewport width and around 57% of viewport height, 148 pixels wide by 84 pixels high, with a 3-pixel orange dashed border and the label above it. The batter should swing when the ball is horizontally close to the zone center.

Controls and rules: Provide a large orange gradient “SWING ⏎” button at the bottom center on small screens, and support Space or Enter on the keyboard. A “Start Derby” blue button appears before play; pressing it or the swing control starts the game. A “Restart” dark button appears after game over. During play, pressing swing checks the horizontal distance between the ball and the contact-zone center. If the distance is less than 74 pixels, register contact. Compute contact quality as 1 minus distance/74, clamped to zero. Award a hit distance rounded from 260 + quality*365 + a random 0–60 feet. If quality is above 0.82, label it “PERFECT!” and multiply the distance by 2 for score; if above 0.55, label it “SMOKED IT!”; otherwise label it “SOLID CONTACT.” Add the awarded score and update the best-shot distance. On a hit, stop the ball, show the result for about 1.2 seconds, then launch the next pitch after about 0.75 seconds.

If the swing is outside the 74-pixel contact window, stop the ball and show “FOUL TIP” when it is within 150 pixels of the zone, otherwise “SWING AND MISS,” in a reddish color. Continue after about 0.65 seconds. If the player does not swing before the ball passes the left edge, count it as a miss and show “TAKE STRIKE” briefly, then continue after about 0.55 seconds. Run exactly 10 pitches; after pitch 10 resolves, stop play and show a prominent “FINAL SCORE [score]” message, hide the swing button, and show Restart. Do not add innings, fielders, base running, pitching controls, or other modes.

HUD: Along the top, show three dark translucent rounded stat cards with subtle blue borders: “SCORE” with the current numeric score, “PITCH” with the current pitch as “n / 10,” and “BEST SHOT” with the longest hit as “n ft.” Use bold white values, small uppercase pale-blue labels, and a slight text shadow. Center feedback messages near the upper-middle of the screen in very large bold text with a heavy dark shadow; use pale yellow for PERFECT, cyan for the other successful contacts, reddish peach for misses, and white for the final score. At the bottom display the instruction “Time your swing as the ball crosses the orange contact zone”; on wide screens position this hint toward the bottom-right and put controls at bottom-left, while on narrow screens center the hint above the centered controls. Make all buttons rounded, bold, touch-friendly, and prevent page scrolling. Keep the visual style clean, colorful, geometric, and arcade-like.