Whack-A-MoleLoading saved progress…

Whack-A-Mole

Build the arcade game: a mole pops up in a random hole, and clicking it before it disappears scores a point. The mechanics are tiny — one piece of state for which hole the mole is in, a setInterval that relocates it on a timer, and a click handler that scores only when you hit the right hole.

Signature

// A self-contained component. No props.
function App(): JSX.Element;

A grid of holes, a score, and a mole that jumps around.

Examples

mole at hole 4 → click hole 4 → score +1, mole jumps elsewhere
mole at hole 4 → click hole 1 → nothing (missed)
every ~800ms with no click, the mole moves to a new random hole

Notes

  • One mole index. Track which hole the mole is in; a hole shows the mole when its index matches.
  • Interval relocates it. setInterval in an effect; clear it on unmount so it doesn't leak.
  • Score on hit only. Clicking the mole's hole scores and moves it; an empty hole does nothing.
  • Out of scope. A countdown timer, difficulty ramp, multiple moles — single mole, endless play.
Loading editor…
Loading preview…