Marble 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 2D top-down arcade game titled “Marble Clash.” Use a full-screen dark navy game area (up to about 1100×760) with an HTML canvas arena and an overlaid HUD. The arena should have a deep blue/purple gradient background, a thin glowing bluish rectangular border inset roughly 22px from the edges, and a subtle square grid inside the border at about 40px spacing.

There are exactly two playable entities: two glossy, glowing circular marbles, each approximately 28px radius. The player marble is named Azure and is cyan/blue; the opponent marble is named Ember and is pink/red-orange. Render each marble with a radial gradient: a bright accent highlight near its upper-left, saturated team color around the body, dark navy shading at the outer/lower edge, a small white specular spot, a pale outline, and a colored glow/shadow. Briefly intensify the glow on collision.

Start Azure near 28% of the arena width and 50% of its height, with velocity approximately (170,-105). Start Ember near 72% width and 50% height, with velocity approximately (-150,120). Both marbles move with continuous velocity and bounce off the inset arena boundaries; they must remain within the border, accounting for their radius. The player controls Azure using WASD or the arrow keys. Apply acceleration while a direction is held, normalize diagonal input, add drag/friction, and cap Azure’s speed around 250. Also provide large on-screen touch buttons in a two-row directional-pad layout at bottom-left: up centered on the first row, then left/down/right on the second row. The buttons should work with pointer/touch press and release and visually darken while pressed.

Ember is AI-controlled. Each update, steer it toward Azure by accelerating in the direction from Ember to Azure, cap its speed around 210, then move it with the same wall-bounce behavior. When the two marbles overlap, separate them along their collision normal. Use their relative velocity along that normal to produce a physical-looking impulse/deflection. For a positive impact, deal the same collision damage to both marbles: damage is approximately the relative impact speed multiplied by 0.075, rounded and clamped between 2 and 14. Reduce each health value from 100 to 0, briefly flash/intensify both marble glows, and end the match as soon as either health reaches zero. There are no weapons, projectiles, pickups, rounds, score display, lives, or additional enemies.

At the top overlay, show two translucent dark rounded cards: Player / Azure on the upper-left and Opponent / Ember on the upper-right. Each card contains a colored horizontal health bar initially at 100%; Azure’s bar uses a cyan/blue gradient and Ember’s uses a pink-to-orange gradient. The HUD should not block gameplay. At the bottom center, show a pill-shaped hint reading “Move Azure with WASD / arrows — collisions deal damage.”

When the match ends, stop simulation updates but continue rendering. Display a centered dark translucent rounded message: “Azure wins! Press R to rematch” or “Ember wins! Press R to rematch”; if both health values reach zero at the same collision, display “Double knockout!” Instead change the bottom hint to “The last marble standing wins.” Press R to reset both marbles, restore both health bars to 100%, clear the result message, restore the original velocities/positions relative to the current arena size, and resume play. Make the layout responsive and support high-DPI canvas rendering while preserving the polished dark neon arcade aesthetic shown in the reference.