Merge pull request Sulagna-Dutta-Roy#2559 from Shantnu-singh/master

Drop Dash Game
P-lavanya16 · Jul 29, 2024 · 5546966 · 5546966
2 parents dc370bf + a3fef68
commit 5546966
Show file tree

Hide file tree

Showing 7 changed files with 296 additions and 0 deletions.
diff --git a/Drop Dash Game/Gameplay/Drop_Dash_1 (1).png b/Drop Dash Game/Gameplay/Drop_Dash_1 (1).png
diff --git a/Drop Dash Game/Gameplay/Drop_Dash_2.png b/Drop Dash Game/Gameplay/Drop_Dash_2.png
diff --git a/Drop Dash Game/Readme.md b/Drop Dash Game/Readme.md
@@ -0,0 +1,53 @@
+# Drop Dash
+
+## 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/Sulagna-Dutta-Roy/GGExtensions/tree/master/Drop Dash Game
+```
+2. Open the `index.html` file in a web browser to start the game.
diff --git a/Drop Dash Game/index.html b/Drop Dash Game/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Water Drop Catcher</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="game-container">
+        <canvas id="gameCanvas"></canvas>
+        <div id="score">Score: 0</div>
+        <div id="lives">Lives: 5</div>
+        <div id="gameOver" class="hidden">
+            <h2>Game Over</h2>
+            <p>Your Score: <span id="finalScore"></span></p>
+            <button id="continueBtn">Continue</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Drop Dash Game/manifest.json b/Drop Dash Game/manifest.json
@@ -0,0 +1,10 @@
+{
+    "name": "Water Drop Catcher",
+    "short_name": "Drop Catcher",
+    "description": "An interactive game to catch water drops and raise awareness about water conservation.",
+    "start_url": "/index.html",
+    "display": "standalone",
+    "background_color": "#4682B4",
+    "theme_color": "#87CEEB",
+    "orientation": "portrait"
+  }
diff --git a/Drop Dash Game/script.js b/Drop Dash Game/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();
diff --git a/Drop Dash Game/style.css b/Drop Dash Game/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;
+}