Skip to content

Commit f7f1fef

Browse files
kunjgitkunjgit
authoredJul 30, 2024··
Merge pull request #5019 from kosuri-indu/add/underwater-shoot
Added: Underwater Shoot Game
2 parents ee6edcc + 82857d0 commit f7f1fef

14 files changed

+288
-0
lines changed
 

‎Games/Underwater Shoot/README.md

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# **Underwater Shoot**
2+
3+
---
4+
5+
<br>
6+
7+
## **Description 📃**
8+
Underwater Shoot is a fun and interactive game where players click on creatures to score points. The goal is to score as many points as possible within 60 seconds.
9+
10+
## **Functionalities 🎮**
11+
- Click on the creatures to shoot them.
12+
- Large Creatures: 5 points
13+
- Medium Creatures: 10 points
14+
- Small Creatures: 15 points
15+
- Score as many points as possible within 60 seconds!
16+
17+
## **How to Play? 🕹️**
18+
- Open `index.html` in your web browser to start the game.
19+
- Click the "Start Game" button to begin.
20+
- Click on the creatures to shoot them and score points.
21+
- Aim to score as many points as possible within the 60-second time limit.
22+
23+
<br>
24+
25+
---
26+
27+
## **Screenshots 📸**
28+
![image](../../assets/Underwater_Shoot.png)
29+
30+
<br>
31+
32+
---
33+

‎Games/Underwater Shoot/assets/background.mp4

8.36 MB
Binary file not shown.

‎Games/Underwater Shoot/assets/creature1.png

1020 KB
Loading

‎Games/Underwater Shoot/assets/creature2.png

792 KB
Loading

‎Games/Underwater Shoot/assets/creature3.png

1.31 MB
Loading

‎Games/Underwater Shoot/assets/creature4.png

1.47 MB
Loading

‎Games/Underwater Shoot/assets/creature5.png

1.17 MB
Loading

‎Games/Underwater Shoot/assets/creature6.png

2.2 MB
Loading

‎Games/Underwater Shoot/assets/creature7.png

1.43 MB
Loading

‎Games/Underwater Shoot/index.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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>Underwater Shoot</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<video autoplay muted loop id="background-video">
11+
<source src="assets/background.mp4" type="video/mp4">
12+
Your browser does not support the video tag.
13+
</video>
14+
<div class="game-container">
15+
<div class="game-area" id="game-area"></div>
16+
<div class="info">
17+
<p>Score: <span id="score">0</span></p>
18+
<p>Time: <span id="time">60</span>s</p>
19+
<button id="start-button">Start Game</button>
20+
</div>
21+
</div>
22+
<div class="instructions">
23+
<h2>How to Play</h2>
24+
<ul>
25+
<li>Click on the creatures to shoot them.</li>
26+
<li>Large Creatures: 5 points</li>
27+
<li>Medium Creatures: 10 points</li>
28+
<li>Small Creatures: 15 points</li>
29+
<li>Score as many points as possible within 60 seconds!</li>
30+
</ul>
31+
</div>
32+
<script src="script.js"></script>
33+
</body>
34+
</html>

‎Games/Underwater Shoot/script.js

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
let gameArea = document.getElementById('game-area');
2+
let scoreElement = document.getElementById('score');
3+
let timeElement = document.getElementById('time');
4+
let startButton = document.getElementById('start-button');
5+
let caughtMessage;
6+
7+
let score = 0;
8+
let time = 60;
9+
let gameInterval;
10+
let timerInterval;
11+
let maxCreatures = 5;
12+
13+
startButton.addEventListener('click', startGame);
14+
15+
function startGame() {
16+
score = 0;
17+
time = 60;
18+
scoreElement.textContent = score;
19+
timeElement.textContent = time;
20+
startButton.disabled = true;
21+
22+
while (gameArea.firstChild) {
23+
gameArea.removeChild(gameArea.firstChild);
24+
}
25+
26+
caughtMessage = document.createElement('div');
27+
caughtMessage.className = 'caught-message';
28+
caughtMessage.textContent = 'Caught!';
29+
gameArea.appendChild(caughtMessage);
30+
31+
gameInterval = setInterval(gameLoop, 1000 / 60);
32+
timerInterval = setInterval(updateTimer, 1000);
33+
spawnCreatures(maxCreatures);
34+
}
35+
36+
function updateTimer() {
37+
time--;
38+
timeElement.textContent = time;
39+
40+
if (time <= 0) {
41+
clearInterval(gameInterval);
42+
clearInterval(timerInterval);
43+
alert('Game Over! Your score is ' + score);
44+
startButton.disabled = false;
45+
}
46+
}
47+
48+
function spawnCreatures(number) {
49+
for (let i = 0; i < number; i++) {
50+
spawnCreature();
51+
}
52+
}
53+
54+
function spawnCreature() {
55+
let creature = document.createElement('div');
56+
creature.className = 'creature';
57+
58+
let creatureIndex = Math.floor(Math.random() * 7) + 1;
59+
creature.style.backgroundImage = `url('assets/creature${creatureIndex}.png')`;
60+
creature.style.backgroundSize = 'contain';
61+
creature.style.backgroundRepeat = 'no-repeat';
62+
63+
let sizeCategory = Math.random();
64+
if (sizeCategory < 0.33) {
65+
creature.style.width = '200px';
66+
creature.style.height = '200px';
67+
creature.dataset.points = '5';
68+
} else if (sizeCategory < 0.66) {
69+
creature.style.width = '150px';
70+
creature.style.height = '150px';
71+
creature.dataset.points = '10';
72+
} else {
73+
creature.style.width = '100px';
74+
creature.style.height = '100px';
75+
creature.dataset.points = '15';
76+
}
77+
78+
creature.style.left = Math.random() * (gameArea.clientWidth - parseInt(creature.style.width)) + 'px';
79+
creature.style.top = Math.random() * (gameArea.clientHeight - parseInt(creature.style.height)) + 'px';
80+
81+
creature.addEventListener('click', () => {
82+
score += parseInt(creature.dataset.points);
83+
scoreElement.textContent = score;
84+
caughtMessage.style.left = creature.style.left;
85+
caughtMessage.style.top = creature.style.top;
86+
caughtMessage.style.display = 'block';
87+
88+
setTimeout(() => {
89+
caughtMessage.style.display = 'none';
90+
}, 5000);
91+
92+
creature.remove();
93+
spawnCreature();
94+
});
95+
96+
gameArea.appendChild(creature);
97+
98+
setTimeout(() => {
99+
if (creature.parentElement === gameArea) {
100+
creature.remove();
101+
spawnCreature();
102+
}
103+
}, 5000);
104+
}
105+
106+
function gameLoop() {
107+
108+
}

