Rhythm Tap Game – Free HTML, CSS & JS Snippet with Combos

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 turning that closeness into a graded, satisfying result. This snippet is a four-lane falling-note rhythm game with no audio files and no libraries: requestAnimationFrame, delta-time movement, a nearest-note matching algorithm, a tiny Web Audio synth and a handful of CSS animations that make every hit feel good.

Falling notes with a rising difficulty curve

Every note is a small div inside its lane's track, advanced each frame by speed * dt, where dt is the real elapsed time since the previous frame. This is the same delta-time approach as the Flap & Dodge Obstacle Game, so fall speed is constant on any refresh rate. Both speed and the gap between spawns are interpolated from the share of notes already spawned, so a 40-note run starts gentle and ends fast. After the first quarter of the run, a spawn can also drop a second note in a different lane (a chord), and pickLane() never allows three notes in a row on the same lane.

Judging a hit: nearest note, graded by distance

When a lane is pressed, laneKeyDown() scans every unhit note in that lane and picks the one whose center is closest to the center of the hit line. Within GOOD_WINDOW it counts as a hit, and within the tighter PERFECT_WINDOW it becomes a Perfect. A note that slides past the window unhit is registered as a Miss on the next frame by the game loop. Pressing a lane with no note nearby is a harmless air tap.

Combo multiplier, heat and milestones

Every consecutive hit raises the combo, and each 10 hits raises the multiplier (up to x4), which scales the 100 or 50 points a Perfect or Good is worth. The multiplier badge bumps when it increases, the stage glow changes colour through a data-heat attribute, and combos of 10, 20, 30 and 40 trigger a callout and a short arpeggio. A Miss resets the combo, drops the multiplier back to x1 and shakes the stage.

Sound and juice, no assets required

Each lane is tuned to a note of a C major chord (C4, E4, G4, C5), and tone() plays it through an OscillatorNode and a GainNode with a quick decay, so every hit adds to a melody. Perfect hits add an octave sparkle, misses play a falling sawtooth, and a mute button turns everything off. Visual feedback comes from lane colours, a glow on the pressed lane, particle sparks created and removed per hit, and a 3-2-1-GO countdown.

Ending the run and ranking the player

The run ends when all 40 notes have been spawned and resolved. gradeFor() turns accuracy and the share of Perfects into an S, A, B, C or D rank, shown with the score, Perfect/Good/Miss breakdown and best combo. The best combo is saved to localStorage (inside a try/catch so it also works in sandboxed iframes), and a "New best combo!" line appears when it was beaten.