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

Last Updated : 27 Oct, 2021

In this article, we are going to create a game in which mouse come out from the holes, and we hit the mouse with 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 creation HTML file, we are going to give title to our webpage using <title> tag. It should be placed between the <head> tag.
Then we link the CSS file that provide all the animations effect to our html. It also placed inside <head> section.
Coming to the body section of our HTML code.
- We have to create a div for giving the main heading to our game.
- In second div we place points for our game.
- In third div which is the most interesting one we place 5 holes and assign the particular class to them.
- In next one, we place the 2 buttons to start and stop our game as per the user interest.
- In the final div we place a hammer image which later on we covert it to cursor.
At the end of our body section we place link of our JS file in <script> tag.

index.html

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Hit-The-Mouse</title>
    <link rel="stylesheet" href="style.css">
  
    <!-- Adding google fonts to our project 
        to set chosen font family -->
    <link href=
"https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap"
        rel="stylesheet">
    <link rel="preconnect" 
        href="https://fonts.gstatic.com">
</head>
  
<body>
    <div class="heading">
        <h1>Hit the Mouse</h1>
    </div>
  
    <div class="score">
        <h3>Points: <span>0</span></h3>
    </div>
  
    <div class="holes">
        <div class="hole hole1"></div>
        <div class="hole hole2"></div>
        <div class="hole hole3"></div>
        <div class="hole hole4"></div>
        <div class="hole hole5"></div>
    </div>
    <div class="buttons">
        <button class="button start">
            START
        </button>
  
        <button class="button stop">
            STOP
        </button>
    </div>
  
    <div class="hammer">
        <img src=
'https://media.geeksforgeeks.org/wp-content/uploads/20210302112037/hammer1.png'>
    </div>
      
    <!-- linking our js file -->
    <script src="script.js"></script>
</body>
  
</html>

CSS Code: CSS is used to give different types of animations and effect to our HTML page so that it looks interactive to all users. In CSS, we have to remind the following points –

Restore all the browser effects.
Use classes and ids to give effects to HTML elements.
Use @keyframes{} for giving the animation to HTML elements.

style.css

/* Restoring all the browser effects */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Dancing Script', cursive;
    cursor: none;
}
  
/* Setting up the bg-color, text-color 
and alignment to all body elements */
body {
    background-color: green;
    color: white;
    justify-content: center;
}
  
.heading {
    font-size: 2em;
    margin: 1em 0;
    text-align: center;
}
  
.score {
    font-size: 1.3em;
    margin: 1em;
    text-align: center;
}
  
.holes {
    width: 600px;
    height: 400px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}
  
.hole {
    flex: 1 0 33.33%;
    overflow: hidden;
    position: relative;
}
  
/* Use of pseudo classes */
.hole:after {
    display: block;
    background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20210302112038/hole2.png')
        bottom center no-repeat;
    background-size: contain;
    content: '';
    width: 100%;
    height: 70px;
    position: absolute;
    z-index: 20;
    bottom: -30px;
}
  
.rat {
    position: absolute;
    z-index: 10;
    height: 10vh;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    animation: move 0.5s linear;
}
  
.buttons {
    margin: 3em 0 0 0;
    text-align: center;
}
  
.button {
    background-color: inherit;
    padding: 15px 45px;
    border: #fff 2px solid;
    border-radius: 4px;
    color: rgb(21, 14, 235);
    font-size: 0.8em;
    font-weight: 900;
    outline: none;
}
  
/* It is used because we want to 
display single button at a time
on the screen */
  
/* This functionally is moreover 
controlled by JS */
.stop {
    display: none;
}
  
.hammer img {
    position: absolute;
    height: 125px;
    z-index: 40;
    transform: translate(-20px, -50px);
    pointer-events: none;
    animation: marne_wale_effects 0.1s ease;
}
  
/* Giving animation to our rat */
@keyframes move {
    from {
        bottom: -60px;
    }
    to {
        bottom: 0;
    }
}
  
/* Giving effects to hammer when 
we hit on the rat */
@keyframes marne_wale_effects {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-40deg);
    }
}

Till now, we completed all of our UI part now we will write code to give functionalities to our game.

JavaScript Code: In this section, we write the code for –

Hitting effects of the hammer.
Changing the cursor to the hammer.
Start/stop our game.
Calculating the number of hits

script.js

// Selection of all the CSS selectors 
const score = document.querySelector('.score span')
const holes = document.querySelectorAll('.hole')
const start_btn = document.querySelector('.buttons .start')
const stop_btn = document.querySelector('.buttons .stop')
const cursor = document.querySelector('.hammer img')
  
// Here we changing our default cursor to hammer
// (e) refers to event handler
window.addEventListener('mousemove', (e) => {
    cursor.style.top = e.pageY + "px"
    cursor.style.left = e.pageX + "px"
})
  
// It is used to give the animation to
// our hammer every time we click it
// on our screen
window.addEventListener('click', () => {
    cursor.style.animation = 'none'
    setTimeout(() => {
        cursor.style.animation = ''
    }, 101)
})
  
// From this part our game starts when
// we click on the start button
start_btn.addEventListener('click', () => {
    start_btn.style.display = 'none'
    stop_btn.style.display = 'inline-block'
  
    let holee
    let points = 0
  
    const game = setInterval(() => {
  
        // Here we are taking a random hole
        // from where mouse comes out
        let ran = Math.floor(Math.random() * 5)
        holee = holes[ran]
  
        // This part is used for taking the 
        // mouse up to the desired hole
        let set_img = document.createElement('img')
        set_img.setAttribute('src', 
'https://media.geeksforgeeks.org/wp-content/uploads/20210303135621/rat.png')
        set_img.setAttribute('class', 'rat')
        holee.appendChild(set_img)
  
        // This part is used for taking
        // the mouse back to the hole
        setTimeout(() => {
            holee.removeChild(set_img)
        }, 700);
    }, 800)
  
    // It is used for adding our points
    // to 0 when we hit to the mouse
    window.addEventListener('click', (e) => {
        if (e.target === holee) 
            score.innerText = ++points;
    })
  
    // This is coded for changing the score
    // to 0 and change the stop button
    // again to the start button!
    stop_btn.addEventListener('click', () => {
        clearInterval(game)
        stop_btn.style.display = 'none'
        start_btn.style.display = 'inline-block'
        score.innerHTML = '0'
    })
})

Steps to play the Game:

Click on the Start button to play the game.
After clicking the start button, object comes out from the hole.
Hit the mouse over the object to gain more and more points.
Click on the Stop button to pause your game.

Output:

My Personal Notes

Related Articles

Table of Contents

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

index.html

style.css

script.js

Start Your Coding Journey Now!