Side Street

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 local 1v1 fighting game titled “Side Street,” using Three.js from a CDN/global build and Tone.js from a CDN/global build, with no build step. Render the game full-screen on a canvas with a fixed HTML/CSS overlay HUD.

Gameplay: place two simple stylized 3D fighters in a compact side-on alley arena. Player 1 starts on the left at x=-4.2 and Player 2 starts on the right at x=4.2. Each has 100 HP. Fighters automatically face their opponent, cannot overlap closer than about 1.15 world units, and are constrained to the horizontal stage bounds from about -11.5 to 11.5. The goal is to reduce the opponent’s HP to zero. When either fighter reaches zero, stop gameplay and show a centered winner banner: “P1 Wins — Press R”, “P2 Wins — Press R”, or “Double KO — Press R”. Press R at any time to reset the round, restore both health bars to full, return fighters to their starting positions, clear velocities/attacks/stun, and hide the banner.

Controls must support two simultaneous keyboard players. P1: A/D move left/right, W jump, F punch, G kick, S block. P2: Left/Right Arrow move, Up Arrow jump, K punch, L kick, Down Arrow block. Prevent arrow keys and Space from scrolling the page. Jump is a physics jump with gravity, only from the floor. Use acceleration/friction movement, approximately 5.8 maximum horizontal speed normally and 3.2 while blocking. Stunned players have reduced steering.

Combat must be timing- and facing-based. Punch is a quick light attack with roughly 8 damage, 1.45 range, 6.2 knockback, active around 0.06–0.16 seconds, and a roughly 0.22-second attack duration/cooldown. Kick is slower/heavier with roughly 14 damage, 1.75 range, 9 knockback, active around 0.10–0.24 seconds, and roughly 0.34-second duration/cooldown. An attack can hit only once, only during its active window, only when the attacker faces the opponent, when horizontal distance is in range, and when vertical separation is no more than about 1.2. Punch should animate the white glove extending forward; kick should animate the black shoe extending forward. Blocking reduces incoming damage to 20% (rounded up), reduces knockback to 35%, and briefly stuns the blocker; blocking works only when the defender is facing the attacker. Normal hits briefly stun and flash the defender. Apply knockback horizontally away from the attacker.

Make each fighter from simple low-detail 3D primitives: a capsule body, sphere head, white spherical glove, and small black rectangular shoe, with shadows. P1 should use a bright mint/green body and blue head; P2 should use a hot pink/red body and yellow head. Keep the presentation as a readable side-view fighter rather than a top-down or first-person view. Use a perspective camera positioned roughly at (0, 4.2, 13.5), looking toward y=2.2, z=0, with subtle camera follow toward the midpoint of the fighters and zooming slightly farther out as they separate.

Build the arena as a gritty, realistic wet urban alley at night from procedural canvas grunge textures rather than external art assets. Use a dark asphalt floor roughly 26 by 10 units, with a glossy transparent wetness layer and scattered irregular puddle patches. Surround it with a dark rear wall and side walls textured with grime, streaks, speckles, stains, and cracks. Include a worn greenish dumpster on the left rear, a round steam vent near it with subtle animated translucent sprite wisps that rise, expand, drift, and fade, and scattered pale paper scraps on the ground. Include a dark metal pole and warm sodium-colored street lamp on the left, plus a worn door on the right rear with a harsh cool-white fluorescent tube above it and a cool point light. Add a dingy warning sign on the rear wall. Use fog in the dark blue-black background, a cool hemisphere light, a directional light with soft shadows, warm/cool practical lights, and subtle fluorescent flicker. Materials should be rough and weathered except for glossy puddles (low roughness, clearcoat).

HUD: overlay the 3D scene with a top bar. On the far left show “P1” and a horizontal rounded health bar; on the far right show a mirrored “P2” and health bar. Bars start full and shrink as HP decreases, with a vivid green-to-yellow gradient and a faint translucent dark backing/outline. Center the top area with the status text “Click or press any key to enable sound” initially, changing to “Sound enabled” once the user clicks or presses a key and Tone.js starts. Beneath it show small control instructions exactly along the lines of: “P1: A/D move, W jump, F punch, G kick, S block”, “P2: ←/→ move, ↑ jump, K punch, L kick, ↓ block”, and “R: restart”. Show the round result in a centered translucent dark rounded banner with white uppercase/emphasized text.

Use synthesized Tone.js sound effects, enabled only after a click or keydown: a short triangle synth note for jump, a higher light-hit note for punch, a lower longer heavy-hit note for kick, a block note, and a membrane/drum-like low KO sound. Keep the overall visual style dark, gritty, wet, atmospheric, and readable, with no external image assets.