Skip to content

Commit 5e8bbb2

Browse files
solygambassolygambas
committed
add catch the insect game
1 parent 286ee84 commit 5e8bbb2

File tree

3 files changed

+288
-0
lines changed

3 files changed

+288
-0
lines changed

‎50-insect catch game/index.html

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Catch The Insect</title>
8+
</head>
9+
<body>
10+
<div class="screen">
11+
<h1>Catch The Insect</h1>
12+
<button class="btn" id="start-btn">Play Game</button>
13+
</div>
14+
<div class="screen">
15+
<h1>What is your "favorite" insect?</h1>
16+
<ul class="insects-list">
17+
<li>
18+
<button class="choose-insect-btn">
19+
<p>Fly</p>
20+
<img
21+
src="http://pngimg.com/uploads/fly/fly_PNG3946.png"
22+
alt="fly"
23+
/>
24+
</button>
25+
</li>
26+
<li>
27+
<button class="choose-insect-btn">
28+
<p>Mosquito</p>
29+
<img
30+
src="http://pngimg.com/uploads/mosquito/mosquito_PNG18175.png"
31+
alt="mosquito"
32+
/>
33+
</button>
34+
</li>
35+
<li>
36+
<button class="choose-insect-btn">
37+
<p>Spider</p>
38+
<img
39+
src="http://pngimg.com/uploads/spider/spider_PNG12.png"
40+
alt="spider"
41+
/>
42+
</button>
43+
</li>
44+
<li>
45+
<button class="choose-insect-btn">
46+
<p>Roach</p>
47+
<img
48+
src="http://pngimg.com/uploads/roach/roach_PNG12163.png"
49+
alt="roach"
50+
/>
51+
</button>
52+
</li>
53+
</ul>
54+
</div>
55+
<div class="screen game-container" id="game-container">
56+
<h3 id="time" class="time">Time: 00:00</h3>
57+
<h3 id="score" class="score">Score: 0</h3>
58+
<h5 id="message" class="message">
59+
Are you annnoyed yet? <br />
60+
You are playing an impossible game!!
61+
</h5>
62+
</div>
63+
<script src="script.js"></script>
64+
</body>
65+
</html>

‎50-insect catch game/script.js

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
const screens = document.querySelectorAll(".screen");
2+
const chooseInsectButtons = document.querySelectorAll(".choose-insect-btn");
3+
const startButton = document.getElementById("start-btn");
4+
const gameContainer = document.getElementById("game-container");
5+
const timeElement = document.getElementById("time");
6+
const scoreElement = document.getElementById("score");
7+
const message = document.getElementById("message");
8+
let seconds = 0;
9+
let score = 0;
10+
let selectedInsect = {};
11+
12+
startButton.addEventListener("click", () => screens[0].classList.add("up"));
13+
14+
const increaseScore = () => {
15+
score++;
16+
if (score > 19) message.classList.add("visible");
17+
scoreElement.innerHTML = `Score: ${score}`;
18+
};
19+
20+
const addInsects = () => {
21+
setTimeout(createInsect, 1000);
22+
setTimeout(createInsect, 1500);
23+
};
24+
25+
const catchInsect = function () {
26+
increaseScore();
27+
this.classList.add("caught");
28+
setTimeout(() => this.remove, 2000);
29+
addInsects();
30+
};
31+
32+
const getRandomLocation = () => {
33+
const width = window.innerWidth;
34+
const height = window.innerHeight;
35+
const x = Math.random() * (width - 200) + 100;
36+
const y = Math.random() * (height - 200) + 100;
37+
return { x, y };
38+
};
39+
40+
const createInsect = () => {
41+
const insect = document.createElement("div");
42+
insect.classList.add("insect");
43+
const { x, y } = getRandomLocation();
44+
insect.style.top = `${y}px`;
45+
insect.style.left = `${x}px`;
46+
insect.innerHTML = `<img src="${selectedInsect.src}"
47+
alt="${selectedInsect.alt}"
48+
style="transform: rotate(${Math.random() * 360}deg)" />`;
49+
insect.addEventListener("click", catchInsect);
50+
gameContainer.appendChild(insect);
51+
};
52+
53+
const increaseTime = () => {
54+
let m = Math.floor(seconds / 60);
55+
let s = seconds % 60;
56+
m = m < 10 ? `0${m}` : m;
57+
s = s < 10 ? `0${s}` : s;
58+
timeElement.innerHTML = `Time: ${m}:${s}`;
59+
seconds++;
60+
};
61+
62+
const startGame = () => setInterval(increaseTime, 1000);
63+
64+
chooseInsectButtons.forEach((button) => {
65+
button.addEventListener("click", () => {
66+
const image = button.querySelector("img");
67+
const src = image.getAttribute("src");
68+
const alt = image.getAttribute("alt");
69+
selectedInsect = { src, alt };
70+
screens[1].classList.add("up");
71+
setTimeout(createInsect, 1000);
72+
startGame();
73+
});
74+
});

