Vector Fall

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 full-screen 2D canvas arcade puzzle game titled “Vector Fall.” Use a dark navy-to-blue diagonal gradient background with a subtle 40px square grid. The playfield fills the browser viewport with no scrolling. Place a small white glowing orb at the exact center at the start of each round; it has a cyan triangular pointer inside that rotates to indicate the current gravity direction. The orb has radius about 15px and starts stationary.

The core mechanic is click/tap-to-steer gravity: when the player clicks or taps anywhere on the canvas, calculate the direction from the orb’s current position toward that pointer location and make gravity point in that normalized direction. Continuously accelerate the orb in that direction (strong acceleration, approximately 820 pixels/second squared), apply slight velocity drag, and move it with frame-rate-independent physics. The orb should keep drifting until another click changes gravity. Clicking the bottom-right Restart button must reset the round; clicking the canvas after game over should also reset it.

Build one fixed level containing exactly 12 collectible golden five-point stars, arranged at these normalized viewport positions: (18%,22%), (49%,18%), (82%,25%), (25%,52%), (73%,49%), (48%,74%), (14%,80%), (87%,76%), (35%,34%), (64%,31%), (35%,84%), and (65%,86%). Each star is about 8px radius, bright yellow with a glow, gently pulsing and rotating. When the orb comes within roughly orb radius + star radius + 3px, collect the star, remove it, increase the score, and update the best score saved persistently in local storage. The orb must avoid the four glowing blue rectangular walls: a horizontal wall at x=12% of the smaller viewport dimension, y=36% viewport height, width=26% viewport width and thickness 18px; a horizontal wall at x=62% viewport width, y=62% viewport height, width=25% viewport width and thickness 18px; a vertical wall at x=42% viewport width, y=30% viewport height, thickness 18px and height=18% viewport height; and a vertical wall at x=52% viewport width, y=68% viewport height, thickness 18px and height=16% viewport height. Use circle-versus-rectangle collision. The orb dies if it touches a wall or goes within its radius of any viewport edge. There is no bouncing.

The HUD should be HTML/CSS layered over the canvas. At top-left show a rounded translucent dark panel with thin pale-blue border, the uppercase spaced title “VECTOR FALL,” and the instruction “Click anywhere — gravity points there.” At top-right show “Stars: 0 / 12 • Best: 0” in bold cyan, updating the collected count and persistent best. At bottom center show “Guide the orb through the stars. Avoid the walls.” At bottom-right show a prominent rounded blue “Restart” button. Add a small cyan gravity-direction arrow near the bottom-right of the canvas, just left/above the restart area: a line with arrowhead pointing in the current gravity direction, initially downward. Keep the HUD responsive and preserve the clean layout on both mouse and touch devices.

Render the level in a polished minimalist neon/vector style: walls are dark blue (#234b66) rectangles with cyan glow, stars are luminous gold, and the orb is white with a cyan glow and cyan pointer. On death, keep the world visible under a translucent dark overlay and center the messages: show “Gravity won this round” if the orb hit an edge or wall, or “Orbit complete!” if all 12 stars were collected, followed by “Tap Restart or click to try a new route.” Stop movement and hide the orb after game over. The player wins immediately when all stars are collected, and the HUD should retain the final score.