Merge pull request #5157 from AmruthaPariprolu/balloon-defense-game

Balloon Defense Game added
kunjgit · Aug 10, 2024 · ac4ce20 · ac4ce20
2 parents 3c7f558 + 5044477
commit ac4ce20
Show file tree

Hide file tree

Showing 6 changed files with 166 additions and 1 deletion.
diff --git a/Games/Balloon_Defense_Game/README.md b/Games/Balloon_Defense_Game/README.md
@@ -0,0 +1,29 @@
+# Balloon Defense Game
+
+## Overview
+Balloon Defense is a simple web-based game where players control a cannon to shoot at a balloon. The goal is to align the cannon and fire at the balloon to pop it. The game is built using HTML, CSS, and JavaScript.
+
+## Features
+- **Interactive Controls**: Move the cannon left or right and fire at the balloon.
+- **Hit Detection**: Check if the shot hits the balloon.
+- **Reset Functionality**: Reset the balloon to a new random position after each shot.
+- **Simple UI**: Clean and straightforward user interface.
+
+## How to Play
+1. **Objective**: Align the cannon with the balloon and fire to pop it.
+2. **Controls**:
+   - **Left Button**: Moves the cannon to the left.
+   - **Right Button**: Moves the cannon to the right.
+   - **Fire Button**: Fires the cannon at the balloon.
+   - **Reset Button**: Resets the balloon to a new random position.
+3. **Winning**: If the cannon is aligned with the balloon when fired, the balloon changes color, and a "Hit!" message appears.
+4. **Try Again**: If you miss the balloon, a "Missed!" message appears, and you can try again or reset for a new challenge.
+
+## Getting Started
+
+### Prerequisites
+To run the game locally, you'll need:
+- A web browser (e.g., Chrome, Firefox, Safari)
+
+### Contributor
+### Amrutha Pariprolu
diff --git a/Games/Balloon_Defense_Game/index.htm b/Games/Balloon_Defense_Game/index.htm
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balloon Defense Game</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <h1>Balloon Defense</h1>
+    <div class="game-area">
+        <div class="balloon" id="balloon"></div>
+        <div class="cannon" id="cannon"></div>
+    </div>
+    <div class="controls">
+        <button id="leftBtn">Left</button>
+        <button id="fireBtn">Fire</button>
+        <button id="rightBtn">Right</button>
+        <button id="resetBtn">Reset</button>
+
+    </div>
+    <p id="message"></p>
+
+    <script src="scripts.js"></script>
+</body>
+</html>
diff --git a/Games/Balloon_Defense_Game/scripts.js b/Games/Balloon_Defense_Game/scripts.js
@@ -0,0 +1,52 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const balloon = document.getElementById('balloon');
+    const cannon = document.getElementById('cannon');
+    const message = document.getElementById('message');
+    const leftBtn = document.getElementById('leftBtn');
+    const rightBtn = document.getElementById('rightBtn');
+    const fireBtn = document.getElementById('fireBtn');
+    const resetBtn = document.getElementById('resetBtn');
+
+    let cannonPosition = 125;
+    const moveAmount = 25;
+
+    leftBtn.addEventListener('click', () => {
+        moveCannon(-moveAmount);
+    });
+
+    rightBtn.addEventListener('click', () => {
+        moveCannon(moveAmount);
+    });
+
+    fireBtn.addEventListener('click', fireCannon);
+    resetBtn.addEventListener('click', resetGame);
+
+    function moveCannon(direction) {
+        cannonPosition += direction;
+        if (cannonPosition < 0) cannonPosition = 0;
+        if (cannonPosition > 250) cannonPosition = 250;
+        cannon.style.left = cannonPosition + 'px';
+    }
+
+    function fireCannon() {
+        const cannonRect = cannon.getBoundingClientRect();
+        const balloonRect = balloon.getBoundingClientRect();
+
+        if (cannonRect.left < balloonRect.right && cannonRect.right > balloonRect.left) {
+            balloon.style.backgroundColor = 'green';
+            message.textContent = 'Hit! You popped the balloon!';
+        } else {
+            message.textContent = 'Missed! Try again.';
+        }
+    }
+
+    function resetGame() {
+        // Reset the balloon color and message
+        balloon.style.backgroundColor = 'red';
+        message.textContent = '';
+
+        // Randomly reposition the balloon within the game area
+        const randomLeft = Math.floor(Math.random() * (300 - 40)); // 300 is the game-area width, 40 is the balloon width
+        balloon.style.left = randomLeft + 'px';
+    }
+});
diff --git a/Games/Balloon_Defense_Game/styles.css b/Games/Balloon_Defense_Game/styles.css
@@ -0,0 +1,58 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #e1f376;
+    text-align: center;
+    margin: 0;
+    padding: 20px;
+}
+
+h1 {
+    font-size: 2em;
+    margin-bottom: 20px;
+}
+
+.game-area {
+    position: relative;
+    width: 300px;
+    height: 400px;
+    background-color: #d3d3d3;
+    border: 2px solid #333;
+    margin: 0 auto 20px;
+    overflow: hidden;
+    border-radius: 10px;
+}
+
+.balloon {
+    width: 40px;
+    height: 60px;
+    background-color: red;
+    border-radius: 50%;
+    position: absolute;
+    top: 10px;
+    left: calc(50% - 20px);
+}
+
+.cannon {
+    width: 50px;
+    height: 50px;
+    background-color: #333;
+    position: absolute;
+    bottom: 10px;
+    left: calc(50% - 25px);
+}
+
+.controls {
+    margin-bottom: 20px;
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 16px;
+    margin: 0 10px;
+    cursor: pointer;
+}
+
+#message {
+    font-size: 18px;
+    color: green;
+}
diff --git a/README.md b/README.md
@@ -1724,7 +1724,7 @@ This repository also provides one such platforms where contributers come over an
 
 |[Number_Sorting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Number_Sorting_Game)|
 
-
+|[Balloon_Defense_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Balloon_Defense_Game)|
 
 
 |[Tower_Building_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Tower_Building_Game)|

diff --git a/assets/images/Balloon_Defense_Game.png b/assets/images/Balloon_Defense_Game.png
Original file line number	Diff line number	Diff line change
Expand Up		@@ -1724,7 +1724,7 @@ This repository also provides one such platforms where contributers come over an

		\|[Number_Sorting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Number_Sorting_Game)\|


		\|[Balloon_Defense_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Balloon_Defense_Game)\|


		\|[Tower_Building_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Tower_Building_Game)\|
Expand Down