Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Catch the Insect Game" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "Catch the Insect Game" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS and JavaScript code below.
Catch the Insect Game [Source Code]
To get the following HTML, CSS & JS code for the Catch the Insect Game project. You need to create three files one is a HTML file, second one is a CSS file and the another one is JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with .html extension for HTML code, .css extension for CSS code and .js for JavaScript code.
You can also download all source code files from the given download button.
HTML
<!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>Catch the Insect Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Catch The Insect</h1>
<button class="playBtn">Play Game</button>
</div>
<div class="container">
<h1>Select your favorite insect</h1>
<ul class="insectList">
<li>
<button class="insectBtn">
<img src="https://pngimg.com/uploads/butterfly/small/butterfly_PNG103828.png" alt="spider" />
<p>Butterfly</p>
</button>
</li>
<li>
<button class="insectBtn">
<img src="https://pngimg.com/uploads/grasshopper/small/grasshopper_PNG4.png" alt="roach" />
<p>Grasshopper</p>
</button>
</li>
<li>
<button class="insectBtn">
<img src="https://pngimg.com/uploads/ant/small/ant_PNG19340.png" alt="fly">
<p>Ant</p>
</button>
</li>
<li>
<button class="insectBtn">
<img src="http://pngimg.com/uploads/mosquito/mosquito_PNG18175.png" alt="mosquito" />
<p>Mosquito</p>
</button>
</li>
<li>
<button class="insectBtn">
<img src="https://pngimg.com/uploads/dragonfly/small/dragonfly_PNG2.png" alt="mosquito" />
<p>Dragonfly</p>
</button>
</li>
</ul>
</div>
<div class="container gameContainer">
<h3 class="time">Time: 00:00</h3>
<h3 class="score">Score: 0</h3>
<h5 class="message">
Didn't you annoyed yet? <br>
You are playing an impossible game..!
</h5>
</div>
<script src="index.js"></script>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: red;
color: white;
text-align: center;
overflow: hidden;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
transition: margin 0.6s ease-out;
}
.container.up {
margin-top: -100vh;
}
.container h1 {
text-transform: uppercase;
word-spacing: 10px;
letter-spacing: 3px;
margin-bottom: 15px;
}
/* Play button Container */
.playBtn {
background-color: white;
color: red;
font-size: 18px;
padding: 15px 30px;
border: 2px solid transparent;
border-radius: 5px;
cursor: pointer;
}
.playBtn:hover {
border: 2px solid white;
background: transparent;
color: white;
}
.playBtn:active {
transform: scale(0.95);
}
/* Insect Selection Container */
.insectList {
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style: none;
gap: 20px;
}
.insectBtn {
background-color: transparent;
border: 3px solid white;
border-radius: 10px;
color: white;
width: 150px;
height: 150px;
cursor: pointer;
}
.insectBtn:hover {
background-color: white;
color: red;
}
.insectBtn img {
width: 100px;
height: 100px;
object-fit: contain;
}
/* Game Container */
.gameContainer {
position: relative;
}
.time,
.score {
position: absolute;
top: 20px;
}
.time {
left: 20px;
}
.score {
right: 20px;
}
.message {
z-index: 100;
width: 100%;
padding: 20px;
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
opacity: 0;
top: 0;
left: 0;
transform: scale(0);
transition: transform 0.3s ease-in-out;
}
.message.visible {
top: 20%;
opacity: 1;
transform: scale(1);
}
.insect {
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
position: absolute;
transform: translate(-50%, -50%) scale(1);
cursor: pointer;
transition: transform 0.3s ease-in-out;
}
.insect.caught {
transform: translate(-50%, -50%) scale(0);
}
.insect img {
width: 100px;
height: 100px;
}
JavaScript
const containerEl = document.querySelectorAll('.container');
const playBtnEl = document.querySelector('.playBtn')
const insectBtnEls = document.querySelectorAll('.insectBtn');
const gameContainerEl = document.querySelector('.gameContainer')
const timeEl = document.querySelector('.time')
const scoreEl = document.querySelector('.score')
const messageEl = document.querySelector('.message')
let seconds = 0;
let score = 0;
let selectedInsect = {};
// When you click play button it will go up(disappear) and now insectList container will display on screen.
playBtnEl.addEventListener('click', () => {
containerEl[0].classList.add('up');
})
// When click on any of the insect then it will note down source & alternative(alt) of the image and call the start game function & also createInsect function by 1000ms delay.
insectBtnEls.forEach(btn => {
btn.addEventListener('click', () => {
const img = btn.querySelector('img');
const src = img.getAttribute('src');
const alt = img.getAttribute('alt');
selectedInsect = { src, alt };
containerEl[1].classList.add('up');
setTimeout(createInsect, 1000);
startGame();
})
})
// start game function will call the increase time function for every 1000ms.
function startGame() {
setInterval(increaseTime, 1000);
}
// Updates the time.
function increaseTime() {
let min = Math.floor(seconds / 60);
let sec = seconds % 60;
m = min < 10 ? `0${min}` : min;
s = sec < 10 ? `0${sec}` : sec;
timeEl.innerHTML = `Time: ${m}:${s}`
seconds++;
}
// This function generate insects at random location by using getRandomLocation function.
function createInsect() {
const insect = document.createElement('div');
insect.classList.add('insect');
const { x, y } = getRandomLocation();
insect.style.top = `${y}px`;
insect.style.left = `${x}px`;
insect.innerHTML = `<img src="${selectedInsect.src}" alt="${selectedInsect.alt}" style="transform: rotate(${Math.random() * 360}deg)" />`;
gameContainerEl.appendChild(insect)
// When we click on any of the insects then it will call the catchInsect function.
insect.addEventListener('click', catchInsect)
}
// It gives random location
function getRandomLocation() {
const width = window.innerWidth
const height = window.innerHeight
const x = Math.random() * (width - 200) + 100
const y = Math.random() * (height - 200) + 100
return { x, y }
}
// when we catch the insect it calls the increaseScore function and add caught class to remove that insect and also calls the addInsects function.
function catchInsect() {
increaseScore();
this.classList.add('caught')
addInsects()
}
// It will call createInsect function 2 times with delay 1000ms and 1500ms.
function addInsects() {
setTimeout(createInsect, 1000)
setTimeout(createInsect, 1500)
}
// Updates the score and it will display a message after reaching score greater than 20.
function increaseScore() {
score++;
if(score > 20) {
messageEl.classList.add('visible');
}
scoreEl.innerHTML = `Score: ${score}`;
}
Generating Download Link...