What it is

Tap Animal is a self-contained single HTML file where the goal is simple: tap as fast as you can for 30 seconds. The faster you tap, the higher your taps-per-second (TPS) climbs, and the higher your animal evolves — from a sluggish snail through ten tiers up to a mythical phoenix. Each level shift triggers a visual burst, a sound chord, and a level-up animation overlay.

It supports 1-to-4 player split-screen mode. Each player gets their own area, animal, and TPS meter; the round runs for everyone simultaneously. A local leaderboard stores top scores per device.

How to open it

Level progression

Animals unlock at increasing TPS thresholds. Each tier has its own emoji, color theme, particle stream count, bonus point value, and chord notes for level-up audio. Reaching a new level mid-round triggers a "Level Up!" overlay with the new animal's name, recolors the player area's accent, and plays the chord.

Scoring formula

Final score is the sum of three components: total taps in the round, a peak TPS bonus (the highest one-second sample multiplied by a factor), and a highest-animal bonus (the static bonus value from the top tier reached). The peak TPS bonus rewards short bursts of speed; the total taps reward sustained effort; the animal bonus rewards efficiency early in the round so you can climb tiers fast.

TPS measurement

TPS is computed over a rolling 1-second window — every tap pushes a timestamp into an array, and on every render frame the array is trimmed to entries within the last 1000ms. The length of the trimmed array is the current TPS. Peak TPS is updated whenever current exceeds the previous peak.

This windowed approach gives instant responsive readings without the lag of an exponentially-weighted average. The drawback is jitter at low rates; cosmetic smoothing is applied to the displayed number but the underlying value used for level checks is raw.

Visual feedback systems

Technology stack

Multiplayer split-screen

1, 2, 3, or 4 player layouts use CSS Grid with dynamic row/column counts. Each player has an isolated state object (taps array, current size, current animal, peak TPS, level history) and isolated DOM area. The render loop walks all active players each frame and updates only their area.

Pointer events are scoped to player areas — a tap in player 1's area only counts for player 1. This makes couch multiplayer work intuitively: each person picks a quadrant and taps in their own zone.

Architecture overview

One CFG constant holds all tunable game values (base size, grow rate, idle threshold, round length, etc.). A LEVELS array holds the tier definitions. Player objects are created from a createPlayer(i) factory that returns a fresh state struct.

The main loop is a single requestAnimationFrame tick: trim each player's tap window, compute TPS, check for level changes, update animal size, advance projectile positions, redraw HUD. Round end is timer-driven — when roundSeconds elapses, the loop calls endRound() which freezes input and shows the result screen.

Audio uses a small tone(freq, duration, type, gain) helper that creates a fresh oscillator per note. Chords are arrays of frequencies played simultaneously. No audio buffers, no scheduling — every chord is built on the fly when a level is reached.