Street Clash

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 game titled "Street Clash": a clean arcade-style 2D one-on-one fighting game rendered on a full-screen canvas with HTML/CSS HUD overlays. Use a side-view, flat 2D arena: a dark blue-to-nearly-black evening gradient sky, a simple translucent city/building silhouette in the background, and a dark street floor across the bottom with a thin horizon line and repeating pale lane-mark rectangles. Keep the camera fixed and show the whole combat area.

Start in a character-select screen over the arena. Center a dark translucent panel with the title "Street Clash", the subtitle "Choose your fighter — the CPU will pick one too.", and three selectable fighter cards in a responsive row/grid. Cards show a large color gradient swatch, fighter name, special move, style description, speed, and health. The selected card has a yellow border and slightly highlighted background. The three fighters and exact stats are:
- Blaze: warm coral/orange body with yellow accent; special Fireball; description "Balanced brawler with a fast fireball."; speed 255; health 110; punch damage 8, kick damage 13, special cooldown 1.1 seconds.
- Volt: blue body with lime/yellow accent; special Lightning Rush; description "Quick striker with a lightning rush dash."; speed 285; health 98; punch damage 7, kick damage 11, special cooldown 1.5 seconds.
- Glacier: cyan/light-blue body with pale ice accent; special Ice Lance; description "Tankier fighter who freezes with an ice lance."; speed 235; health 120; punch damage 7, kick damage 12, special cooldown 1.65 seconds.
Below the cards show the chosen fighter summary and a prominent "Start Fight" button. Starting a match randomly chooses a CPU fighter from the two fighters other than the player's choice. The select state has a top HUD showing Player and CPU health bars, center text "Character Select", and an infinity timer.

In a match, hide the selection panel and place the player's fighter around 28% of the screen width and CPU opponent around 72%, both standing on the arena floor and facing one another. Fighters should be simple stylized geometric figures, not detailed sprites: a colored rectangular torso, two rectangular legs, short rectangular arms, and a circular head filled with the fighter's accent color, with a dark visor/face stripe. Draw a soft oval shadow under each fighter. Use the fighter's facing direction to mirror the figure. During attacks, show a colored rectangular hit-attack extension in front of the fighter; use a bright greenish extension during Volt's Lightning Rush.

The top HUD during combat must show a left Player name and orange-to-red health bar, a centered "Round 1" and a large countdown timer starting at 60 seconds, and a right CPU name and blue health bar. Health bars shrink as damage is taken. Show a temporary centered dark message banner for announcements such as "Fight!" and special-move notifications.

Core controls and rules: A or Left Arrow moves left; D or Right Arrow moves right; W, Up Arrow, or Space jumps; F punches; G kicks; H uses the fighter's special. Movement is horizontal, jumping uses gravity and a single grounded jump, fighters cannot leave the screen, and fighters are kept from overlapping. Punch and kick attacks are short active hitboxes in front of the character with punch reach about 72 and kick reach about 94; punch cooldown is about 0.28 seconds and kick cooldown about 0.45 seconds. Hits reduce health, briefly stun the target, push them backward, flash them white, and create a brief expanding white ring hit effect. A fighter cannot attack while in hit stun or frozen.

Implement the distinct specials exactly as visible in the mechanics: Blaze launches a glowing orange fireball projectile horizontally, dealing 18 damage with a brief hit stun and disappearing after roughly 1.5 seconds or on impact. Glacier launches a larger pale-blue ice lance/projectile, dealing 16 damage, briefly stunning and freezing the opponent for about 0.7 seconds, with roughly 1.7 seconds of lifetime. Volt performs a fast forward lightning rush/dash for about 0.22 seconds, with a bright lime flash/effect and a forward hitbox dealing 20 damage and briefly stunning the opponent. Specials are limited by their fighter-specific cooldowns. Projectiles should glow and be drawn as colored circles; impacts should create expanding ring effects.

The CPU automatically faces the player, approaches when farther than about 110 pixels, slows when close, attacks with punch/kick at close range, sometimes uses its special at mid-range, and occasionally jumps. End the round immediately when either health reaches zero with "You Win!" or "CPU Wins!". If the 60-second timer reaches zero, award the result to the fighter with more remaining health, or show "Draw!" if equal. On the result state keep the fighters/arena visible, change the center HUD to "Finish" and timer to 0, and show a centered dark result panel saying the outcome and "Press rematch or go back to fighter select." Include "Rematch" and "Character Select" buttons. Rematch resets health, positions, timer, effects and projectiles, and randomly picks a new CPU fighter. Character Select returns to the selection panel. Also support R as a keyboard rematch shortcut on the result screen.

Support touch/mobile play with on-screen controls near the bottom: left, right, and jump buttons on the left side, plus Punch, Kick, and Special buttons on the right; left/right/jump are hold controls and attacks trigger on press. On wide desktop screens these mobile controls may be hidden. Use responsive dark translucent panels, white bold typography, yellow selected-card accent, blue action buttons, and rounded translucent circular touch buttons. The overall visual style should remain minimalist, high-contrast, geometric, and arcade-like, matching the dark city street backdrop.