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 going to give a title to our webpage using the <title> tag. It should be placed between the <head> tag.
Then we link the CSS file that provides all the animations effect to our HTML. It is also placed inside the <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 the second div, we place points for our game.
- In the third div which is the most interesting one, we place 5 holes and assign a particular class to them.
- In the 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 convert it to a cursor.
At the end of our body section, we place a link to our JS file in the <script> tag.

CSS Code: CSS is used to give different types of animations and effects 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.

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

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

/* 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);
    }
}

Javascript

// 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'
    })
})