Reaction Time Tester Game — Free HTML CSS JS Snippet

Reaction time testers are a small, self-contained game mechanic that shows up everywhere from neuroscience research tools to mobile app stores full of "test your reflexes" apps. The core loop is simple to describe but easy to get subtly wrong: show a waiting state, switch to a "go" state after an unpredictable delay, measure the time between that switch and the user's click, and correctly reject clicks that happen too early. This snippet implements the full loop in vanilla JavaScript using a finite state machine and the high-resolution performance.now() timing API, avoiding the millisecond-level inaccuracy that Date.now() can introduce under system clock adjustments.

Why a finite state machine keeps the logic correct

The entire game is driven by a single state variable that can only be one of five values: idle, waiting, ready, early, or result. Every click on the panel routes through one handlePanelClick() dispatcher that checks the current state and decides what should happen — starting a new round from idle, early, or result; registering an early-click failure from waiting; or registering a valid reaction time from ready. This explicit state machine is what makes the "click too soon" detection reliable: a click is only ever counted as a valid reaction if the state is exactly ready, which is only set the instant the randomized delay's setTimeout callback fires. Any click before that point necessarily happens while state === 'waiting', so it is unambiguously routed to the early-click failure path instead.

Randomizing the delay to prevent anticipation

If the wait period before the panel turns green were a fixed duration, users would quickly learn to time their click rather than genuinely react to the color change, defeating the purpose of the test. randomDelay() returns a value between 1500ms and 4000ms using 1500 + Math.random() * 2500, so every round has an unpredictable wait length within a comfortable testing window — long enough to prevent rhythm-based guessing, short enough that the test does not feel tedious. This delay is passed directly into a setTimeout, and the returned timeout ID is stored so it can be cancelled with clearTimeout() if the user clicks early, preventing a stray "go" state from firing after the round has already ended in failure.

Precise timing with performance.now()

The moment the panel switches to its green "go" state, goTime = performance.now() captures a high-resolution timestamp — sub-millisecond precision that is not subject to system clock changes, unlike Date.now(). When the user clicks during the ready state, registerReaction() computes Math.round(performance.now() - goTime) to get the reaction time in whole milliseconds. This is the same timing API used by browser performance profiling tools and is the correct choice any time you need to measure a short, precise interval in client-side JavaScript rather than wall-clock time.

Rating labels and best-time tracking

Every completed round is scored against four rating bands via ratingLabel(): under 200ms is "Lightning fast" (near the limit of typical human visual-motor reaction time), 200-300ms is "Great", 300-400ms is "Average", and anything slower is "Keep practicing" — bands roughly informed by published human reaction-time research, where average simple visual reaction time clusters around 200-300ms. A running bestMs variable, scoped outside any single round, tracks the lowest (fastest) reaction time recorded across the whole session, updating only when a new result beats the existing record via a simple if (bestMs === null || reactionMs < bestMs) check. An attempts counter increments on every completed valid round (early-click failures are intentionally excluded from the attempts count and do not affect the best time), giving the user a running sense of how many genuine attempts they have made.

CSS state-driven visual feedback

Each of the five states maps to its own CSS class (.state-idle, .state-wait, .state-go, .state-early, .state-result) applied to the panel via a single panel.className reassignment in setPanelState(), so the background gradient, and by extension the entire visual mood of the game, updates atomically with the state transition. The go state additionally triggers a brief go-pulse scale keyframe animation, giving the color switch a tactile "snap" that reinforces the moment the user needs to react to.