Beat 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 single-screen rhythm game titled “Beat Clash,” playable in a browser. Use a dark purple/indigo arcade aesthetic: the full viewport has a deep #171529 background with a subtle radial gradient that is lighter near the upper center. Use a compact header about 72px tall with a thin translucent divider; show “BEAT CLASH” at upper left in bold yellow uppercase lettering with letter spacing and a purple offset shadow, and show a bold white HUD at upper right reading “SCORE 000000 · COMBO 0.”

The central play stage should fill the remaining vertical space between header and controls. Center a play arena no wider than about 720px, with faint translucent side borders and four equal vertical lanes separated by very subtle grid lines. Each lane is 25% wide. At the lower portion of each lane, place a large empty outlined target square with rounded corners (roughly 19% of arena width, around 4px outline, soft glow), colored respectively cyan, green, pink, and yellow from left to right. Put the arrow glyphs inside targets in the same colors: left arrow, down arrow, up arrow, right arrow. The target row sits approximately 74px above the bottom of the arena. When a lane is pressed, give that lane a faint white active background.

At the bottom of the page, provide four wide, rounded rectangular touch buttons aligned with the four lanes, with a small gap between them. Color them cyan, bright green, hot pink, and pale yellow, and label them with ←, ↓, ↑, → in dark purple/ink. Buttons should visibly press down and brighten when held. Add a small centered hint beneath them: “Keyboard: A S W D or arrow keys · Tap the buttons on mobile”. Keep the layout responsive, with buttons constrained to the arena width on larger screens and usable on mobile.

Gameplay: initially show a centered overlay in the arena around the upper-middle reading “PRESS START” in very large bold white text with a pink/purple offset shadow, and below it “Hit the arrows on beat” in smaller muted lavender text. The game starts on the first keyboard or touch/button press, hides this overlay, resets score and combo, and briefly displays a large animated “GO!” judgement.

Run the rhythm at 112 BPM (one beat is about 536ms). Spawn notes on each beat using this repeating 12-beat pattern of lane indices: [0], [1], [2], [3], [0,2], [1,3], [0], [3], [2], [1], [0,1], [2,3]. Lane 0 is left, lane 1 down, lane 2 up, lane 3 right. Notes are colored solid versions of their lane colors, are rounded squares a little smaller than targets, contain the corresponding dark arrow glyph, and have a dark drop shadow plus colored glow. They travel vertically upward from below the arena toward the target row at a constant speed synchronized to the beat (the implementation can represent vertical position in pixels from the bottom; the target timing coordinate is 74). Notes should be removed if they pass roughly 26px beyond the target timing point.

Accept either arrow keys or letter keys: ArrowLeft/A for left, ArrowDown/S for down, ArrowUp/W for up, ArrowRight/D for right. Also accept the matching on-screen buttons. On a press, choose the nearest unhit note in that lane. It is hittable only within 18px of the target timing coordinate. Award timing judgements and points based on absolute timing difference: under 6px = PERFECT for 350 points, under 12px = GREAT for 200 points, otherwise GOOD for 100 points. Add 10 bonus points per existing combo to the award, then increment combo. Remove the hit note and show an animated, briefly appearing judgement near the upper stage: PERFECT, GREAT, or GOOD in yellow with a shadow. An invalid or mistimed press shows MISS in pink, resets combo to zero, and increments misses. Notes that pass the hit window automatically count as MISS, reset combo, increment misses, and show the same pink judgement. The HUD must update continuously as “SCORE” with six-digit zero padding, a centered dot, and “COMBO” count. There are no lives, health bar, timer, weapons, enemies, or additional menus; the core challenge is timing the four lanes to the beat. Use crisp flat shapes, high contrast neon colors, restrained glow, and bold arcade typography.