Simple HTML CSS and JavaScript Game

Whack-a-Mole Game using HTML CSS and JavaScript

Last Updated : 24 Jul, 2024

Whack-A-Mole is a classic arcade-style game that combines speed and precision. The game is set in a grid of holes, and the objective is to "whack" or hit the moles that randomly pop up from these holes. In this article, we are going to create Whack-a-Mole using HTML, CSS and JavaScript.

Preview Image:

Screenshot-2023-11-28-164214

Prerequisites:

Approach:

Start by creating the HTML structure for your Whack-A-Mole game. Use semantic tags like <header>, <main>, and include elements for game information (score, timer) and the game container with mole holes.
Style your game using CSS to create an appealing layout and you have to use this mole image.
Use JavaScript to add interactivity to your Whack-A-Mole game.
Select DOM elements and initialize game variables.
Implement core functions for mole appearance (comeout) and handling clicks (handleMoleClick).
Create functions to start the game, initiating intervals, and updating UI elements. Implement the end game function, clearing intervals, and resetting the game state.
Add event listeners to buttons, ensuring proper states (disabled/enabled).

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
           content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Whac-A-Mole</title>
</head>

<body>
    <div class="game-info">
        <div id="score">Score: 0</div>
        <div id="timer">Time: 60s</div>
    </div>
    <button id="startButton">Start Game</button>
    <button id="endButton" disabled>End Game</button>
    <div class="game-container">
        <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>
    <script src="script.js"></script>
</body>

</html>

CSS

body {
    background-color: rgb(255, 228, 196);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.game-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px;
}

#startButton {
    margin-bottom: 20px;
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
}

#endButton {
    margin-bottom: 20px;
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
}

.game-container {
    background-color: rgb(1, 254, 64);
    display: grid;
    grid-template-columns: repeat(3, 160px);
    gap: 10px;
    border: 2px solid rgb(216, 216, 216);
    padding: 20px;
    border-radius: 10px;

}

.hole {
    height: 150px;
    background: rgb(19, 55, 139);
    border: 5px solid rgb(30, 30, 30);
    cursor: pointer;
    border-radius: 100px;
}

.mole {
    background-size: 150px;
    background-image: url(
    "https://media.geeksforgeeks.org/wp-content/uploads/20231130123541/mole.png")
}

@media only screen and (max-width: 600px) {
    .game-container {
        width: 80%;
        gap: 10px;
        padding: 5%;
        grid-template-columns: repeat(3, 38%);
    }

    .hole {
        height: 50px;
        width: 50px;
        border-radius: 100px;
    }

    .mole {
        background-size: 50px;
        background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20231130123541/mole.png")
    }
}

JavaScript

document.addEventListener(
    "DOMContentLoaded", function () {
    const holes = 
        document.querySelectorAll(".hole");
    const startButton = 
        document.getElementById("startButton");
    const endButton = 
        document.getElementById("endButton");
    const scoreDisplay = 
        document.getElementById("score");
    const timerDisplay = 
        document.getElementById("timer");

    let timer;
    let score = 0;
    let countdown;
    let moleInterval;
    
    // Set the initial state to game over
    let gameOver = true; 

    function comeout() {
        holes.forEach(hole => {
            hole.classList.remove('mole');
            hole.removeEventListener(
                'click', handleMoleClick);
        });

        let random = holes[Math.floor(Math.random() * 9)];

        random.classList.add('mole');
        random.addEventListener('click', handleMoleClick);
    }

    function handleMoleClick() {
        if (!gameOver) {
            score++;
            scoreDisplay.textContent = `Score: ${score}`;
        }
        this.classList.remove('mole');
    }

    function startGame() {
        if (!gameOver) {
        
            // Prevent starting the game 
            // again if it's already in progress
            return;
        }

        gameOver = false;
        score = 0;
        scoreDisplay.textContent = `Score: ${score}`;
        timer = 60;
        timerDisplay.textContent = `Time: ${timer}s`;

        startButton.disabled = true;
        endButton.disabled = false;

        countdown = setInterval(() => {
            timer--;
            timerDisplay.textContent = `Time: ${timer}s`;

            if (timer <= 0) {
                clearInterval(countdown);
                gameOver = true;
                alert(`Game Over!\nYour final score: ${score}`);
                startButton.disabled = false;
                endButton.disabled = true;
            }
        }, 1000);

        moleInterval = setInterval(() => {
            if (!gameOver) comeout();
        }, 1000);

        console.log("Game started");
    }

    function endGame() {
        clearInterval(countdown);
        clearInterval(moleInterval);
        gameOver = true;
        alert(`Game Ended!\nYour final score: ${score}`);
        score = 0;
        timer = 60;
        scoreDisplay.textContent = `Score: ${score}`;
        timerDisplay.textContent = `Time: ${timer}s`;
        startButton.disabled = false;
        endButton.disabled = true;
    }

    startButton.addEventListener("click", startGame);
    endButton.addEventListener("click", endGame);
});

