Shadow 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 responsive full-screen 2D canvas fighting game titled “Shadow Clash,” designed primarily for portrait mobile screens but scaling to any viewport. Use a dark neon arcade aesthetic: a vertical gradient background from nearly black navy at the top through deep indigo to very dark near-black at the bottom, with a dark floor beginning around 68% of the screen height. Draw a blue-purple perspective wireframe arena floor: a vanishing point at the horizontal center on the floor horizon, about 12 lines radiating from it to the bottom edge, plus one horizontal floor line around 82% screen height. Put a faint, centered “SHADOW CLASH” title near the top.

The game is a one-round duel between two simple stylized stick/shape fighters. The player is Ryuun, cyan/blue, initially at 29% of screen width; the opponent is Vexa, hot pink/red, initially at 71% width. Both stand on the floor and automatically face the other fighter. Each character consists of a circular head, a small pale horizontal visor/slit across the face, a solid polygonal torso, thick rounded stick arms and legs, and a dark oval shadow beneath them. Ryuun’s accent is pale cyan; Vexa’s accent is pale pink. The fighters should be roughly 40–50 pixels wide at a typical portrait size and use a scale based on the smaller viewport dimension. Support a simple jump with vertical motion and gravity, so fighters visibly rise above the floor and land again. While attacking, extend the forward arm and draw a yellow/orange curved strike arc; while guarding, draw a small white curved shield arc in front of the fighter. On taking a hit, briefly shake the character.

At the top HUD, show two horizontal health bars, each 35% of viewport width and 18 pixels high. Ryuun’s bar is on the left at 7% width and fills from left to right in cyan; Vexa’s bar is on the right at 58% width and fills from right to left in pink/red. Use a dark interior, a subtle translucent white outline, and start both at 100 health. Place the names above the bars: “Ryuun” left-aligned above the left bar and “Vexa” right-aligned above the right bar. Damage should visibly shorten the corresponding bar.

Core gameplay is a close-range side-view fighting duel. Keep each fighter’s normalized horizontal position clamped between 12% and 88% of the screen. The player can move left/right, jump, attack, and guard. Keyboard controls: A or Left Arrow moves left, D or Right Arrow moves right, W or Up Arrow or Space jumps, J or Z attacks, and K or X guards. Provide touch controls along the bottom in five outlined translucent circles: left arrow around 10% width, right arrow around 25%, up arrow around 40%, “HIT” around 72%, and “GUARD” around 90%, all around 90% screen height. Touching/holding the corresponding circles activates those actions; make the canvas prevent browser scrolling and use pointer events.

Attacks are short timed actions lasting about 0.28 seconds. Resolve the hit once during the attack’s active window, approximately 0.12–0.20 seconds after starting. A close-range attack reaches roughly 0.115 normalized units forward, with a hit area about 0.13 wide and 0.15 high; it hits if the target is within roughly 0.12 horizontal units and 0.18 vertical units around the torso. A normal hit removes 12 health, produces a brief white screen flash, a small camera shake, pushes the target backward, and emits around 10 small golden impact particles. A guarded hit removes only 5 health, has weaker knockback and shake, and emits pale/white particles. Prevent repeated damage from one attack. Fighters should not overlap: if they get closer than about 0.09 normalized units, separate them to opposite sides of a small gap.

The opponent Vexa is AI-controlled. She moves toward Ryuun until within about 0.17 normalized units, then slows, occasionally attacks, and occasionally guards. She should also occasionally jump. Ryuun and Vexa automatically turn to face one another. Apply light horizontal friction when no movement input is held, gravity around 2.6 units per second squared, and a jump impulse around 0.85–0.95. Fighter states should visually/behaviorally distinguish idle, walk, jump, attack, block, and hit.

Animate impact particles as small colored circles that drift and fade, and use a brief full-screen white flash on successful contact. When either health value reaches zero, stop the round and overlay a translucent near-black panel over the whole scene. Center a large white victory message reading “[winner name] VENCEU” and below it the instruction “Toque na tela ou pressione R para revanche.” Tapping the screen after the round or pressing R resets both fighters to their starting positions and restores both health bars to 100. Keep the game continuously animated with requestAnimationFrame and cap the timestep for stable gameplay. Make the entire presentation clean, minimal, neon, and arcade-like, with no extra menus, score systems, weapons, stages, or features beyond this single duel.