Web Slinger

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 third-person traversal game titled “Web Slinger” using Three.js. The player is a small humanoid in a nearly black Spider-Man-like suit, viewed from behind and slightly above by a smooth trailing perspective camera (about 8 units behind, 4.5 units above); the camera follows the avatar and looks toward its upper body. Use a dark nighttime/blue-black city presentation: deep navy background and fog, a large dark gray ground plane, subdued cool ambient lighting plus a warm directional sun, soft cast shadows when enabled, and a sparse forward line of narrow commercial skyscraper models. Place six buildings down the route, alternating to either side of the z-axis at approximately (-8,-55), (6,-25), (-4,5), (9,35), (-11,65), and (3,95), with varied heights around 3–6 units; use darkened low-poly commercial skyscraper assets with window/detail geometry when available, and simple blue-gray rectangular placeholders while assets load. The player starts around (0,35,-55), moving forward along +Z with a small initial velocity, and the distance score measures forward progress from the starting z position. Show the player’s movement animation and orient the body in its horizontal movement direction, with a slight body tilt while swinging.

The core mechanic is aiming and slinging a web to buildings. Display a small white circular crosshair at the center. On the first left click, request mouse pointer lock for aiming; while locked, mouse movement rotates yaw and pitch, with pitch clamped to a practical upward/downward range. A subsequent left click raycasts from just above/in front of the player along the camera view direction, biased slightly upward, and attaches to the first building hit. Draw a thin dark web line from the player’s upper body to the exact hit point and keep it visible while attached. Holding the left mouse button continues the swing; releasing it detaches without an extra impulse. While attached, simulate a taut spring-rope constraint: if the player exceeds the original web length, pull back toward the anchor with high stiffness, apply reduced gravity, and permit strong air steering. Limit maximum swing velocity. WASD steers relative to the camera yaw: W forward, S backward/reduced reverse, A/D left/right. When not attached, apply full gravity, weaker air control, and air friction. Space jumps when free (give a strong upward velocity), and while webbed it releases the web and adds an outward/toward-anchor impulse plus an upward boost. Include simple collision handling against visible buildings: side impacts bounce/dampen velocity and reposition the player outside the building; catch the player on the ground around y=2 with a small bounce, and reset to the start if they fall below the world. Press R to reset position, velocity, web state, and distance.

Use a compact HUD over the 3D scene. At upper left show bright green monospace text “DIST: 0m” (updating to the greatest forward distance in meters). At upper right show a black translucent rounded panel labeled “Quality:” with Low, Med, and High buttons; Med is selected initially. Low/Med/High should change renderer pixel ratio, shadow enablement/quality, fog distance, and number of visible buildings: Low uses no shadows, shorter fog, and 4 buildings; Med uses soft 512-sized shadows, medium fog, and 5; High uses soft 1024-sized shadows, longest fog, and all 6. At the bottom center show a black translucent rounded instruction panel with the text: “Click to aim & lock mouse • Left-click to sling web • Hold to swing • Space to jump/release • WASD to steer”. Keep the canvas full-screen, hide overflow, and make the quality controls clickable above the canvas. Use the dark, low-contrast, atmospheric visual style shown, with the HUD remaining crisp and readable over the dim scene.