Beat Clicker

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 browser rhythm clicker game titled “Beat Clicker,” matching the supplied dark neon arcade visual style. Use a deep navy/purple page background with a subtle radial glow, a centered layout capped around 680px wide, and a large white title. Under the title show the subtitle: “Click on the beat. Miss 10 and the show is over.”

Layout: beneath the header, show three equal stat cards labeled SCORE, TIME, and MISSES. Use translucent dark-purple cards with rounded corners, thin pale borders, muted lavender labels, and large white values. The game arena should fill most of the remaining vertical space, with a rounded 28px border, dark purple gradient interior, soft inset glow, and decorative blurred pink circle partially off the upper-right corner plus a cyan circle partially off the lower-left corner. At the bottom outside the arena, show persistent achievement badges on the left and a bright cyan rounded “Start Game” button on the right.

Inside the arena, place centered top status text. Before play it reads “Ready?” with the hint “Press Start, then tap the beat button.” During play use status “Find the rhythm” and hint “Tap BEAT when the ring tightens.” In the center, create a large circular pink/magenta BEAT button, with a radial highlight, darker lower edge, pink glow, and a subtle shrinking press animation. It must be disabled before a game begins and after game over. Around it, display a thin cyan circular pulse/ring that repeatedly expands and contracts. Above the button show a cyan countdown: when waiting, display the seconds until the next beat; when a beat is active, display the remaining hit window, changing to “NOW!” near the end. Also place two decorative emoji tiles (music note and drum) to either side of the central zone; they are dim and tilted normally, then brighten, straighten, enlarge, and gain gold borders/glow while a beat is active. Show feedback text near the bottom of the arena such as “Nice hit!”, “3 beat streak!”, “Too early — wait for the ring!”, badge unlock messages, or event messages.

Core rules and controls: clicking/tapping the BEAT button, pressing Space, or pressing Enter attempts a hit. The Start Game button starts or restarts a run; Space/Enter also starts a game if one is not running. Each run lasts 60 seconds, with an initial score of 0, misses of 0, combo of 0, and normal rhythm. Beats occur every 850ms. Each beat becomes available for a 420ms hit window. A successful hit increments score by 1 normally, increments the combo, clears the active beat, and gives positive feedback. A click before the beat is ready does not score and displays the too-early warning. If a beat’s 420ms window expires, count one miss, reset combo, briefly flash the pulse border pink/red, and clear the beat. If a new beat arrives while the previous one is still ready, count the previous one as missed. End the run when the timer reaches zero or misses reach 10; show the reason (“Time is up” or “Too many missed beats”), disable the beat button, show “Final score: [score] · Best: [best]”, and offer a “Play Again” button. Track and display time to one decimal place and misses as “current / 10.”

Add timed gameplay events every 20 seconds. At each event randomly choose an event different from the current event from: Blackout, Double Score, Slow Beat, or Rush Beat. Display a prominent rounded event banner near the top of the arena with the current event and a countdown to the next event, and display a message describing the event. Blackout hides the countdown and emoji pictures and changes the beat button to a cyan radial appearance, while all timing and interaction rules continue. Double Score makes each successful hit worth 2 points. Slow Beat changes the beat interval to 1150ms. Rush Beat changes it to 560ms. Normal rhythm uses the 850ms interval and one point per hit. The event banner should say, for example, “Event: Double Score — every hit is worth 2 · 19.8s”; when no special event is active show the next-event countdown.

Persist the best score in localStorage under a beat-clicker-best key and persist unlocked badges under beat-clicker-badges. Award and display gold pill badges when score reaches 10 (“🏅 Warm Up · 10”), 25 (“🏅 On Fire · 25”), 50 (“🏅 Beat Master · 50”), and 75 (“🏅 Legend · 75”). Previously earned badges remain visible across games and reloads. If a new score exceeds the previous best and is above zero, show “New high score!”; otherwise on game over show “Try to keep the beat next time.”

Keep the presentation clean and touch-friendly: use system sans-serif typography, high-contrast white text, muted lavender secondary text, cyan controls, hot-pink beat visuals, gold ready-state accents, rounded cards and buttons, and prevent page scrolling. Make the layout responsive for narrow mobile screens, with the arena and beat circle scaling to fit the viewport. Include accessible live text for stats and event feedback, but do not add gameplay systems, enemies, levels, audio, or scenery beyond the described interface and mechanics.