Merge pull request #5019 from kosuri-indu/add/underwater-shoot

Added: Underwater Shoot Game
kunjgit · Jul 30, 2024 · f7f1fef · f7f1fef
2 parents ee6edcc + 82857d0
commit f7f1fef
Show file tree

Hide file tree

Showing 14 changed files with 288 additions and 0 deletions.
diff --git a/Games/Underwater Shoot/README.md b/Games/Underwater Shoot/README.md
@@ -0,0 +1,33 @@
+# **Underwater Shoot**
+
+---
+
+<br> 
+
+## **Description 📃**
+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.
+
+## **Functionalities 🎮**
+- Click on the creatures to shoot them.
+- Large Creatures: 5 points
+- Medium Creatures: 10 points
+- Small Creatures: 15 points
+- Score as many points as possible within 60 seconds!
+
+## **How to Play? 🕹️**
+- Open `index.html` in your web browser to start the game.
+- Click the "Start Game" button to begin.
+- Click on the creatures to shoot them and score points.
+- Aim to score as many points as possible within the 60-second time limit.
+
+<br>
+
+---
+
+## **Screenshots 📸**
+![image](../../assets/Underwater_Shoot.png)
+
+<br>
+
+---
+
diff --git a/Games/Underwater Shoot/assets/background.mp4 b/Games/Underwater Shoot/assets/background.mp4
diff --git a/Games/Underwater Shoot/assets/creature1.png b/Games/Underwater Shoot/assets/creature1.png
diff --git a/Games/Underwater Shoot/assets/creature2.png b/Games/Underwater Shoot/assets/creature2.png
diff --git a/Games/Underwater Shoot/assets/creature3.png b/Games/Underwater Shoot/assets/creature3.png
diff --git a/Games/Underwater Shoot/assets/creature4.png b/Games/Underwater Shoot/assets/creature4.png
diff --git a/Games/Underwater Shoot/assets/creature5.png b/Games/Underwater Shoot/assets/creature5.png
diff --git a/Games/Underwater Shoot/assets/creature6.png b/Games/Underwater Shoot/assets/creature6.png
diff --git a/Games/Underwater Shoot/assets/creature7.png b/Games/Underwater Shoot/assets/creature7.png
diff --git a/Games/Underwater Shoot/index.html b/Games/Underwater Shoot/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Underwater Shoot</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <video autoplay muted loop id="background-video">
+        <source src="assets/background.mp4" type="video/mp4">
+        Your browser does not support the video tag.
+    </video>
+    <div class="game-container">
+        <div class="game-area" id="game-area"></div>
+        <div class="info">
+            <p>Score: <span id="score">0</span></p>
+            <p>Time: <span id="time">60</span>s</p>
+            <button id="start-button">Start Game</button>
+        </div>
+    </div>
+    <div class="instructions">
+        <h2>How to Play</h2>
+        <ul>
+            <li>Click on the creatures to shoot them.</li>
+            <li>Large Creatures: 5 points</li>
+            <li>Medium Creatures: 10 points</li>
+            <li>Small Creatures: 15 points</li>
+            <li>Score as many points as possible within 60 seconds!</li>
+        </ul>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Underwater Shoot/script.js b/Games/Underwater Shoot/script.js
@@ -0,0 +1,108 @@
+let gameArea = document.getElementById('game-area');
+let scoreElement = document.getElementById('score');
+let timeElement = document.getElementById('time');
+let startButton = document.getElementById('start-button');
+let caughtMessage;
+
+let score = 0;
+let time = 60;
+let gameInterval;
+let timerInterval;
+let maxCreatures = 5;
+
+startButton.addEventListener('click', startGame);
+
+function startGame() {
+    score = 0;
+    time = 60;
+    scoreElement.textContent = score;
+    timeElement.textContent = time;
+    startButton.disabled = true;
+
+    while (gameArea.firstChild) {
+        gameArea.removeChild(gameArea.firstChild);
+    }
+
+    caughtMessage = document.createElement('div');
+    caughtMessage.className = 'caught-message';
+    caughtMessage.textContent = 'Caught!';
+    gameArea.appendChild(caughtMessage);
+
+    gameInterval = setInterval(gameLoop, 1000 / 60);
+    timerInterval = setInterval(updateTimer, 1000);
+    spawnCreatures(maxCreatures);
+}
+
+function updateTimer() {
+    time--;
+    timeElement.textContent = time;
+
+    if (time <= 0) {
+        clearInterval(gameInterval);
+        clearInterval(timerInterval);
+        alert('Game Over! Your score is ' + score);
+        startButton.disabled = false;
+    }
+}
+
+function spawnCreatures(number) {
+    for (let i = 0; i < number; i++) {
+        spawnCreature();
+    }
+}
+
+function spawnCreature() {
+    let creature = document.createElement('div');
+    creature.className = 'creature';
+
+    let creatureIndex = Math.floor(Math.random() * 7) + 1;
+    creature.style.backgroundImage = `url('assets/creature${creatureIndex}.png')`;
+    creature.style.backgroundSize = 'contain';
+    creature.style.backgroundRepeat = 'no-repeat';
+
+    let sizeCategory = Math.random();
+    if (sizeCategory < 0.33) {
+        creature.style.width = '200px';
+        creature.style.height = '200px';
+        creature.dataset.points = '5';
+    } else if (sizeCategory < 0.66) {
+        creature.style.width = '150px';
+        creature.style.height = '150px';
+        creature.dataset.points = '10';
+    } else {
+        creature.style.width = '100px';
+        creature.style.height = '100px';
+        creature.dataset.points = '15';
+    }
+
+    creature.style.left = Math.random() * (gameArea.clientWidth - parseInt(creature.style.width)) + 'px';
+    creature.style.top = Math.random() * (gameArea.clientHeight - parseInt(creature.style.height)) + 'px';
+
+    creature.addEventListener('click', () => {
+        score += parseInt(creature.dataset.points);
+        scoreElement.textContent = score;
+        caughtMessage.style.left = creature.style.left;
+        caughtMessage.style.top = creature.style.top;
+        caughtMessage.style.display = 'block';
+
+        setTimeout(() => {
+            caughtMessage.style.display = 'none';
+        }, 5000);
+
+        creature.remove();
+        spawnCreature();
+    });
+
+    gameArea.appendChild(creature);
+
+    setTimeout(() => {
+        if (creature.parentElement === gameArea) {
+            creature.remove();
+            spawnCreature();
+        }
+    }, 5000);
+}
+
+function gameLoop() {
+
+}
diff --git a/Games/Underwater Shoot/style.css b/Games/Underwater Shoot/style.css
@@ -0,0 +1,112 @@
+body {
+    margin: 0;
+    overflow: hidden;
+    font-family: Arial, sans-serif;
+}
+#background-video {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: -1;
+}
+.game-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    color: white;
+    text-shadow: 2px 2px 4px #000;
+    position: relative;
+    z-index: 1;
+}
+.game-area {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    perspective: 1000px;
+}
+.creature {
+    position: absolute;
+    background-size: contain;
+    animation: shake 0.5s infinite;
+}
+.info {
+    position: absolute;
+    top: 10px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 2rem;
+    font-size: large;
+    color: white;
+    text-shadow: 2px 2px 4px #000;
+}
+.info p {
+    margin-left: 3rem;
+    font-size: 1.5rem;
+}
+button {
+    background-color: lightblue;
+    border-radius: 1rem;
+    margin-right: 3rem;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+}
+button:hover, .instructions:hover {
+    background-color: lightcoral;
+}
+.instructions {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    background-color: rgba(255, 255, 255, 0.8);
+    padding: 2rem;
+    margin: 2rem;
+    border: 2px solid #000;
+    border-radius: 2rem;
+    width: 300px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    background-color: lightblue;
+}
+
+.instructions h2 {
+    margin-top: 0;
+}
+
+.instructions ul {
+    padding-left: 20px;
+}
+@keyframes shake {
+    0% { transform: translate(1px, 1px) rotate(0deg); }
+    10% { transform: translate(-1px, -2px) rotate(-1deg); }
+    20% { transform: translate(-3px, 0px) rotate(1deg); }
+    30% { transform: translate(3px, 2px) rotate(0deg); }
+    40% { transform: translate(1px, -1px) rotate(1deg); }
+    50% { transform: translate(-1px, 2px) rotate(-1deg); }
+    60% { transform: translate(-3px, 1px) rotate(0deg); }
+    70% { transform: translate(3px, 1px) rotate(-1deg); }
+    80% { transform: translate(-1px, -1px) rotate(1deg); }
+    90% { transform: translate(1px, 2px) rotate(0deg); }
+    100% { transform: translate(1px, -2px) rotate(-1deg); }
+}
+.creature {
+    position: absolute;
+    background-size: contain; 
+    background-repeat: no-repeat; 
+}
+
+.caught-message {
+    position: absolute;
+    display: none;
+    background-color: rgba(255, 255, 255, 0.8);
+    padding: 5px;
+    border-radius: 5px;
+    font-size: 16px;
+    color: black;
+}
diff --git a/README.md b/README.md
@@ -431,6 +431,7 @@ Terms and conditions for use, reproduction and distribution are under the [Apach
 | [DNA_Sequencer](https://github.com/kunjgit/GameZone/tree/main/Games/DNA_Sequencer) | 
 | [Boom_Blast](https://github.com/kunjgit/GameZone/tree/main/Games/Boom_Blast) |
 | [Shadow_Runner](https://github.com/kunjgit/GameZone/tree/main/Games/Shadow_Runner) | 
+| [Underwater_Shoot](https://github.com/kunjgit/GameZone/tree/main/Games/Underwater_Shoot) | 
 
 </center>
 <br>

diff --git a/assets/images/Underwater_Shoot.png b/assets/images/Underwater_Shoot.png