Added Catch the object game

kunjgit · Jul 30, 2024 · 4c4c1c7 · 4c4c1c7
1 parent f7f1fef
commit 4c4c1c7
Show file tree

Hide file tree

Showing 5 changed files with 142 additions and 0 deletions.
diff --git a/Games/catch the objects/README.md b/Games/catch the objects/README.md
@@ -0,0 +1,26 @@
+# Catch the Falling Objects
+
+## Overview
+
+"Catch the Falling Objects" is a simple HTML, CSS, and JavaScript game where players control a basket to catch falling objects. The objective is to catch as many falling objects as possible to increase your score.
+
+### Features
+
+- **Responsive Design**: The game adjusts to various screen sizes.
+- **Real-Time Scoring**: The score updates in real-time as you catch objects.
+- **Keyboard Controls**: Use the left and right arrow keys to move the basket.
+
+## Installation
+
+To set up and run the game locally, follow these steps:
+
+### Prerequisites
+
+Ensure you have a modern web browser (Chrome, Firefox, Safari, etc.) for testing the game.
+
+### Setup
+
+1. **Clone or Download the Repository**
+
+   ```bash
+   git clone <repository-url>
diff --git a/Games/catch the objects/index.html b/Games/catch the objects/index.html
@@ -0,0 +1,17 @@
+<!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</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="game-container">
+        <div id="basket"></div>
+        <div id="object"></div>
+        <div id="score">Score: 0</div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/catch the objects/script.js b/Games/catch the objects/script.js
@@ -0,0 +1,57 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const basket = document.getElementById("basket");
+    const object = document.getElementById("object");
+    const scoreDisplay = document.getElementById("score");
+
+    let score = 0;
+    let basketX = window.innerWidth / 2 - basket.offsetWidth / 2;
+    let objectX = Math.random() * (window.innerWidth - object.offsetWidth);
+    let objectY = -object.offsetHeight;
+
+    const moveBasket = (e) => {
+        if (e.key === "ArrowLeft") {
+            basketX -= 20;
+        } else if (e.key === "ArrowRight") {
+            basketX += 20;
+        }
+        basketX = Math.max(0, Math.min(window.innerWidth - basket.offsetWidth, basketX));
+        basket.style.left = `${basketX}px`;
+    };
+
+    const updateObject = () => {
+        objectY += 5;
+        if (objectY > window.innerHeight) {
+            objectY = -object.offsetHeight;
+            objectX = Math.random() * (window.innerWidth - object.offsetWidth);
+        }
+        object.style.top = `${objectY}px`;
+        object.style.left = `${objectX}px`;
+    };
+
+    const checkCollision = () => {
+        const basketRect = basket.getBoundingClientRect();
+        const objectRect = object.getBoundingClientRect();
+
+        if (
+            objectRect.left < basketRect.right &&
+            objectRect.right > basketRect.left &&
+            objectRect.top < basketRect.bottom &&
+            objectRect.bottom > basketRect.top
+        ) {
+            score++;
+            scoreDisplay.textContent = `Score: ${score}`;
+            objectY = -object.offsetHeight;
+            objectX = Math.random() * (window.innerWidth - object.offsetWidth);
+        }
+    };
+
+    document.addEventListener("keydown", moveBasket);
+
+    const gameLoop = () => {
+        updateObject();
+        checkCollision();
+        requestAnimationFrame(gameLoop);
+    };
+
+    gameLoop();
+});
diff --git a/Games/catch the objects/styles.css b/Games/catch the objects/styles.css
@@ -0,0 +1,41 @@
+body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+}
+
+.game-container {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    background-color: #87ceeb;
+}
+
+#basket {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 100px;
+    height: 50px;
+    background-color: #ff4500;
+    border-radius: 10px;
+    transform: translateX(-50%);
+}
+
+#object {
+    position: absolute;
+    top: 0;
+    width: 30px;
+    height: 30px;
+    background-color: #ff6347;
+    border-radius: 50%;
+}
+
+#score {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    font-size: 24px;
+    color: #ffffff;
+}
diff --git a/README.md b/README.md
@@ -1328,6 +1328,7 @@ This repository also provides one such platforms where contributers come over an
 |[Idle_miner](https://github.com/kunjgit/GameZone/tree/main/Games/Idle_miner)|
 |[Five_Nights_at_Freddys](https://github.com/kunjgit/GameZone/tree/main/Games/Five_Nights_at_Freddys)|
 |[Snake_Gun_Water](https://github.com/kunjgit/GameZone/tree/main/Games/Snake_Gun_Water)|
+|[Catch The Object](https://github.com/kunjgit/GameZone/tree/main/Games/Catch the objects)|
  </center>
 
 | Game                                                                                                             | Game                                                                                                    | Game                                                                                                         | Game                                                                                                               | Game                                                                                                        |