Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a5b6887

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /