Whack-a-Mole Game — Free HTML CSS JS Snippet

Whack-a-Mole is a classic reflex game, and building a working version teaches a genuinely useful pattern: coordinating randomized, self-rescheduling timers with real-time user input while keeping a single source of truth for "what is clickable right now." This snippet implements the full loop in vanilla JavaScript — a 3x3 grid of holes, a mole that pops up at unpredictable intervals, a squash-hit animation on a successful click, a 30-second countdown, and a best score persisted with localStorage.

The self-rescheduling timer pattern

Rather than using setInterval on a fixed cadence, the game uses a recursive setTimeout chain via popRandomMole(). Each time a mole appears, two timers are scheduled: a hideTimeout that retracts the mole after a random 650-950ms "up" duration if it isn't clicked, and a moleTimeout that calls popRandomMole() again after a random 800-1200ms delay to bring up the next mole. This recursive-timeout approach is deliberately chosen over setInterval because each call can pick a fresh random delay — producing the unpredictable, non-metronomic rhythm that makes whack-a-mole feel alive rather than mechanical. Every timer handle (moleTimeout, hideTimeout, timerInterval) is stored in module-level variables specifically so endGame() can call clearTimeout/clearInterval on all three and guarantee no stray callback fires a mole after the round has ended.

Tracking "the one clickable mole" with a single reference

The game keeps exactly one variable, activeHole, pointing at the DOM element of whichever hole currently has its mole up. This is the crux of correct hit detection: whack(hole) only awards a point if the clicked hole strictly equals activeHole and that hole still carries the up class. Clicking an empty hole, clicking a hole whose mole already retracted, or clicking a stale reference after a new mole has appeared all fail this check safely. Before showing a new mole, popRandomMole() first retracts whatever activeHole currently is, so at most one mole is ever visible at a time, keeping the difficulty consistent and the click target unambiguous.

CSS-driven pop and squash animations

Each hole is a circular button with overflow: hidden and a radial-gradient dirt texture drawn purely in CSS — no image assets. The mole itself is an emoji positioned absolutely at the bottom of the hole with transform: translate(-50%, 100%) (fully hidden below the rim) by default. Adding the .up class transitions it to translate(-50%, 8%) using a bouncy cubic-bezier(0.34, 1.56, 0.64, 1) easing curve, which overshoots slightly for a satisfying spring-pop feel. A successful whack adds a .whacked class that triggers a squash keyframe animation — the mole briefly scales wide and flat (scaleX(1.3) scaleY(0.7)) at its midpoint before retracting, mimicking a comic "squash" impact frame.

Countdown, scoring, and persistent best score

A single setInterval ticking once per second drives the 30-second countdown, decrementing timeLeft and updating the DOM directly. When timeLeft reaches zero, endGame() stops all timers, hides any visible mole, and reveals the end screen with the final score. The best score is read from and written to localStorage under the key whack-a-mole-best — getBest() parses the stored string with a fallback to 0, and endGame() compares the current run's score against it, writing a new value and flashing a "New best score!" message only when the record is actually broken. This mirrors the persistence pattern used in the Word Guess Game, where session state is layered on top of a small localStorage-backed record.