‎Games/Underwater Shoot/style.css

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
body {
2+
margin: 0;
3+
overflow: hidden;
4+
font-family: Arial, sans-serif;
5+
}
6+
#background-video {
7+
position: fixed;
8+
top: 0;
9+
left: 0;
10+
width: 100%;
11+
height: 100%;
12+
object-fit: cover;
13+
z-index: -1;
14+
}
15+
.game-container {
16+
display: flex;
17+
flex-direction: column;
18+
align-items: center;
19+
justify-content: center;
20+
height: 100vh;
21+
color: white;
22+
text-shadow: 2px 2px 4px #000;
23+
position: relative;
24+
z-index: 1;
25+
}
26+
.game-area {
27+
position: relative;
28+
width: 100%;
29+
height: 100%;
30+
overflow: hidden;
31+
perspective: 1000px;
32+
}
33+
.creature {
34+
position: absolute;
35+
background-size: contain;
36+
animation: shake 0.5s infinite;
37+
}
38+
.info {
39+
position: absolute;
40+
top: 10px;
41+
width: 100%;
42+
display: flex;
43+
justify-content: space-between;
44+
padding: 2rem;
45+
font-size: large;
46+
color: white;
47+
text-shadow: 2px 2px 4px #000;
48+
}
49+
.info p {
50+
margin-left: 3rem;
51+
font-size: 1.5rem;
52+
}
53+
button {
54+
background-color: lightblue;
55+
border-radius: 1rem;
56+
margin-right: 3rem;
57+
padding: 10px 20px;
58+
font-size: 16px;
59+
cursor: pointer;
60+
}
61+
button:hover, .instructions:hover {
62+
background-color: lightcoral;
63+
}
64+
.instructions {
65+
position: absolute;
66+
bottom: 10px;
67+
right: 10px;
68+
background-color: rgba(255, 255, 255, 0.8);
69+
padding: 2rem;
70+
margin: 2rem;
71+
border: 2px solid #000;
72+
border-radius: 2rem;
73+
width: 300px;
74+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
75+
background-color: lightblue;
76+
}
77+
78+
.instructions h2 {
79+
margin-top: 0;
80+
}
81+
82+
.instructions ul {
83+
padding-left: 20px;
84+
}
85+
@keyframes shake {
86+
0% { transform: translate(1px, 1px) rotate(0deg); }
87+
10% { transform: translate(-1px, -2px) rotate(-1deg); }
88+
20% { transform: translate(-3px, 0px) rotate(1deg); }
89+
30% { transform: translate(3px, 2px) rotate(0deg); }
90+
40% { transform: translate(1px, -1px) rotate(1deg); }
91+
50% { transform: translate(-1px, 2px) rotate(-1deg); }
92+
60% { transform: translate(-3px, 1px) rotate(0deg); }
93+
70% { transform: translate(3px, 1px) rotate(-1deg); }
94+
80% { transform: translate(-1px, -1px) rotate(1deg); }
95+
90% { transform: translate(1px, 2px) rotate(0deg); }
96+
100% { transform: translate(1px, -2px) rotate(-1deg); }
97+
}
98+
.creature {
99+
position: absolute;
100+
background-size: contain;
101+
background-repeat: no-repeat;
102+
}
103+
104+
.caught-message {
105+
position: absolute;
106+
display: none;
107+
background-color: rgba(255, 255, 255, 0.8);
108+
padding: 5px;
109+
border-radius: 5px;
110+
font-size: 16px;
111+
color: black;
112+
}

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -431,6 +431,7 @@ Terms and conditions for use, reproduction and distribution are under the [Apach
431431
| [DNA_Sequencer](https://github.com/kunjgit/GameZone/tree/main/Games/DNA_Sequencer) |
432432
| [Boom_Blast](https://github.com/kunjgit/GameZone/tree/main/Games/Boom_Blast) |
433433
| [Shadow_Runner](https://github.com/kunjgit/GameZone/tree/main/Games/Shadow_Runner) |
434+
| [Underwater_Shoot](https://github.com/kunjgit/GameZone/tree/main/Games/Underwater_Shoot) |
434435

435436
</center>
436437
<br>

‎assets/images/Underwater_Shoot.png

1.27 MB
Loading

0 commit comments

Comments
 (0)
Please sign in to comment.