Whack-a-Mole Game UI

Whack-a-Mole is hilariously fun. We combine CSS transforms that move the mole “up” out of a hole with Javascript interval loops.

Pop-up Logic

const holes = document.querySelectorAll('.hole');

function randomHole(holes) {
  const idx = Math.floor(Math.random() * holes.length);
  return holes[idx];
}

function peep() {
  const time = Math.random() * 1000 + 200; // 200ms to 1200ms
  const hole = randomHole(holes);
  
  hole.classList.add('up');
  
  setTimeout(() => {
    hole.classList.remove('up');
    if(!timeUp) peep();
  }, time);
}

Try to beat 20 points in the Live Demo arcade!