‎50-insect catch game/style.css

+149
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
@import url("https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #516dff;
9+
color: #fff;
10+
font-family: "Press Start 2P", sans-serif;
11+
height: 100vh;
12+
overflow: hidden;
13+
margin: 0;
14+
text-align: center;
15+
}
16+
17+
a {
18+
color: #fff;
19+
}
20+
21+
h1 {
22+
line-height: 1.4;
23+
}
24+
25+
.btn {
26+
border: 0;
27+
background-color: #fff;
28+
color: #516dff;
29+
padding: 15px 20px;
30+
font-family: inherit;
31+
cursor: pointer;
32+
}
33+
34+
.btn:hover {
35+
opacity: 0.9;
36+
}
37+
38+
.btn:focus {
39+
outline: none;
40+
}
41+
42+
.screen {
43+
display: flex;
44+
flex-direction: column;
45+
align-items: center;
46+
justify-content: center;
47+
height: 100vh;
48+
width: 100vw;
49+
transition: margin 0.5s ease-out;
50+
}
51+
52+
.screen.up {
53+
margin-top: -100vh;
54+
}
55+
56+
.insects-list {
57+
display: flex;
58+
flex-wrap: wrap;
59+
justify-content: center;
60+
list-style-type: none;
61+
padding: 0;
62+
}
63+
64+
.insects-list li {
65+
margin: 10px;
66+
}
67+
68+
.choose-insect-btn {
69+
background-color: transparent;
70+
border: 2px solid #fff;
71+
color: #fff;
72+
cursor: pointer;
73+
font-family: inherit;
74+
width: 150px;
75+
height: 150px;
76+
}
77+
78+
.choose-insect-btn:hover {
79+
background-color: #fff;
80+
color: #516dff;
81+
}
82+
83+
.choose-insect-btn:active {
84+
background-color: rgba(255, 255, 255, 0.7);
85+
}
86+
87+
.choose-insect-btn img {
88+
width: 100px;
89+
height: 100px;
90+
object-fit: contain;
91+
}
92+
93+
.game-container {
94+
position: relative;
95+
}
96+
97+
.time,
98+
.score {
99+
position: absolute;
100+
top: 20px;
101+
}
102+
103+
.time {
104+
left: 20px;
105+
}
106+
107+
.score {
108+
right: 20px;
109+
}
110+
111+
.message {
112+
line-height: 1.7;
113+
background-color: rgba(0, 0, 0, 0.5);
114+
width: 100%;
115+
padding: 20px;
116+
z-index: 100;
117+
text-align: center;
118+
opacity: 0;
119+
position: absolute;
120+
top: 0;
121+
left: 50%;
122+
transform: translate(-50%, -150%);
123+
}
124+
125+
.message.visible {
126+
transform: translate(-50%, 150%);
127+
opacity: 1;
128+
}
129+
130+
.insect {
131+
display: flex;
132+
align-items: center;
133+
justify-content: center;
134+
width: 100px;
135+
height: 100px;
136+
position: absolute;
137+
transform: translate(-50%, -50%) scale(1);
138+
transition: transform 0.3s ease-in-out;
139+
cursor: pointer;
140+
}
141+
142+
.insect img {
143+
width: 100px;
144+
height: 100px;
145+
}
146+
147+
.insect.caught {
148+
transform: translate(-50%, -50%) scale(0);
149+
}

0 commit comments

Comments
 (0)