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

Last Updated : 16 Feb, 2023

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