Grid 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, touch-friendly 2D browser game titled “GRID CLASH.” It is an auto-battling army-builder played on a split rectangular grid. Use a clean, bright, minimal UI with system sans-serif typography, rounded white panels, pale blue page background, and flat canvas graphics.

Layout: Make the page fill the viewport vertically. Add a white top bar with BLUE on the left (small blue circular dot), the centered title “GRID CLASH” in bold, and RED on the right (small red dot). Under the title show the subtitle “Tap a unit, then tap a side to deploy”. The main arena should fill most of the remaining space with a rounded white canvas. At the bottom, show a six-column unit shop and an action row containing CLEAR, a centered live count such as “0 vs 0,” and a large green START BATTLE button. Overlay a small translucent white pill near the top center of the arena for instructions/status.

Arena: Render a 2D top-down battlefield with a vertical center line. The left half is very pale blue and labeled “BLUE SIDE” in blue at the top; the right half is very pale pink and labeled “RED SIDE” in red. Draw a light grid across the arena: ten vertical columns overall and six horizontal rows, with a slightly stronger central divider. Keep the arena responsive and resize the canvas to its displayed dimensions. The player selects a unit from the shop, then taps either half of the arena to deploy it to that team’s side. Placement snaps to one of six horizontal rows: blue units appear near the far left edge and red units near the far right edge, with a small random horizontal offset. Only one unit per side may occupy each row; if a row is occupied, display “That row is occupied — choose another row.” Do not allow placement during battle or without a selected unit.

Shop units: Provide six selectable buttons with the shown icon, name, and ability text. Ballers use a filled dot icon, 100 HP, blue unit outline color, 10 damage, 34 range, 0.75 second cooldown, and a 22% chance for an attack to deal 35 damage instead. Display “10 dmg / chance 35”. Bombers use a ✹ icon, 75 HP, orange outline, 20 range and 2.3 second cooldown; they have no normal projectile and explode when they contact an enemy within about 22 pixels, dealing 1000 area damage to enemies within 44 pixels, then self-destructing. Display “impact 1000 dmg”. Swordmans use a ⚔ icon, 105 HP, gray outline, melee range 28, 0.9 second cooldown, and deal a random 40–100 melee damage. Display “40–100 dmg”. ROCKETEERS use a 🚀 icon, 100 HP, purple outline, 155 range and 1.55 second cooldown; fire a visible rocket projectile for 500 damage and on impact deal another 500 damage to nearby enemies within 48 pixels of the target. Display “explosive 500 dmg”. Color Fighters use a 🎨 icon, 100 HP, green outline, 125 range and 2 second cooldown; fire a paint projectile that deals no damage but stuns the target for 1.3 seconds. Display “paint stun”. Slingshootters use a small ∿/⌁ icon, 100 HP, teal outline, 220 range and 0.18 second cooldown; fire rapid projectiles for random 1–4 damage. Display “fast 1–4 dmg”.

Visual units: Represent every deployed unit as an 18-pixel-radius circle filled solid blue on the left team or solid red on the right team, with a 4-pixel stroke in that unit type’s distinctive color and the unit icon in white at its center. Draw a dark HP bar above each unit, with a team-colored fill proportional to remaining HP. Flash the unit white briefly when hit. Stunned units should be semi-transparent and show a small yellow sparkle/star near them. Use small colored square particles for hits and larger bursts for deaths, explosions, and stuns. Draw ordinary projectiles as tiny colored circles; rockets as larger purple circles with an orange trail.

Battle behavior: When START BATTLE is pressed with at least one unit, switch the hint to “Battle in progress — units fight automatically,” change the button text to “BATTLE RUNNING,” clear the shop selection, and run the battle automatically. Each living unit finds the nearest living enemy. If outside its type’s range, it advances horizontally toward the enemy: blue moves right and red moves left; regular units move about 25 pixels per second and Slingshootters move about 36 pixels per second. If in range and its cooldown is ready, it attacks. Melee attacks apply damage immediately; ranged attacks create homing projectiles that travel toward their target. Do not let stunned units move or attack. Remove dead units from active combat while retaining death particles. Update the bottom count continuously as living blue versus living red units.

End state: As soon as one side has no living units, stop the battle, set the winner to BLUE or RED, and show “BLUE WINS — tap CLEAR to build another battle” or the corresponding red message. Change the start button to “BATTLE COMPLETE.” CLEAR must remove all units, projectiles, particles, and battle state, reset the hint to “Build your army before the battle,” reset the count to “0 vs 0,” and return the button to “START BATTLE.” Use pointer/touch input as well as mouse input, prevent canvas scrolling while interacting, and keep the polished responsive layout usable on narrow mobile screens.