How to Make whack-a-mole Game with HTML, CSS, Javascript

Creating an engaging Whack-a-Mole game is a fun way to improve your skills in HTML, CSS, and JavaScript. This tutorial will walk you through the steps to build a Whack-a-Mole game where the player earns points by clicking on moles that appear randomly on the screen. However, be careful! If you click on the red ball, it's game over!

Step 1: HTML Structure

Begin by setting up the basic HTML structure. You'll need a container for the game area, and elements for the moles and red ball:

<!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>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="game-container">
    <h1>Whack-a-Mole!</h1>
    <div class="score-board">
      <span style="font-size: 30px; font-weight: 600;">Score: <span id="score">0</span></span>
    </div>
    <div class="grid">
      <div class="hole" id="hole1"></div>
      <div class="hole" id="hole2"></div>
      <div class="hole" id="hole3"></div>
      <div class="hole" id="hole4"></div>
      <div class="hole" id="hole5"></div>
      <div class="hole" id="hole6"></div>
      <div class="hole" id="hole7"></div>
      <div class="hole" id="hole8"></div>
      <div class="hole" id="hole9"></div>
    </div>
    <button id="start-button">Start Game</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

Step 2: CSS Styling

Use CSS to style the game area and make it visually appealing. The game area should have a grid layout, with each cell serving as a spot where a mole or red ball can appear:


body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #010101;
    background-image: url(mario-bg2.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
}

.game-container {
    text-align: center;
    width: 600px;
    background-color: white;
    border-radius: 10px;
    padding-bottom: 20px;
}

h1 {
    color: #333;
    margin-bottom: 20px;
}

.score-board {
    font-size: 1.5em;
    margin-bottom: 20px;
}

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

.hole {
    width: 140px;
    height: 140px;
    background-color: #e1e1e1;
    border: 5px solid rgb(255, 150, 29);
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.mole {
    width: 100px;
    height: 100px;
    background-color: #f39d1200;
    border-radius: 50%;
    position: absolute;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    transition: bottom 0.3s ease-in-out;
}

.hole.up .mole {
    bottom: 10px;
}

#start-button {
    padding: 10px 20px;
    font-size: 1em;
    background-color: #27ae60;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
    font-weight: 600;
}

#start-button:hover {
    background-color: #2ecc71;
}
.red-ball {
    width: 100px;
    height: 100px;
    background-color: #e74d3c00;
    /* border-radius: 50%; */
    position: absolute;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    transition: bottom 0.3s ease-in-out;
}

.hole.up .red-ball {
    bottom: 10px;
}

Step 3: Adding JavaScript

Finally, implement JavaScript to handle the game logic, including random mole appearances, score tracking, and game over condition:


const holes = document.querySelectorAll(".hole");
const scoreBoard = document.getElementById("score");
const startButton = document.getElementById("start-button");
let lastHole;
let timeUp = false;
let score = 0;

function randomTime(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

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

function peep() {
  const time = randomTime(500, 1000); // Time the ball is visible
  const hole = randomHole(holes);

  // Randomly decide whether to show a mole or a red ball
  const isRedBall = Math.random() > 0.8; // 20% chance to show a red ball
  const ball = document.createElement("img");
  ball.src = isRedBall ? "plant.png" : "mole.png";
  ball.classList.add(isRedBall ? "red-ball" : "mole");
  hole.appendChild(ball);
  hole.classList.add("up");

  ball.addEventListener("click", function () {
    if (ball.classList.contains("red-ball")) {
      alert("Game Over!");
      timeUp = true; // End the game
    } else if (ball.classList.contains("mole")) {
      score++;
      scoreBoard.textContent = score;
    }
    hole.classList.remove("up");
    hole.removeChild(ball);
  });

  setTimeout(() => {
    if (!timeUp) {
      hole.classList.remove("up");
      if (hole.contains(ball)) {
        hole.removeChild(ball);
      }
      peep();
    }
  }, time);
}

function startGame() {
  scoreBoard.textContent = 0;
  timeUp = false;
  score = 0;
  peep();
  setTimeout(() => (timeUp = true), 15000); // Game duration 15 seconds
}

startButton.addEventListener("click", startGame);

Now, you've built a simple yet exciting Whack-a-Mole game with a twist! Keep practicing to refine your skills and add more features.

Sky Code82

Search This Blog