How to make Whack a Mole Game using HTML, CSS, JavaScript

on
Preview : Today we are creating Whack a Mole Game.
   

Let's have some fun and make a Whack-a-Mole game out of HTML, CSS, and JavaScript.
There are nine dirt holes and a mole in this game.
The mole appears at random from the holes, and the player must click on it to score points.
The points are presented on the page's left side.
Prepare to get whack!! 


1.index.html

Make an index.html file and paste the following code into it:  

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Whack a Mole</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="hammer.png" class="hammer">
<div class="scoretable">
<div>
TIME LEFT :
<p class="time">60</p>
</div>
<div>
SCORE :
<p class="score">0</p>
</div>
</div>
<div class="holes"></div>
<div class="modal">
<div class="display">
<button>START THE GAME</button>
<h2>GAME OVER!</h2>
<h1>HIGH SCORE : <p class="highscore">0</p></h1>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

2.style.css

Let's make a CSS file named style.css and add the CSS code below to it: 

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Press Start 2P", cursive;
min-height: 100vh;
background: darkred;
overflow: hidden;
cursor: none;
}
.holes {
position: absolute;
display: grid;
grid-template-columns: repeat(4, 160px);
gap: 10px;
top: 50%;
left: 50%;
width: 670px;
height: 630px;
transform: translate(-50%, -50%);
--border: 1px solid black;
}
.hole {
position: relative;
height: 150px;
width: 160px;
--border: 1px solid black;
overflow: hidden;
pointer-events: none;
}
.pile {
position: absolute;
bottom: -30px;
left: -40px;
width: 210px;
object-fit: cover;
pointer-events: none;
}
.angryface {
position: absolute;
top: 155px;
left: 0;
width: 155px;
object-fit: contain;
z-index: -1;
--cursor: pointer;
}
.scoretable {
font-size: 1.5rem;
height: 100px;
padding: 0.5rem 1rem;
display: flex;
flex-direction: column;
justify-content: space-around;
color: white;
position: absolute;
left: 5%;
top: 5%;
transform: translate(-5%, -5%);
border: 1px solid white;
}
.scoretable div {
display: flex;
justify-content: space-between;
}
.modal {
cursor: default;
position: absolute;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
background: rgb(255, 8, 8);
pointer-events: all;
z-index: 1000;
}
.modal button {
padding: 1rem 2rem;
background: none;
border: 1px solid white;
color: white;
font-size: 1.2rem;
cursor: pointer;
transition: 0.5s ease;
font-family: "Press Start 2P", cursive;
}
.modal button:hover {
background: rgba(255,255,255,0.6);
color: red;
}
.modal h1 {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem;
}
.modal h2 {
visibility: hidden;
}
.highscore {
margin-left: 10px;
animation: scorebump 0.5s ease infinite alternate;
}
.display {
height: 200px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.modalclose {
opacity: 0;
pointer-events: none;
}
.flash {
background: rgb(238, 144, 144);
}
.hammer {
position: absolute;
z-index: 1000;
height: 125px;
top: 0;
left: 0;
transform: translate(10px -40px);
pointer-events: none;
}
@keyframes scorebump {
from {
transform: translateY(10px);
}
to{
transform: translateY(-10px);
}
}
@keyframes faceup {
from {
transform: translateY(140px);
}
to{
transform: translateY(-130px);
}
}
@keyframes facedown {
from {
transform: translateY(-130px);
}
to{
transform: translateY(140px);
}
}
view raw style.css hosted with ❤ by GitHub

3.script.js

Create a JavaScript file named script.js and paste the following JavaScript code into it: 
const holesdiv = document.querySelector(".holes");
const score = document.querySelector(".score");
const time = document.querySelector(".time");
const startbutton = document.querySelector(".modal button");
const modal = document.querySelector(".modal");
const highscore = document.querySelector(".highscore");
const gameover = document.querySelector(".display h2");
const hammer = document.querySelector(".hammer");
let timeleft;
let pscore = 0;
let maxscore = 0;
for (let i = 1;i <= 16;i++)
{
let hole = document.createElement("div");
hole.classList.add("hole");
holesdiv.appendChild(hole);
let pile = document.createElement("img");
pile.classList.add("pile");
pile.src = "durtpile.png";
hole.appendChild(pile);
let face = document.createElement("img");
face.classList.add("angryface");
face.src = "angryface.png";
face.setAttribute("name", "angryface")
hole.appendChild(face);
}
window.addEventListener("mousemove", (e) => {
hammer.style.left = e.pageX + "px";
hammer.style.top = e.pageY - 60 + "px";
});
window.addEventListener("click",(e)=>{
hammer.style.transform = "rotateZ(50deg) rotateY(-180deg)";
setTimeout(() => {
hammer.style.transform = "rotateZ(0deg) rotateY(-180deg)";
}, 40);
if (e.target.name === "angryface") {
setTimeout(() => {
document.body.classList.toggle("flash");
}, 100);
document.body.classList.toggle("flash");
pscore = pscore + 10;
score.textContent = pscore;
}
})
startbutton.addEventListener("click",()=>{
modal.classList.add("modalclose")
timeleft = 60;
pscore = 0;
score.textContent = pscore;
time.textContent = timeleft;
let timer = setInterval(() => {
time.textContent = timeleft;
if (timeleft === 0) {
gameover.style.visibility = "visible"
modal.classList.remove("modalclose")
if (pscore > maxscore) {
maxscore = pscore;
highscore.textContent = maxscore;
}
else{
highscore.textContent = maxscore;
}
clearInterval(timer);
}
else{
timeleft--;
time.textContent = timeleft < 10 ? "0" + timeleft : timeleft;
const face = document.querySelectorAll(".angryface")
let chooseface = Math.floor(Math.random() * face.length);
face[chooseface].style.pointerEvents = "all";
face[chooseface].style.animation = "faceup 2s ease";
face[chooseface].addEventListener("animationend",()=>{
face[chooseface].style.pointerEvents = "all";
face[chooseface].style.animation = "facedown 0.5s ease";
face[chooseface].addEventListener("animationend",()=>{
face[chooseface].style.pointerEvents = "none";
})
})
}
}, 1000);
})
view raw script.js hosted with ❤ by GitHub

Obtain images :- https://github.com/official-sharmaji/whack-a-Mole-game

Comments

Post a Comment