Merge pull request #4336 from katarianikita2003/main

New Game: Catch_The_Falling_Objects
kunjgit · Jun 20, 2024 · 211c013 · 211c013
2 parents 97e0cf5 + 70a0efb
commit 211c013
Show file tree

Hide file tree

Showing 7 changed files with 251 additions and 0 deletions.
diff --git a/Games/Catch_The_Falling_Object/README.md b/Games/Catch_The_Falling_Object/README.md
@@ -0,0 +1,27 @@
+# Catch the Falling Objects Game
+
+This is a simple browser-based game where you need to catch falling objects using a basket. 
+
+## How to Play
+
+1. Open `index.html` in your web browser.
+2. Move the basket using your mouse to catch falling objects.
+3. If an object reaches the ground without being caught, you'll lose a life.
+4. You have 5 lives. If you lose all lives, the game ends.
+5. Try to catch as many objects as you can to score points.
+
+## Features
+
+- Catch falling objects with the basket.
+- Keep track of your score.
+- Monitor your remaining lives.
+- Restart the game when it's over.
+
+## Screenshots
+
+![Game Screenshot]GameZone\assets\images\Catch_the_falling_object-1.png
+
+## Credits
+
+This game was created by Nikita Saini [github - @katarianikita2003] as a simple project.
+
diff --git a/Games/Catch_The_Falling_Object/index.html b/Games/Catch_The_Falling_Object/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Catch the Falling Objects Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="game-container" id="game-container">
+        <div class="basket" id="basket"></div>
+        <div class="score" id="score">Score: 0</div>
+        <div class="lives" id="lives">
+            Lives:
+            <span id="heart-container">
+                <span class="heart" id="heart1"></span>
+                <span class="heart" id="heart2"></span>
+                <span class="heart" id="heart3"></span>
+                <span class="heart" id="heart4"></span>
+                <span class="heart" id="heart5"></span>
+            </span>
+        </div>
+        <div class="game-over" id="game-over">Game Over<br>Final Score: <span id="final-score"></span><br><button class="btn" onclick="startGame()">Restart</button></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Games/Catch_The_Falling_Object/script.js b/Games/Catch_The_Falling_Object/script.js
@@ -0,0 +1,113 @@
+const basket = document.getElementById('basket');
+const gameContainer = document.getElementById('game-container');
+const scoreDisplay = document.getElementById('score');
+const livesContainer = document.getElementById('lives');
+const gameOverDisplay = document.getElementById('game-over');
+const finalScoreDisplay = document.getElementById('final-score');
+
+let score = 0;
+let lives = 5;
+let fallingObjectInterval;
+let gameOver = false;
+
+document.addEventListener('mousemove', (event) => {
+    if (!gameOver) {
+        let containerRect = gameContainer.getBoundingClientRect();
+        let basketWidth = basket.offsetWidth;
+        let x = event.clientX - containerRect.left - basketWidth / 2;
+        if (x < 0) x = 0;
+        if (x > containerRect.width - basketWidth) x = containerRect.width - basketWidth;
+        basket.style.left = x + 'px';
+    }
+});
+
+function createFallingObject() {
+    if (gameOver) return;
+
+    const fallingObject = document.createElement('div');
+    fallingObject.classList.add('falling-object');
+    fallingObject.style.left = Math.random() * (gameContainer.offsetWidth - 30) + 'px';
+    gameContainer.appendChild(fallingObject);
+
+    let fallingInterval = setInterval(() => {
+        if (gameOver) {
+            clearInterval(fallingInterval);
+            return;
+        }
+
+        let top = parseInt(fallingObject.style.top || 0);
+        if (top > gameContainer.offsetHeight - 40) {
+            clearInterval(fallingInterval);
+            fallingObject.remove();
+            loseLife();
+        } else {
+            fallingObject.style.top = top + 5 + 'px';
+            if (isCaught(fallingObject)) {
+                clearInterval(fallingInterval);
+                fallingObject.remove();
+                score++;
+                scoreDisplay.innerText = 'Score: ' + score;
+            }
+        }
+    }, 20);
+}
+
+function isCaught(fallingObject) {
+    let objectRect = fallingObject.getBoundingClientRect();
+    let basketRect = basket.getBoundingClientRect();
+    return (
+        objectRect.right >= basketRect.left &&
+        objectRect.left <= basketRect.right &&
+        objectRect.bottom >= basketRect.top &&
+        objectRect.top <= basketRect.bottom
+    );
+}
+
+function loseLife() {
+    if (lives > 0) {
+        lives--;
+        updateLivesDisplay();
+    }
+    if (lives <= 0) {
+        endGame();
+    }
+}
+
+function updateLivesDisplay() {
+    livesContainer.innerText = 'Lives: ';
+    for (let i = 1; i <= 5; i++) {
+        const heart = document.createElement('span');
+        heart.classList.add('heart');
+        if (i > lives) {
+            heart.style.color = 'transparent';
+        }
+        heart.innerText = '❤';
+        livesContainer.appendChild(heart);
+    }
+}
+
+function endGame() {
+    gameOver = true;
+    clearInterval(fallingObjectInterval);
+    finalScoreDisplay.innerText = 'Final Score: ' + score; // Display total score
+    gameOverDisplay.innerHTML = 'Game Over<br>' + finalScoreDisplay.innerHTML + '<br><button onclick="startGame()">Restart</button>'; // Update game over display with total score and restart button
+    gameOverDisplay.style.display = 'block';
+}
+
+function startGame() {
+    gameOver = false;
+    score = 0;
+    lives = 5;
+    scoreDisplay.innerText = 'Score: ' + score;
+    updateLivesDisplay();
+    gameOverDisplay.style.display = 'none';
+
+    // Remove existing falling objects
+    document.querySelectorAll('.falling-object').forEach(obj => obj.remove());
+
+    // Start creating falling objects again
+    fallingObjectInterval = setInterval(createFallingObject, 1000);
+}
+
+// Initialize the game
+startGame();
diff --git a/Games/Catch_The_Falling_Object/style.css b/Games/Catch_The_Falling_Object/style.css
@@ -0,0 +1,80 @@
+body {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-image: linear-gradient(#e4f37a, #8ded9a);
+  color: white;
+  font-family: Arial, sans-serif;
+}
+
+.game-container {
+  position: relative;
+  width: 700px;
+  height: 800px;
+  background-color: #2e2c2c81;
+  border: 2px solid #3333339f;
+  overflow: hidden;
+}
+
+.basket {
+  position: absolute;
+  bottom: 10px;
+  width: 100px;
+  height: 30px;
+  background-color: #33f209;
+  border-radius: 10px;
+}
+
+.falling-object {
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  background-color: #fff704;
+  border-radius: 50%;
+}
+
+.score,
+.lives {
+  position: absolute;
+  top: 40px;
+  font-size: 24px;
+}
+
+.heart {
+    font-size: 24px;
+    color: rgb(136, 3, 3);
+    margin-right: 5px;
+}
+
+.score {
+  left: 10px;
+}
+
+.lives {
+  right: 10px;
+}
+
+.game-over {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: rgba(0, 0, 0, 0.699);
+  color: rgb(206, 241, 241);
+  padding: 25px;
+  border-radius: 20px;
+  text-align: center;
+  display: none;
+}
+
+button {
+  border-radius: 7px;
+  font-size: medium;
+  border: 2px solid black;
+  background-color: #cbe7ff;
+  margin: 7px 7px;
+  padding: 4px 22px;
+}
diff --git a/README.md b/README.md
@@ -659,6 +659,7 @@ This repository also provides one such platforms where contributers come over an
 | [Automated_rock_paper_scissor](https://github.com/kunjgit/GameZone/tree/main/Games/automated_rock_paper_scissor) |
 | [Maze_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Maze_Game) | [Astronaut_runner](https://github.com/tanishkaa08/GameZone/tree/main/Games/Astronaunt_runner) |
 | [16_Puzzle](https://github.com/kunjgit/GameZone/tree/main/Games/16_Puzzle) |
+| [Catch_The_Falling_Object](https://github.com/kunjgit/GameZone/tree/main/Games/Catch_The_Falling_Object) |
 | [Dragon_Tower](https://github.com/kunjgit/GameZone/tree/main/Games/Dragon_Tower) |
 | [Hover_Board_Effect](https://github.com/kunjgit/GameZone/tree/main/Games/Hover_Board_Effect) |
 | [escaperoom](https://github.com/kunjgit/GameZone/tree/main/Games/escaperoom) |

diff --git a/assets/images/Catch_the_falling_object-1.png b/assets/images/Catch_the_falling_object-1.png
diff --git a/assets/images/Catch_the_falling_object_2.png b/assets/images/Catch_the_falling_object_2.png