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 browser-playable 2D side-view arcade fighting game titled “Street Clash,” rendered on a responsive HTML canvas using a fixed logical resolution of 1100x650 scaled to fit the viewport. Keep the game centered against a very dark background, and show a small fixed instruction hint at the bottom: “ARROWS move · A punch · S kick · D block · R restart”.

Gameplay: one player-controlled cyan fighter named YOU faces a pink/red CPU fighter named CPU in a single round. Place the player initially around x=285 and the CPU around x=815 on a horizontal street floor, with both fighters standing on the same baseline around y=485. The player can move left/right with the left and right arrow keys, and move more slowly while holding the down arrow (normal speed about 245 px/s, down speed about 175 px/s). Clamp both fighters horizontally between x=95 and x=1005. The player faces the direction of their latest horizontal movement; otherwise start facing the opponent. Press A to punch and S to kick. Attacks cannot begin while an attack/cooldown is active. A punch lasts roughly 0.3 seconds with a 0.34-second cooldown; a kick lasts roughly 0.42 seconds with a 0.5-second cooldown. Punch reach is 105 pixels and deals 9 damage; kick reach is 118 pixels and deals 13 damage. Attacks should only damage the opponent if within reach, and each hit should briefly flash the target and produce a small screen shake effect. Holding D makes the player block whenever they are not attacking: a block reduces punch damage to 1 and kick damage to 3, rather than fully negating it, and gives a small knockback instead of normal knockback. Blocking should be visibly represented by a raised yellow/cream arm.

Implement a simple CPU opponent. It automatically faces the player, walks toward them at about 115 px/s when more than 120 pixels away, and periodically acts when close. Its decision timer should reset to a random interval of about 0.45–1.10 seconds. When within about 135 pixels it should choose a punch about 58% of the time and otherwise kick, using the same action timings, reach, damage, cooldown, hit flash, knockback, and block reduction rules as the player. Occasionally (about 25% of decisions) it blocks for about 0.3 seconds instead. Stop gameplay when either fighter reaches zero health.

HUD: across the upper portion, draw a left health bar at logical x=60, y=70, width 360 and height 22 for YOU, and a mirrored right bar at x=680, y=70, width 360 and height 22 for CPU. Each bar has a dark backing, a bright fill proportional to health, a pale outline, and a bold label above it; the player bar is cyan (#20c8ff) and the CPU bar is hot pink/red (#ff426e). Put “VS” in white centered between them. Add “METRO DISTRICT // NIGHT FIGHT” in small bold yellow text near the upper-left and “ROUND 1” in muted lavender near the upper-right.

Visual style: minimalist flat vector/canvas art, neon colors, clean geometric silhouettes, and a dark purple-blue nighttime city. The background should be a vertical gradient from deep navy/purple at the top through dusky purple to near-black at the bottom. Behind the fighters, draw a muted purple city skyline of simple rectangular buildings with alternating dark blue-purple facades and small lavender window groups. Use a midground band around y=390–510, a dark street/foreground from y=510 to the bottom, a thin purple line marking the curb/ground at y=510, and short dark dashed road markings lower down. Fighters should be simple human stick/box figures: a round pale head, rectangular colored torso, two dark straight legs, small pale shoes, thick colored arms with rounded ends, and a soft black oval shadow under each. The player uses cyan clothing and a pale cyan-white head/accent; the CPU uses pink/red clothing and a pale pink-white head/accent. During a punch, extend an arm forward and show a small pale yellow fist; during a kick, extend one leg horizontally with a pale yellow foot/leg accent. Preserve left/right orientation by horizontally flipping the fighter drawing based on facing.

On defeat, overlay the entire scene with a translucent near-black screen. If the CPU reaches zero, show large mint text “KNOCKOUT”; if the player reaches zero, show large pink text “YOU GOT DROPPED”. Under it, show “Press R to run it back”. Pressing R resets both fighters to full 100 health, their starting positions, idle states, and clears the game-over state. Do not add score, lives, rounds beyond the displayed Round 1, weapons, projectiles, menus, or extra enemies.