Penalty Shootout

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 browser-based 3D penalty shootout game titled “Penalty Shootout,” using a Three.js-style WebGL scene and a full-screen responsive canvas. Use a fixed third-person perspective from behind the kicker, looking down a green soccer field toward a goal in the distance. Set the camera initially around position (0, 2.9, 7.8), with a roughly 62-degree perspective view aimed toward the goal; subtly move the camera forward/backward to follow the ball after it is kicked.

Scene and visual style: use a simple low-poly/blocky arcade aesthetic with a blue sky-colored background and matching light fog, a large flat green grass plane, directional sunlight plus hemisphere lighting, and visible shadows. Add scattered low-poly grass props around the field edges. Mark the field with thin white penalty-area lines: two side lines, a front line, smaller goal-box lines, and a white penalty spot at the ball’s starting location. At the far end, build a dark goal frame with two cylindrical black/dark posts and a horizontal crossbar, approximately 4.6 units wide and 2.55 units high, positioned around z=-10.05. Draw a simple pale gray wireframe net behind/in the goal using horizontal and vertical lines.

Actors and starting layout: load/use a small blue soccer ball, scaled visibly large enough to read clearly, initially on the penalty spot at approximately (0, 0.11, 2.1). Use two identical stylized blocky humanoid characters: a goalkeeper in front of the goal at approximately (0, 0.9, -9.55), facing the shooter, and a shooter behind the ball at approximately (0, 0, 3.15), facing the goal. Give both an idle animation if the character asset supports animations. When the shot begins, play the shooter’s right-foot kick attack animation once, then return to idle after roughly 720 ms.

Core interaction: make the game touch/pointer friendly and disable browser touch gestures on the canvas. The player aims and kicks by pressing and dragging/swiping on the canvas, then releasing. A swipe shorter than 18 pixels does nothing. Before the shot, show a temporary thin yellow/gold aim line from the ball in the dragged direction. Convert horizontal swipe distance into left/right ball velocity and vertical swipe distance into lift: stronger swipes produce more power, clamped to a maximum based on swipe length; minimum kick power should still be substantial. The ball launches toward the goal with forward velocity, gravity, ground bounce, friction, and basic post collision. Specifically, apply downward gravity, keep the ball at about y=0.11 when it reaches the ground, reverse and damp its vertical velocity on bounce, and reduce horizontal/forward velocity slightly on bounce. Stop the ball if it becomes slow before reaching the goal.

After the ball is kicked, additional swipes control the goalkeeper rather than the ball. While the shot is still active and the ball has not yet crossed the goal, convert the swipe into a goalkeeper dive/jump target: move the keeper horizontally and vertically toward a clamped target, with x limited to approximately -2.1 to 2.1 and y limited to 0.55 to 2.35. Smoothly interpolate the keeper toward that target, briefly lean the keeper based on the horizontal dive direction, and gradually return the lean upright. Ignore keeper-control swipes after the result is decided or once the ball is too close/past the goal.

Goal resolution: when a forward-moving ball crosses the goal plane around z=-9.85, check whether its x is between about -2.2 and 2.2 and y is between 0.1 and 2.42. Shots outside that opening are misses. For a ball inside the opening, compare the ball to the current keeper position; if the 2D distance is less than about 1.35, the keeper saves it. Otherwise award a goal. Include simple collisions with the two goal posts that reflect and damp the ball. On a goal, stop the ball and show the message “GOAL!”; on a save show “SAVED!” and give the ball a small rebound away from the goal; on an out-of-bounds/over-or-under shot show “MISSED!” and damp/reverse it. After approximately 1.65 seconds, reset the shot: return the ball to the penalty spot, reset the goalkeeper to center, clear velocity and result flags, hide the aim line and result message, and return both characters to idle.

HUD and rules display: place a white text HUD in the upper-left with a subtle dark text shadow showing exactly “Goals: 0 / 0” initially, where the first number is successful goals and the second is total kick attempts. Increment attempts when a valid kick is released and increment goals only on successful shots. Near the bottom center, show a large bold yellow result message (“GOAL!”, “SAVED!”, or “MISSED!”) only when a shot resolves, with a shadow and fade/visibility behavior. Also show a small light-gray rounded dark translucent instruction pill at the bottom center reading exactly “Swipe to kick • Swipe after kick to dive keeper”. At startup, briefly show the yellow message “Swipe to kick!” for about 1.4 seconds unless the player begins a kick. Keep the interface minimal and overlayed above the 3D view.