Word 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-based 2D side-view fighting game titled “Word Clash,” rendered responsively on a full-window canvas. The game should use a clean, colorful, flat cartoon style with no external images: a soft teal-to-green vertical gradient background, pale translucent grouped cloud circles high in the sky, rounded dark-green shrub silhouettes along the horizon, and a dark green arena floor with subtle diagonal stripe marks. Keep the camera fixed and show the entire small arena.

The flow is a menu followed by one best-of-one round. On the menu, dim the background with a dark translucent overlay and center the white title “WORD CLASH,” the subtitle “Language-learning mascots. Tiny arena. Big vocabulary.”, a bright lime-green rounded rectangular “PRESS ENTER” button, and the line “Keyboard fighter • best of one round.” Start when Enter is pressed. After the match, show a dark overlay with either “VERBA WINS!”, “SYNTAX WINS!”, or “DRAW,” plus “Press R to rematch.” R should reset/restart the round from any state.

The playable scene is a simple 2D fighter duel. The player character is Verba, starting around 27% of the viewport width, facing right. The CPU opponent is Syntax, starting around 73% width, facing left. Both are friendly language-learning mascot creatures built from rounded shapes: a colored rounded body, two short darker legs, a large circular head, darker curved/top accent, big white eyes with dark pupils, a small yellow diamond-like beak/nose, and a smiling curved mouth. Verba is bright green with a darker green accent; Syntax is orange with a dark orange accent. Draw a soft oval shadow below each character. Mirror each mascot horizontally according to its facing direction. Use bright white attack arcs in front of fighters, a larger yellow/white special effect, a pale yellow curved shield arc while blocking, and small colored/white/yellow particle bursts on hits and specials.

Implement the core fight rules exactly as follows. Both fighters have 100 HP, an energy meter from 0 to 100, basic horizontal movement, jumping, attacks, hit stun, blocking, and simple gravity. The floor is approximately 78% of the viewport height. Movement is acceleration-based with horizontal speed limits; the player uses A to move left and D to move right, W to jump, and S to block while grounded and not attacking. The player faces the direction of movement. J performs a light attack, K performs a heavy attack, and L performs a special attack. Attacks cannot start while already attacking or hurt. Light attacks last about 0.24 seconds, deal 8 damage, and hit within roughly 110 pixels in front. Heavy attacks last about 0.36 seconds, deal 15 damage, and hit within the same roughly 110-pixel range. Specials last about 0.58 seconds, deal 28 damage, reach roughly 190 pixels, require a full 100 energy meter, consume all energy, create a large colored flash/particle burst, and knock the target back more strongly. Successful light/heavy hits add 8/16 energy respectively; special attacks do not add energy when activated. A hit also causes a short hurt state, horizontal knockback, and a small upward impulse. A grounded blocking target takes no damage and produces a pale impact burst; otherwise damage reduces HP to zero. Keep fighters constrained inside the arena.

The opponent Syntax should be CPU-controlled. It should face toward Verba, approach when farther than about 115 pixels, and when close periodically choose attacks on a roughly 0.35–0.8 second timer: use a special sometimes when fully charged, heavy sometimes, otherwise light. It may intermittently block when near the player. It should use the same attack, hit, energy, movement, and physics rules as the player.

Display a combat HUD during play: a green HP bar labeled “VERBA” at the upper left, an orange HP bar labeled “SYNTAX” at the upper right, a centered countdown timer starting at 60 seconds, and “WORD CLASH” beneath the timer. Put a yellow ENERGY bar beneath each fighter’s HP bar, with the player’s left-aligned and the enemy’s right-aligned. End the round when either HP reaches zero or the 60-second timer expires; the higher remaining HP wins, equal HP is a draw. The on-screen control strip should remain visible at the bottom in a white rounded pill with dark text: “Move: A / D   Jump: W   Light: J   Heavy: K   Special: L   Block: S   Restart: R.” Make the layout responsive to different viewport sizes and prevent page scrolling; keyboard input should work globally and clear on window blur.