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"
</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=
</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(
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',
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: Click here to see live code output