Rhythm Tap Game — Free HTML CSS JS Snippet

Rhythm games boil down to one core mechanic done well: judging how close a player's input is to a moving target in time, then translating that closeness into a graded result. This snippet implements a genuine four-lane falling-note rhythm game — no audio library, no timing engine dependency, just requestAnimationFrame, delta-time movement, and a nearest-note matching algorithm that decides what counts as a Perfect, a Good, or a Miss.

Falling notes driven by delta time

Every note is a small div absolutely positioned inside its lane's track, spawned at spawnNote() with a starting y of roughly -24px (just above the visible stage). Each frame of the game loop advances every unhit note's y position by NOTE_SPEED * dt, where dt is the real elapsed seconds since the previous frame — exactly the same delta-time approach used in the Flap & Dodge Obstacle Game snippet — so notes fall at a constant real-world speed no matter the device's refresh rate. Notes are spawned into a random lane on a fixed real-time interval (SPAWN_INTERVAL) up to a total of TOTAL_NOTES, giving the run a simple but genuine fixed pattern without needing an actual audio track to sync against.

Judging a hit: nearest note, distance-based grading

When a lane's key is pressed, laneKeyDown() does not simply check "is any note near the line" — it scans every unhit note currently in that lane and finds the one whose vertical distance from the hit line is smallest, because more than one note could theoretically be near the line in a dense pattern. If that closest note's distance falls within GOOD_WINDOW pixels, it counts as a hit; if it falls within the tighter PERFECT_WINDOW, it is upgraded to a Perfect. This two-tier distance check is the same principle every rhythm game from arcade cabinets to mobile hits uses, just expressed in pixels-from-the-line instead of milliseconds-from-the-beat, since this snippet is deliberately visual-timing-only rather than audio-synced.

Combo streaks and score weighting

A successful hit increments a combo counter and both Perfect and Good hits scale their score reward by the current combo (100 + combo * 2 for Perfect, 50 + combo for Good), rewarding sustained accuracy the way real rhythm games do. Missing — whether by a note scrolling past the hit line unhit, tracked in the game loop as note.y > hitLineY + GOOD_WINDOW + NOTE_HEIGHT, or simply never pressing the right key in time — resets combo back to zero immediately, breaking the streak. The best combo achieved is compared against the running value on every successful hit and persisted to localStorage the moment a new record is set, so it survives page reloads.

Ending the run and reporting accuracy

The run considers itself finished once notesSpawned reaches TOTAL_NOTES and the notes array is empty (meaning every spawned note has either been hit or has scrolled past and been counted as a miss). endRun() then computes a simple accuracy percentage from hits divided by total judged notes and renders a summary breaking down Perfect, Good, and Miss counts alongside the final score and best combo — giving the player a clear, honest readout of how the run actually went rather than just a single number.