Skip to content

Commit a5b6887

Browse files
HuXn-WebDevHuXn-WebDev
committed
JavaScript Emoji Catcher Game
1 parent 9ea9bc9 commit a5b6887

File tree

3 files changed

+147
-0
lines changed

3 files changed

+147
-0
lines changed

‎82. Emoji Catcher Game/app.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
const squares = document.querySelectorAll(".square");
2+
const timeLeft = document.querySelector("#time-left");
3+
const score = document.querySelector("#score");
4+
5+
let result = 0;
6+
let hitPosition;
7+
let currentTime = 60;
8+
let timerId = null;
9+
10+
function randomSquare() {
11+
squares.forEach((square) => {
12+
square.classList.remove("emoji");
13+
});
14+
15+
let randomSqaure = squares[Math.floor(Math.random() * 9) + 1];
16+
randomSqaure.classList.add("emoji");
17+
hitPosition = randomSqaure.id;
18+
}
19+
20+
squares.forEach((square) => {
21+
square.addEventListener("mousedown", () => {
22+
if (square.id == hitPosition) {
23+
result++;
24+
score.textContent = result;
25+
hitPosition = null;
26+
}
27+
});
28+
});
29+
30+
function moveEmoji() {
31+
timerId = setInterval(randomSquare, 500);
32+
}
33+
34+
moveEmoji();
35+
36+
function countDown() {
37+
currentTime--;
38+
timeLeft.textContent = currentTime;
39+
40+
if (currentTime == 0) {
41+
clearInterval(countDownTimerId);
42+
clearInterval(timerId);
43+
alert(`Game Over! Your final Score Is ${result}`);
44+
}
45+
}
46+
47+
let countDownTimerId = setInterval(countDown, 1000);

‎82. Emoji Catcher Game/index.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Emoji Catcher Game</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="scores-container">
11+
<div class="total-score">
12+
<h2>Your Score:</h2>
13+
<h2 id="score">0</h2>
14+
</div>
15+
16+
<div class="time">
17+
<h2>Time left:</h2>
18+
<h2 id="time-left">60</h2>
19+
</div>
20+
</div>
21+
22+
<div class="grid-container">
23+
<div class="grid">
24+
<div class="square" id="1"></div>
25+
<div class="square" id="2"></div>
26+
<div class="square" id="3"></div>
27+
<div class="square" id="4"></div>
28+
<div class="square" id="5"></div>
29+
<div class="square" id="6"></div>
30+
<div class="square" id="7"></div>
31+
<div class="square" id="8"></div>
32+
<div class="square" id="9"></div>
33+
<div class="square" id="10"></div>
34+
</div>
35+
</div>
36+
37+
<script src="app.js"></script>
38+
</body>
39+
</html>

‎82. Emoji Catcher Game/style.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
body {
2+
background: rgb(10, 10, 10);
3+
color: #fff;
4+
font-family: sans-serif;
5+
}
6+
7+
.scores-container {
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
}
12+
13+
.total-score {
14+
margin-right: 20px;
15+
margin: 20px;
16+
text-align: center;
17+
background: #ccc;
18+
padding: 20px;
19+
color: #000;
20+
}
21+
22+
.time {
23+
margin-right: 20px;
24+
margin: 20px;
25+
text-align: center;
26+
background: #ccc;
27+
padding: 20px;
28+
color: #000;
29+
}
30+
31+
.grid-container {
32+
display: flex;
33+
justify-content: center;
34+
align-items: center;
35+
}
36+
37+
.grid {
38+
width: 90%;
39+
height: 90%;
40+
display: flex;
41+
flex-wrap: wrap;
42+
justify-content: center;
43+
align-items: center;
44+
background-color: rgb(36, 36, 36);
45+
margin-top: 2rem;
46+
padding: 20px;
47+
}
48+
49+
.square {
50+
height: 200px;
51+
width: 200px;
52+
margin: 10px;
53+
background: rgb(61, 61, 61);
54+
}
55+
56+
/* JavaScript */
57+
.emoji {
58+
background-image: url("https://i.guim.co.uk/img/media/a1b7129c950433c9919f5670c92ef83aa1c682d9/55_344_1971_1183/master/1971.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=88ba2531f114b9b58b9cb2d8e723abe1");
59+
background-position: center;
60+
background-size: cover;
61+
}

0 commit comments

Comments
 (0)