Precision Aim Trainer Game — Free HTML CSS JS Snippet

An aim trainer is a genre of reflex game built around clicking small, often moving or shrinking targets as quickly and accurately as possible. This implementation spawns one target at a time inside a fixed arena, each shrinking visibly as it ages via a CSS keyframe animation, and rewards clicks that land early in a target's lifespan — while a stray click anywhere the target used to be, once it has fully shrunk away, resets a combo multiplier instead of scoring.

Why this differs from a reaction-time or click-speed test

A pure reaction-time tester measures a single interval between a stimulus and one click; a click-speed test measures raw clicks per second against no target at all. This game instead measures *spatial precision under a decaying time budget*: every target has a randomized lifespan (MIN_LIFE to MAX_LIFE milliseconds) during which it visually shrinks from full size to nearly nothing via an injected @keyframes target-shrink animation, and the score for a hit is directly proportional to how early — i.e., how large the target still was — when the click landed. This combines timing pressure with genuine point-and-click accuracy in a way neither a reaction tester nor a click-speed counter does.

Scoring: proportional to remaining life, multiplied by a combo streak

On a target click, performance.now() - born gives the target's exact age in milliseconds, converted to lifeFrac, the fraction of its lifespan remaining (1 for an instant hit, approaching 0 as it's about to expire). Base points scale from that fraction — Math.max(5, Math.round(10 + lifeFrac * 40)) — so a target hit the instant it spawns is worth up to five times more than one hit right before it disappears. Every successful hit also increments a combo multiplier (capped at 8x) that multiplies the base points for that hit and every subsequent one, so a run of consecutive successful hits compounds quickly, while any miss — clicking empty arena space, or a target expiring unclicked — resets combo back to 1x, punishing sloppy or panicked clicking.

Continuous spawning without overlap bugs

Rather than a fixed grid of possible positions, spawnTarget() picks a fully random x/y within the arena bounds (inset by half the target's own size so it never renders partially off-screen) and calls scheduleNextSpawn() at the end of every spawn, which queues the next target after a random 280-620ms delay — creating an unpredictable, continuously-refreshing stream of targets rather than a static pattern a player could memorize. An activeTargets Set tracks every currently-live target DOM node so that a click on a target already removed (e.g. by its own expiry timeout firing in the same tick as a click) is safely ignored via the activeTargets.has(target) guard, preventing double-scoring or errors from a race between the expiry timer and a click handler.

Score popups and a 30-second countdown

Every hit or miss spawns a small floating .popup element showing the exact points earned (green) or the word "miss" (red), animated upward and fading out via a CSS @keyframes pop-fade, giving immediate, readable feedback without interrupting play. A setInterval-driven countdown ticks timeLeft down from 30 seconds; when it reaches zero, endGame() clears all pending timers, removes any live targets, and rebuilds the overlay to show the final score with a "Play again" button, so a full round is always exactly 30 seconds regardless of how many targets were spawned or missed during it.