diff --git a/Games/Rainy_Day/Gameplay/Drop_Dash_1 (1).png b/Games/Rainy_Day/Gameplay/Drop_Dash_1 (1).png new file mode 100644 index 0000000000..6a1ad91963 Binary files /dev/null and b/Games/Rainy_Day/Gameplay/Drop_Dash_1 (1).png differ diff --git a/Games/Rainy_Day/Gameplay/Drop_Dash_2.png b/Games/Rainy_Day/Gameplay/Drop_Dash_2.png new file mode 100644 index 0000000000..d9c020688f Binary files /dev/null and b/Games/Rainy_Day/Gameplay/Drop_Dash_2.png differ diff --git a/Games/Rainy_Day/Gameplay/desktop.ini b/Games/Rainy_Day/Gameplay/desktop.ini new file mode 100644 index 0000000000..d51b88ec01 --- /dev/null +++ b/Games/Rainy_Day/Gameplay/desktop.ini @@ -0,0 +1,3 @@ +[LocalizedFileNames] +Screenshot 2024-07-29 113631.png=@Screenshot 2024-07-29 113631,0 +Screenshot 2024-07-29 113557.png=@Screenshot 2024-07-29 113557,0 diff --git a/Games/Rainy_Day/Readme.md b/Games/Rainy_Day/Readme.md new file mode 100644 index 0000000000..c4a35490dd --- /dev/null +++ b/Games/Rainy_Day/Readme.md @@ -0,0 +1,53 @@ +# Rainy Day + +## Description + +Water Drop Catcher is an interactive browser-based game where players control a cloud to catch falling water drops. The game aims to raise awareness about water conservation in a fun and engaging way. + +## Features + +- Responsive cloud movement using arrow keys or touch controls +- Randomly falling water drops +- Score tracking for caught water drops +- Lives system (game over after 5 missed drops) +- Modern and sleek design +- Restart functionality + +## How to Play + +1. Use the left and right arrow keys (on desktop) or touch the left/right sides of the screen (on mobile) to move the cloud. +2. Catch as many water drops as you can with the cloud. +3. Avoid letting water drops hit the ground - you have 5 lives. +4. The game ends when you lose all lives or reach a score of 10. +5. Click the "Continue" button to restart the game. + + +## Files + +- `index.html`: The main HTML file that structures the game +- `styles.css`: Contains all the styling for the game +- `script.js`: The JavaScript file that handles game logic and interactions + +## Customization + +You can easily customize various aspects of the game by modifying the following in `script.js`: + +- Cloud speed: Adjust the `speed` property in the `cloud` object +- Drop creation frequency: Modify the condition in `if (Math.random() < 0.01)` +- Maximum number of drops: Change the `maxDrops` variable +- Drop speed: Alter the speed calculation in the `createDrop()` function + +## Technologies Used + +- HTML5 +- CSS3 +- JavaScript +- HTML5 Canvas + +## Installation + +1. Clone this repository . +```bash + clone git https://github.com/kunjgit/GameZone/tree/main/Games/Rainy_Day +``` +2. Open the `index.html` file in a web browser to start the game. diff --git a/Games/Rainy_Day/index.html b/Games/Rainy_Day/index.html new file mode 100644 index 0000000000..14825c243a --- /dev/null +++ b/Games/Rainy_Day/index.html @@ -0,0 +1,22 @@ + + + + + + Water Drop Catcher + + + +
+ +
Score: 0
+
Lives: 5
+ +
+ + + \ No newline at end of file diff --git a/Games/Rainy_Day/script.js b/Games/Rainy_Day/script.js new file mode 100644 index 0000000000..1ec06eb4b1 --- /dev/null +++ b/Games/Rainy_Day/script.js @@ -0,0 +1,137 @@ +const canvas = document.getElementById('gameCanvas'); +const ctx = canvas.getContext('2d'); +const scoreElement = document.getElementById('score'); +const livesElement = document.getElementById('lives'); +const gameOverElement = document.getElementById('gameOver'); +const finalScoreElement = document.getElementById('finalScore'); +const continueBtn = document.getElementById('continueBtn'); + +canvas.width = 400; +canvas.height = 600; + +let cloud = { + x: canvas.width / 2, + y: canvas.height - 50, + width: 80, + height: 50, + speed: 10 +}; + +let drops = []; +let score = 0; +let lives = 6; +let gameLoop; + +function drawCloud() { + ctx.fillStyle = '#fff'; + ctx.beginPath(); + ctx.arc(cloud.x, cloud.y, 25, 0, Math.PI * 2); + ctx.arc(cloud.x - 25, cloud.y, 20, 0, Math.PI * 2); + ctx.arc(cloud.x + 25, cloud.y, 20, 0, Math.PI * 2); + ctx.fill(); +} + +function drawDrop(drop) { + ctx.fillStyle = '#00f'; + ctx.beginPath(); + ctx.arc(drop.x, drop.y, 5, 0, Math.PI * 2); + ctx.fill(); +} + +function createDrop() { + return { + x: Math.random() * canvas.width, + y: 0, + speed: Math.random() * 1 + .5 + }; +} + +function update() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + + drawCloud(); + + if (Math.random() < 0.01) { + drops.push(createDrop()); + } + + drops.forEach((drop, index) => { + drop.y += drop.speed; + drawDrop(drop); + + if (drop.y > canvas.height) { + drops.splice(index, 1); + lives--; + updateLives(); + if (lives === 0) { + gameOver(); + } + } + + if ( + drop.x > cloud.x - cloud.width / 2 && + drop.x < cloud.x + cloud.width / 2 && + drop.y > cloud.y - cloud.height / 2 && + drop.y < cloud.y + cloud.height / 2 + ) { + drops.splice(index, 1); + score++; + updateScore(); + } + }); + + if (score >= 10) { + gameOver(); + } + + gameLoop = requestAnimationFrame(update); +} + +function updateScore() { + scoreElement.textContent = `Score: ${score}`; +} + +function updateLives() { + livesElement.textContent = `Lives: ${lives}`; +} + +function gameOver() { + cancelAnimationFrame(gameLoop); + gameOverElement.classList.remove('hidden'); + finalScoreElement.textContent = score; +} + +function resetGame() { + score = 0; + lives = 5; + drops = []; + updateScore(); + updateLives(); + gameOverElement.classList.add('hidden'); + update(); +} + +document.addEventListener('keydown', (e) => { + if (e.key === 'ArrowLeft' && cloud.x > cloud.width / 2) { + cloud.x -= cloud.speed; + } else if (e.key === 'ArrowRight' && cloud.x < canvas.width - cloud.width / 2) { + cloud.x += cloud.speed; + } +}); + +canvas.addEventListener('touchstart', (e) => { + e.preventDefault(); + const touch = e.touches[0]; + const rect = canvas.getBoundingClientRect(); + const touchX = touch.clientX - rect.left; + + if (touchX < canvas.width / 2) { + cloud.x -= cloud.speed; + } else { + cloud.x += cloud.speed; + } +}); + +continueBtn.addEventListener('click', resetGame); + +resetGame(); \ No newline at end of file diff --git a/Games/Rainy_Day/style.css b/Games/Rainy_Day/style.css new file mode 100644 index 0000000000..269960b52b --- /dev/null +++ b/Games/Rainy_Day/style.css @@ -0,0 +1,74 @@ +body { + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #1a1a2e; + font-family: 'Arial', sans-serif; + color: #ffffff; +} + +.game-container { + position: relative; + width: 400px; + height: 600px; +} + +canvas { + border: 2px solid #16213e; + border-radius: 10px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); +} + +#score, #lives { + position: absolute; + top: 10px; + font-size: 20px; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); +} + +#score { + left: 10px; +} + +#lives { + right: 10px; +} + +#gameOver { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: rgba(22, 33, 62, 0.9); + padding: 20px; + border-radius: 10px; + text-align: center; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); +} + +#gameOver h2 { + margin-top: 0; + color: #e94560; +} + +#continueBtn { + background-color: #e94560; + color: #fff; + border: none; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + border-radius: 5px; + transition: background-color 0.3s; +} + +#continueBtn:hover { + background-color: #c13e54; +} + +.hidden { + display: none; +} \ No newline at end of file