Hoop Drift

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, touch-friendly 2D arcade basketball game titled “Hoop Drift,” with the subtitle “tiny shots, easy vibes.” Use a full-screen HTML canvas with a dark navy, subtly atmospheric background: a vertical gradient from bluish navy at the top to very dark navy at the bottom, sparse softly glowing star/dot specks, and a darker court/floor band across the lower roughly 18% of the screen. Add a thin floor line, subtle short court markings, and a faint semicircular court arc. The visual style should be clean, polished, minimal, and cozy, with rounded UI and bright pastel accents rather than realistic graphics.

Gameplay is one-shot-at-a-time basketball aiming. Place an orange basketball near the lower-left, around 18% of the screen width and just above the floor. Place a basketball hoop on the right, around 72% of the screen width and approximately 23% of the screen height above the floor. Draw the hoop as a pastel gold/orange elliptical rim with a small white net hanging below it, mounted to a pale backboard support on the right. The ball is a filled colored circle with simple dark curved basketball seam lines, a faint landing shadow when resting, and a short fading colored trail while in flight.

The player starts a shot by pressing/touching near the ball, dragging outward, and releasing. Show a dashed aiming line from the ball toward the current pointer position, ending around 72% of the drag distance, with a small percentage power label. Convert the drag vector into ball velocity, clamping the drag length between 40 and 260 pixels; use gravity around 760 pixels per second squared. Dragging toward the hoop controls horizontal aim, and if the resulting vertical velocity is not sufficiently upward, force it into an upward arc so normal pulls can still launch the ball. After release, animate the ball with gravity and collision physics until it leaves the play area or settles, then reset it after a short delay for another shot.

Make the floor live: when the ball hits the floor, it can bounce up to three times if its speed is high enough, losing vertical energy (about 58%) and horizontal speed (about 22%) each bounce. Update the bottom hint during saves with messages such as “Bounce! You can still save it.” and “One more bounce...”; otherwise reset the streak when the attempt ends. Make the rim physically collide with the ball and kick it back, allowing bank shots, and make the backboard support collide with shots traveling into it and reflect them leftward. Show a hint such as “The floor and rim are live — bank shots work.” during a flight and “Clang! Use the rim for a bank shot.” after rim contact.

A shot scores when the descending ball crosses the hoop opening: its center is within roughly 72% of the rim radius horizontally, within about 18 pixels vertically of rim height, and its vertical velocity is positive. Prevent double scoring for one shot. On a score, add 3 to Score, add 3 plus a streak bonus capped at 5 to Points, increment Streak, and track Best Streak. Trigger a colorful burst of about 32 small square particles around the hoop, using the active skin’s accent/trail colors. Show a large temporary animated toast near the upper center: “+3 SWISH” for a normal shot, “✦ +3 ✦” for a star-style choice, “3 POINTS!” for another choice, or “+N COMBO” when the streak is greater than 2. The toast should pop in, remain briefly, then fade and rise.

Build a fixed overlay HUD above the canvas. At top left show bold “HOOP DRIFT” and the small muted subtitle “tiny shots, easy vibes.” At top right show rounded dark translucent pills for “Score” with a gold number, “Points” with a gold number, and “Streak” with a gold number. At the bottom left show instructional text initially reading “Drag from the ball toward the hoop, then let go.” At the bottom right provide a dark secondary rounded “Skins” button and a light primary rounded “New run” button. Keep the HUD readable on mobile and respect safe-area insets.

The Skins button opens a centered dark translucent modal called “Ball locker,” with the explanatory line “Spend points on original colors and shot trails.” Display a responsive three-column grid of rounded skin cards. Each card has a circular color swatch, the skin name, its status/cost, and an action button. Include exactly these skins and colors/costs: Sunset (free/default; orange ball #ff8a4c, gold accent #ffd166, orange trail), Mint Pop (25 points; mint ball #62e6c8), Berry Jam (60 points; pink-purple ball #e779ff), Ice Float (100 points; light blue ball #7db7ff), Gold Rush (180 points; gold ball #ffd166), and Galaxy (300 points; violet ball #a98bff). Let owned skins be equipped, let sufficient Points unlock and equip a skin, visibly mark the active card, and include a rounded “Close” button. Use the selected skin for the ball, rim accent, trail, particles, and success effects.

The New run button should reset Score and Streak and place the ball back at its starting position while preserving accumulated Points and unlocked skins. Persist Score, Points, Streak, Best Streak, active skin, unlocked skins, and the selected animation/toast choice in browser local storage so the game survives reloads. Ensure pointer/touch interaction is disabled while the skin modal is open, support pointer capture during aiming, and keep the canvas filling the viewport without scrolling or text selection.