Quick Tap

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 single-screen, full-viewport 2D canvas reaction game titled "Quick Tap" with the author blurb/goal: "top the ball as fast as you can". The game should use a dark navy vertical-gradient background, from approximately #17243a at the top to #0b1020 at the bottom, overlaid with a subtle square grid of thin translucent white lines spaced about 42 pixels apart. Use a clean modern system-sans-serif UI with bright cyan, blue, mint, and warm warning accents.

Game flow has three screens/states. On the start screen, center the large cyan heading "QUICK TAP" around 28% of the viewport height, followed by the subtitle "Tap the circle as many times as you can" around 38% height. Show a wide blue rounded rectangular START button (about 220x60 pixels, radius 18) around 53% height, with white bold text. Below it around 67% height, show the persistent high score as "Best: 0" initially. A pointer/touch tap anywhere on this screen starts the game; pressing Space or Enter should also start it.

When play begins, reset the score to 0 and give the player exactly 20 seconds. Place a circular cyan target at a random position in the viewport. Keep it within a safe margin: horizontal padding is the larger of 48 pixels or 12% of the smaller viewport dimension, and vertically it should be between y=120 and approximately height-70 (the implementation uses a 120 + random range based on height-190). The target radius should be responsive, clamped between 26 and 44 pixels, normally about 7.5% of the smaller viewport dimension. Render a soft translucent cyan halo about 10 pixels larger than the target, a solid bright cyan circle (#4dd9ff), and a small pale highlight spot toward its upper-left. The target is stationary until successfully tapped, then immediately relocates randomly to another valid position.

At the top of the play screen, show "SCORE  0" (or the current score) in white, left-aligned around x=22 and y=32, and the remaining time on the right around x=width-22, formatted as a rounded-up whole number followed by "s". Use mint text while five or more seconds remain and red/pink text when under five seconds. Under this HUD, draw a thin rounded time bar from x=22 to width-22 at y=54, with a translucent white empty track and a mint filled portion proportional to timeLeft/20; turn the fill red/pink during the final five seconds.

The core interaction is rapid pointer/touch tapping: during play, a tap increments the score only if its coordinates fall inside the target circle (distance from target center is no greater than the target radius), then the target relocates. Missed taps do nothing and do not penalize the player. There are no enemies, obstacles, lives, ammunition, movement, or other power-ups. The timer continuously counts down using real elapsed time and should end the game at zero after roughly 20 seconds.

On timeout, show the game-over screen with the same dark grid background. Center the warm yellow heading "TIME!" around 28% height, then "You tapped N times" around 39% height. Show a blue rounded PLAY AGAIN button about 240x60 around 53% height and a "Best: N" label around 67% height. Update and persist the best score in local storage whenever the current score exceeds it. A tap anywhere on the game-over screen, or Space/Enter, should reset and start a new 20-second round. Make the canvas responsive to window resizing and support both mouse and touch/pointer input. The UI should occupy the whole browser viewport with no scrolling. Optionally add very short, quiet sine-wave feedback tones: a start tone, a rising pitch per successful tap, and a lower tone on timeout, without making audio necessary for play.