Web Runner

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 playable browser 3D third-person rooftop collection game titled “Web Runner.” Use Three.js or an equivalent real-time 3D engine with a dark navy night-sky background, fog, soft shadows, cool moonlight, blue ambient lighting, and a subtle blue point light that follows the player. Keep the camera in a third-person perspective, following and looking toward the player at roughly 6.5 units distance, with a moderately wide perspective view.

Build a compact rooftop skyline arena. The main floor is a large dark blue 24-by-24 rooftop slab, with four raised rectangular rooftop blocks arranged around it: one toward the back-left at approximately (-8, 1.5, -6), one back-right at (8, 2.5, -6), one front/left at (-8, 3.5, 7), and one front/right at (8, 1.5, 7). Give these blocks dark blue/purple materials with slightly metallic rough surfaces. Surround the playable rooftop area with tall stylized commercial skyscraper models or simple blocky buildings visible through the fog, placed around the four corners and sides, creating a nighttime city skyline without adding enemies or traffic.

The player is a small stylized superhero/avatar named Web Runner. Model them from simple primitive geometry: a blue suit torso, red chest/front section, red mask/head, red arms with blue hands, and blue legs. Add two small pale/white eye shapes on the mask and a small white outlined emblem on the chest. The character should cast a soft shadow. Start the player near (0, 0.05, 3). Support WASD and arrow-key movement, with Shift providing sprint, Space providing jumping, gravity, and collision/slope handling appropriate for the rooftop blocks. The player should face the direction of movement.

Place exactly eight collectible rooftop beacons at these world positions: (-8, 4.2, -6), (8, 6, -6), (-8, 7, 7), (8, 4.2, 7), (-2, 1.2, -8), (3, 1.2, -7), (-6, 1.2, 4), and (6, 1.2, 4). Each beacon is a small glowing cyan/light-blue faceted orb with a thin horizontal luminous ring around it. Make the beacons slowly rotate and gently bob vertically. When the player comes within approximately 1.05 world units, collect the beacon, hide it, and increment the collection count. There are no combat systems, enemies, hazards, lives, or timers; the sole objective is to collect all eight beacons.

Add a one-shot “Web Burst” movement ability activated by clicking/tapping a large circular lower-right HUD button, and also by pressing E. The burst should propel the player about 2.4 units in the direction the character is facing, slightly upward, and briefly create a bright white-blue web/beam line extending about 7 units forward that fades away quickly. It is a mobility burst, not an attack, and should not damage anything. The button should visibly press/scale down while activated and have a glossy radial blue gradient, white border, and blue glow, with the label “WEB” over “BURST.”

Create a fixed dark HUD layered over the 3D view. At top-left show “WEB RUNNER” in bold uppercase with wide letter spacing, and beneath it “Collect the rooftop beacons.” At top-right show “BEACONS 0 / 8,” updating as beacons are collected. Along the lower-left show the controls text: “WASD / arrows move · Shift sprint · Space jump · click Web Burst”. At startup, show a centered translucent dark rounded rectangular instruction banner with a subtle light border and blur: heading “Rooftop patrol” and subtitle “Move through the skyline and collect every beacon.” Keep this banner visible for about four seconds, then hide it unless all beacons have been collected. Upon collecting all eight, show the centered banner again with heading “Skyline clear” and subtitle “Every beacon is yours — keep moving.” Use a clean system sans-serif style, white headings, muted periwinkle instructional text, and a restrained neon-blue/cyan palette matching the night scene. Ensure the game fills the viewport, supports touch interaction for the burst button, and prevents page scrolling.