Output:

Simple HTML CSS and JavaScript Game

A

amanv09

News

Improve

Article Tags :

Similar Reads

Create a snake game using HTML, CSS and JavaScript

Snake Game is a single-player game where the snake gets bigger by eating the food and tries to save itself from the boundary of the rectangle and if the snake eats their own body the game will be over. Game Rules:If the snake goes out of the boundary or eats its own body the game will be over.Prereq

Design Dragon's World Game using HTML CSS and JavaScript

Project Introduction: "Dragon's World" is a game in which one dragon tries to save itself from the other dragon by jumping over the dragon which comes in its way. The score is updated when one dragon saves himself from the other dragon. The project will contain HTML, CSS and JavaScript files. The HT

Word Guessing Game using HTML CSS and JavaScript

In this article, we will see how can we implement a word-guessing game with the help of HTML, CSS, and JavaScript.Â Here, we have provided a hint key & corresponding total number of gaps/spaces depending upon the length of the word and accept only a single letter as an input for each time. If it

Build a Memory Card Game Using HTML CSS and JavaScript

A memory game is a type of game that can be used to test or check the memory of a human being. It is a very famous game. In this game, the player has some cards in front of him and all of them facing down initially. The player has to choose a pair of cards at one time and check whether the faces of

Create a Simon Game using HTML CSS & JavaScript

In this article, we will see how to create a Simon Game using HTML, CSS, and JavaScript. In a Simon game, if the player succeeds, the series becomes progressively longer and more complex. Once the user is unable to repeat the designated order of the series at any point, the game is over. Prerequisit

Create a Minesweeper Game using HTML CSS & JavaScript

Minesweeper is a classic puzzle game that challenges your logical thinking and deduction skills. It's a great project for developers looking to improve their front-end web development skills. In this article, we'll walk through the steps to create a Minesweeper game using HTML, CSS, and JavaScript.

Whack-a-Mole Game using HTML CSS and JavaScript

Whack-A-Mole is a classic arcade-style game that combines speed and precision. The game is set in a grid of holes, and the objective is to "whack" or hit the moles that randomly pop up from these holes. In this article, we are going to create Whack-a-Mole using HTML, CSS and JavaScript. Preview Imag

Simple HTML CSS and JavaScript Game

Tap-the-Geek is a simple game, in which the player has to tap the moving GeeksForGeeks logo as many times as possible to increase their score. It has three levels easy, medium, and hard. The speed of the circle will be increased from level easy to hard. I bet, it is very difficult for the players to

Design Hit the Mouse Game using HTML, CSS and Vanilla Javascript

In this article, we are going to create a game in which a mouse comes out from the holes, and we hit the mouse with a hammer to gain points. It is designed by using HTML, CSS & Vanilla JavaScript. HTML Code: First, we create an HTML file (index.html).Now after creating the HTML file, we are goin

Create a 2D Brick Breaker Game using HTML CSS and JavaScript

In this article, we will see how to create a 2D Brick Breaker Game using HTML CSS & JavaScript. Most of you already played this game on your Mobile Phones where you control a paddle to bounce a ball, aiming to demolish a wall of bricks arranged at the top of the screen. 2D Brick Breaker Game is