diff --git a/Games/Catch_The_Objects/README.md b/Games/Catch_The_Objects/README.md new file mode 100644 index 0000000000..3b528fa706 --- /dev/null +++ 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 diff --git a/Games/Catch_The_Objects/index.html b/Games/Catch_The_Objects/index.html new file mode 100644 index 0000000000..099b333cb7 --- /dev/null +++ b/Games/Catch_The_Objects/index.html @@ -0,0 +1,17 @@ + + + + + + Catch the Falling Objects + + + +
+
+
+
Score: 0
+
+ + + diff --git a/Games/Catch_The_Objects/script.js b/Games/Catch_The_Objects/script.js new file mode 100644 index 0000000000..6f1f2a44d5 --- /dev/null +++ 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 new file mode 100644 index 0000000000..34d70b32ce --- /dev/null +++ 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 index 7fee9a6cd5..f5ea8158ac 100644 --- a/README.md +++ b/README.md @@ -1330,6 +1330,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)| | Game | Game | Game | Game | Game |