Interactive Whack-A-Mole Game in JavaScript and CSS

80 0 Games TacoGamer Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Interactive Whack-A-Mole Game in JavaScript and CSS

CSS

body {
  font-family: 'Arial', sans-serif;
  text-align: center;
  background-color: #f0f8ff;
  margin: 0;
  padding: 20px;
}

h1 {
  color: #333;
}

.scoreboard {
  display: flex;
  justify-content: center;
  gap: 40px;
}

button {
  padding: 12px 24px;
  font-size: 18px;
  background-color: #ff4757;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 20px;
}

button:hover {
  background-color: #ff6b81;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 120px);
  grid-template-rows: repeat(3, 120px);
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
}

.hole {
  background-color: #747d8c;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 4px solid #2f3542;
  box-shadow: inset 0 10px 0 rgba(0,0,0,0.2);
}

.mole {
  font-size: 50px;
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: -100%; /* Hidden inside the hole initially */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: bottom 0.1s ease;
  user-select: none;
  cursor: pointer;
}

/* Class dynamically toggled by JavaScript */
.hole.up .mole {
  bottom: 0; 
}

const holes = document.querySelectorAll('.hole');
const scoreDisplay = document.querySelector('#score');
const timeLeftDisplay = document.querySelector('#time-left');
const startButton = document.querySelector('#start-btn');

let score = 0;
let timeLeft = 30;
let currentHole = null;
let gameInterval = null;
let countdownInterval = null;

// Returns a random hole element, ensuring it isn't the same hole twice in a row
function getRandomHole() {
  const index = Math.floor(Math.random() * holes.length);
  const hole = holes[index];
  if (hole === currentHole) {
    return getRandomHole();
  }
  currentHole = hole;
  return hole;
}

// Controls mole movement cycle
function popUpMole() {
  // Clear any existing active mole positions
  holes.forEach(hole => hole.classList.remove('up'));
  
  const hole = getRandomHole();
  hole.classList.add('up');
}

// Triggered when a mole is successfully whacked
function whackMole(e) {
  // Prevent simulated cheat clicks (e.isTrusted verifies it is a physical user click)
  if (!e.isTrusted) return; 
  
  if (this.parentNode.classList.contains('up')) {
    score++;
    scoreDisplay.textContent = score;
    this.parentNode.classList.remove('up'); // Hide the mole instantly on whack
  }
}

function startGame() {
  // Reset initial variables
  score = 0;
  timeLeft = 30;
  scoreDisplay.textContent = score;
  timeLeftDisplay.textContent = timeLeft;
  startButton.disabled = true;

// Clear previous timers if any exist
  clearInterval(gameInterval);
  clearInterval(countdownInterval);

// Core intervals for refreshing moles and countdown tracking
  gameInterval = setInterval(popUpMole, 800); // Moles switch every 800ms
  countdownInterval = setInterval(() => {
    timeLeft--;
    timeLeftDisplay.textContent = timeLeft;

if (timeLeft === 0) {
      clearInterval(gameInterval);
      clearInterval(countdownInterval);
      holes.forEach(hole => hole.classList.remove('up'));
      startButton.disabled = false;
      alert(`Game Over! Your final score is ${score}`);
    }
  }, 1000);
}

// Bind interactive actions
document.querySelectorAll('.mole').forEach(mole => {
  mole.addEventListener('click', whackMole);
});
startButton.addEventListener('click', startGame);

Comments 0

…

Interactive Whack-A-Mole Game in JavaScript and CSS

Recommended

Comments 0