Design Hit the Mouse Game using HTML, CSS and Vanilla Javascript
Last Updated :
18 Apr, 2025
Improve
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 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 animation effects 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 to give 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 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 remember the following points -
- Restore all the browser effects.
- Use classes and IDs to give effects to HTML elements.
- Use @keyframes{} to give 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
<!DOCTYPE html>
<html>
<head>
<title>Hit-The-Mouse</title>
<link rel="stylesheet" href="style.css">
<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>
<script src="script.js"></script>
</body>
</html>
<html><head> <title>Hit-The-Mouse</title> <link rel="stylesheet" href="style.css"> <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> <script src="script.js"></script></body>​</html>/* 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);
}
}
// 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, the 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
