DEV Community

Devanshu Biswas
Devanshu Biswas

Posted on

I Built Whac-a-Mole in Vanilla JS (Timers + Random Spawns)

Whac-a-Mole is the classic reaction game — and a tidy lesson in timers, randomness, and game state. Here's a playable build in vanilla JS, no libraries.

🔨 Play it (30 seconds on the clock): https://dev48v.infy.uk/game/day16-whack-a-mole.html

The board is just state

Nine holes. Each frame of the game, a mole pops up in a random empty hole and stays up for a short window before ducking back down. Click it in time → score + combo.

The spawn loop

A self-rescheduling setTimeout picks a free hole, shows a mole, and sets a hide timer. The trick is avoiding double-spawns: track which holes are occupied and only pick from free ones.

Difficulty that ramps

As the 30-second timer ticks down, shorten both the spawn delay and the "up" window. Same game, rising pressure — that's what makes arcade games feel relentless.

Combos + best score

Each consecutive hit builds a combo; a miss resets it. Persist the best score to localStorage so it survives reloads.

🔨 Full build (grid → spawn loop → show/hide → whack + score → countdown → ramp) on the page: https://dev48v.infy.uk/game/day16-whack-a-mole.html

Part of GameFromZero. 🌐 https://dev48v.infy.uk

Top comments (0)