Whack-a-Mole Game GAME CODE HTML CSS AND JAVASCRIPT ► MacroNepal

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Whack-a-Mole Game</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { display: flex; justify-content: center; align-items: center; height: 100vh; font-family: Arial, sans-serif; background: #222; color: #fff; flex-direction: column; }
  #gameContainer { display: grid; grid-template-columns: repeat(3, 100px); gap: 10px; margin-top: 20px; }
  .hole { width: 100px; height: 100px; background: #333; position: relative; border-radius: 10px; overflow: hidden; }
  .mole { width: 80px; height: 80px; background: #e74c3c; border-radius: 50%; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); transition: all 0.2s ease; cursor: pointer; box-shadow: 0px 0px 10px rgba(255, 0, 0, 0.8); }
  .hole.active .mole { top: 10px; }
  #scoreboard, #timer, #level { font-size: 18px; margin: 10px 0; }
  .level-button { background: #3498db; border: none; padding: 10px 20px; color: white; cursor: pointer; border-radius: 5px; margin: 5px; }
  .level-button:hover { background: #2980b9; }
  #startButton { background: #27ae60; border: none; padding: 10px 20px; color: white; cursor: pointer; border-radius: 5px; margin-top: 10px; }
  #startButton:hover { background: #2ecc71; }
</style>
</head>
<body>

<h1>Whack-a-Mole Game</h1>
<div id="scoreboard">Score: 0</div>
<div id="timer">Time: 30</div>
<div id="level">Level: <button class="level-button" onclick="setLevel(1)">Easy</button> <button class="level-button" onclick="setLevel(2)">Medium</button> <button class="level-button" onclick="setLevel(3)">Hard</button></div>
<button id="startButton" onclick="startGame()">Start Game</button>

<div id="gameContainer">
  <div class="hole"><div class="mole"></div></div>
  <div class="hole"><div class="mole"></div></div>
  <div class="hole"><div class="mole"></div></div>
  <div class="hole"><div class="mole"></div></div>
  <div class="hole"><div class="mole"></div></div>
  <div class="hole"><div class="mole"></div></div>
  <div class="hole"><div class="mole"></div></div>
  <div class="hole"><div class="mole"></div></div>
  <div class="hole"><div class="mole"></div></div>
</div>

<script>
  let score = 0;
  let timeLeft = 30;
  let level = 1;
  let gameInterval;
  let moleInterval;
  
  function setLevel(selectedLevel) {
    level = selectedLevel;
    document.getElementById("level").innerText = `Level: ${level === 1 ? 'Easy' : level === 2 ? 'Medium' : 'Hard'}`;
  }

  function startGame() {
    score = 0;
    timeLeft = 30;
    updateScore();
    updateTime();
    clearInterval(gameInterval);
    clearInterval(moleInterval);
    document.getElementById("startButton").disabled = true;
    gameInterval = setInterval(() => {
      timeLeft--;
      updateTime();
      if (timeLeft <= 0) {
        endGame();
      }
    }, 1000);
    moleInterval = setInterval(showMole, level === 1 ? 1200 : level === 2 ? 800 : 500);
  }

  function showMole() {
    const holes = document.querySelectorAll(".hole");
    holes.forEach(hole => hole.classList.remove("active"));
    const randomHole = holes[Math.floor(Math.random() * holes.length)];
    randomHole.classList.add("active");
    randomHole.querySelector(".mole").onclick = hitMole;
  }

  function hitMole() {
    score++;
    updateScore();
    this.parentElement.classList.remove("active");
  }

  function updateScore() {
    document.getElementById("scoreboard").innerText = `Score: ${score}`;
  }

  function updateTime() {
    document.getElementById("timer").innerText = `Time: ${timeLeft}`;
  }

  function endGame() {
    clearInterval(gameInterval);
    clearInterval(moleInterval);
    document.getElementById("startButton").disabled = false;
    alert(`Game Over! Your final score is ${score}.`);
  }
</script>

</body>
</html>

HTML

Share this:

Leave a Reply Cancel reply