Kickoff 27

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 browser football penalty-shootout game titled “Kickoff 27,” rendered as a full-viewport canvas with HTML/CSS HUD overlays. The game is a compact arcade five-shot shootout: Rivertown FC’s #9 Milo Santos takes five shots at the goal in Aurora Stadium, trying to score more than the keeper before the 30-second clock expires.

Visual presentation: use a dark navy night-stadium palette with a stylized illustrated 2D field viewed from behind the shooter, centered on the goal. The background should have a dark blue sky and stadium stands with rows of tiny multicolored spectator lights, plus two warm vertical floodlights. Fill the pitch with a green vertical gradient, alternating subtle mowing stripes, white boundary lines, a halfway line and center circle, and a simple white goal near the upper-center of the field with posts, crossbar, net lines and a dark goal mouth. Draw the player in the lower center: a simplified human figure with brown hair/skin, a blue home shirt with a white stripe and gold number 9, skin-colored arms, and dark blue legs. Draw the goalkeeper in front of the goal in a contrasting yellow shirt with black number 1, moving laterally across the goal. Keep the clean, flat-shaded, high-contrast arcade illustration style.

At startup, show the field dimmed under a translucent dark overlay and a centered rounded dark card. The card has a large white “Kickoff 27” heading, explanatory copy: “Rivertown FC’s Milo Santos steps up at Aurora Stadium. Aim for a corner, beat the keeper, and win the five-shot shootout.”, a wide green “START SHOOTOUT” button, and a small keyboard hint: “Keyboard: A / D / W to aim · Space to kick”. Starting the game removes the overlay and resets score, shot count, timer and power.

HUD during play: top-left show uppercase branding “KICKOFF 27” and the small team line “RIVERTOWN FC · #9 MILO SANTOS · AURORA STADIUM”. Top-right show a dark rounded scoreboard containing the score starting at “0 - 0”, a green “NORMAL” pill, a green “SHOT 1/5” pill, and a countdown timer starting at “00:30”. Center near the top display the instruction “Pick a corner. Beat the keeper.” or shot/result feedback. Near the bottom center show a thin rounded shot-power meter with a dark background and a left-to-right green/yellow/red gradient fill. Along the bottom, provide three dark buttons labeled “LEFT”, “CENTER”, and “RIGHT” on the left, and a large green “HOLD TO KICK” button on the right. Make controls work with both pointer/touch and keyboard.

Core controls and mechanics: the player’s aim is one of three horizontal target positions, represented internally as left (-1), center (0), or right (1). Clicking/touching LEFT, CENTER, RIGHT selects that target; keyboard A, W, D select left, center, right. While the player is in the ready phase, pressing and holding the large kick button or Space starts charging. The power meter continuously oscillates between approximately 8% and 100% while held, reversing direction at each limit; releasing launches the shot with the current power. The standard shot uses Space or the kick button and follows a straight dashed aiming trajectory from the player to the selected target in the goal.

Also support two alternate shot techniques from keyboard only: hold Enter for a curved shot (“CURVA · solte para bater” while charging; “CHUTE DE CURVA!” on launch), and hold X for a trivela (“TRIVELA · solte para bater” while charging; “TRIVELA!” on launch). The curved shot trajectory is a dashed quadratic curve with a smaller bend and a pale blue ball; the trivela has a larger bend and an orange-accented ball. The normal trajectory is pale yellow; curve is cyan; trivela is orange. Releasing Enter or X launches the corresponding shot. Prevent aiming or kicking while a shot is already in flight or during the brief result pause.

When kicked, animate the ball from the player toward the selected point on the goal over a short flight whose duration depends on power (roughly 0.36–0.78 seconds): higher power changes the duration according to the implementation, and the ball visibly travels along the straight, curved, or trivela path. At launch, randomly choose the goalkeeper’s target position across most of the goal and smoothly move the keeper toward it during flight. Resolve the shot at the goal: it is saved when the absolute difference between the player’s selected aim and the keeper target is less than about 0.28; otherwise it is a goal. Increment the score on a goal or conceded count on a save, and show “GOAL! Next shot.” or “SAVED! Try another corner.” for the result. Then after a short pause return to ready state with the next shot.

There are exactly five shots. Update the HUD shot indicator through SHOT 1/5 to SHOT 5/5. After the fifth result, stop the game and, after a short delay, show the overlay again with the heading “SHOOTOUT WON” if score is greater than conceded, otherwise “SHOOTOUT OVER”; show “Final score X - Y. Run it back and beat your best corner streak.” and change the button to “PLAY AGAIN”. The 30-second countdown runs during the shootout; when it reaches zero, end/resolve the current sequence so the shootout is over. Use polished rounded controls, subtle borders, shadows, responsive typography, and ensure the layout works on mobile and desktop without scrolling.