Skip to content

Commit 1b9c945

Browse files
Shreekant-04Shreekant-04
committed
shooting game added
1 parent ec55f40 commit 1b9c945

File tree

8 files changed

+209
-0
lines changed

8 files changed

+209
-0
lines changed

‎README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -203,5 +203,10 @@
203203
<td><a href="tribute-page">Tribute-page</a></td>
204204
<td><a href="https://glistening-cajeta-a6b4ef.netlify.app/tribute-page/">Link</a></td>
205205
</tr>
206+
<tr>
207+
<td>39</td>
208+
<td><a href="sooting-game">Shooting Game</a></td>
209+
<td><a href="https://glistening-cajeta-a6b4ef.netlify.app/sooting-game/">Link</a></td>
210+
</tr>
206211
</tbody>
207212
</table>

‎index.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -288,6 +288,13 @@
288288
<a href="./tribute-page/" target="_blank">Link</a>
289289
</td>
290290
</tr>
291+
<tr>
292+
<td>39</td>
293+
<td>Shotting Game</td>
294+
<td>
295+
<a href="./sooting-game/" target="_blank">Link</a>
296+
</td>
297+
</tr>
291298
</tbody>
292299
</table>
293300
</body>

‎sooting-game/App.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
const crow = document.querySelectorAll(".crow");
2+
let div = document.createElement("div");
3+
div.style.fontSize = "calc(10px + 5vw)";
4+
const wrapper = document.querySelector(".wrapper");
5+
wrapper.appendChild(div);
6+
7+
let count = 0;
8+
const timer = document.querySelector(".timer");
9+
let time = 15;
10+
setInterval(timeOver, 1000);
11+
function timeOver() {
12+
if (time > 0) {
13+
time--;
14+
timer.innerText = `${time}s`;
15+
}
16+
if (count === 6) {
17+
timer.innerText = "0s";
18+
}
19+
}
20+
21+
crow.forEach((el) => {
22+
el.addEventListener("click", (e) => {
23+
e.target.style.display = "none";
24+
count++;
25+
document.querySelector(".score").innerHTML = `<p>Score</p>
26+
<p>${count}</p>
27+
`;
28+
over(); // Check if game is over after each click
29+
});
30+
});
31+
32+
function over() {
33+
if (count === 6) {
34+
div.innerText = "win";
35+
wrapper.style.animation = "none";
36+
timeOver();
37+
}
38+
}
39+
40+
// Timeout function to end the game after 5 seconds
41+
setTimeout(() => {
42+
if (count <= 5) {
43+
div.innerText = "Game Over";
44+
wrapper.style.animation = "none";
45+
}
46+
crow.forEach((el) => {
47+
el.style.display = "none"; // Hide all crow elements
48+
});
49+
}, 15000);

‎sooting-game/assets/bg.jpeg

908 KB
Loading

‎sooting-game/assets/bird.gif

28.9 KB
Loading

‎sooting-game/assets/crosshair.png

492 Bytes
Loading

‎sooting-game/index.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
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+
<title>Shooting Game</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<h1>Shoot the Bird game</h1>
11+
<div class="score-wrapper">
12+
<div class="score">
13+
<p>Score</p>
14+
<p>0</p>
15+
</div>
16+
<p>Time left (<span class="timer">15s</span>)</p>
17+
</div>
18+
19+
<div class="wrapper">
20+
<img
21+
src="../sooting-game/assets/bird.gif"
22+
alt="crow"
23+
height="100"
24+
class="crow crow1"
25+
/>
26+
<img
27+
src="../sooting-game/assets/bird.gif"
28+
alt="crow"
29+
height="100"
30+
class="crow crow2"
31+
/>
32+
<img
33+
src="../sooting-game/assets/bird.gif"
34+
alt="crow"
35+
height="100"
36+
class="crow crow3"
37+
/>
38+
<img
39+
src="../sooting-game/assets/bird.gif"
40+
alt="crow"
41+
height="100"
42+
class="crow crow4"
43+
/>
44+
<img
45+
src="../sooting-game/assets/bird.gif"
46+
alt="crow"
47+
height="100"
48+
class="crow crow5"
49+
/>
50+
<img
51+
src="../sooting-game/assets/bird.gif"
52+
alt="crow"
53+
height="100"
54+
class="crow crow6"
55+
/>
56+
</div>
57+
</body>
58+
<script src="App.js"></script>
59+
</html>

‎sooting-game/style.css

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
overflow: hidden;
6+
user-select: none;
7+
}
8+
body {
9+
height: 100vh;
10+
width: 100vw;
11+
background-image: url(./assets/bg.jpeg);
12+
background-position: center;
13+
background-repeat: no-repeat;
14+
background-size: cover;
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
flex-direction: column;
19+
cursor: url("./assets/crosshair.png"), auto;
20+
position: relative;
21+
perspective: 1000px;
22+
}
23+
h1 {
24+
position: fixed;
25+
top: 10px;
26+
}
27+
.score {
28+
display: flex;
29+
gap: 20px;
30+
font-size: 26px;
31+
}
32+
.wrapper {
33+
height: 50%;
34+
width: 50%;
35+
transform-style: preserve-3d;
36+
animation: translate 5s ease-in alternate infinite;
37+
}
38+
39+
.crow:nth-child(1) {
40+
position: fixed;
41+
transform: translate(20px, 50px);
42+
}
43+
.crow:nth-child(2) {
44+
position: fixed;
45+
transform: translate(180px, 40px);
46+
}
47+
.crow:nth-child(3) {
48+
position: fixed;
49+
transform: translate(280px, 180px);
50+
}
51+
.crow:nth-child(4) {
52+
position: fixed;
53+
transform: translate(100px, 180px);
54+
}
55+
.crow:nth-child(5) {
56+
position: fixed;
57+
transform: translate(500px, 100px);
58+
}
59+
.crow:nth-child(6) {
60+
position: fixed;
61+
transform: translate(350px, 20px);
62+
}
63+
.score-wrapper {
64+
position: fixed;
65+
left: 10px;
66+
top: 50px;
67+
}
68+
.score-wrapper {
69+
padding: 5px;
70+
background-color: rgba(255, 255, 255, 0.582);
71+
backdrop-filter: blur(10px);
72+
border-radius: 10px;
73+
}
74+
75+
@keyframes translate {
76+
25% {
77+
transform: translate(250px, -150px) translateZ(200px);
78+
}
79+
50% {
80+
transform: translate(-250px, 150px) translateZ(-200px);
81+
}
82+
75% {
83+
transform: translate(250px, 120px) translateZ(200px);
84+
}
85+
0%,
86+
100% {
87+
transform: translate(-300px, -200px) translateZ(-200px);
88+
}
89+
}

0 commit comments

Comments
 (0)