Skip to content

Commit ac4ce20

Browse files
kunjgitkunjgit
authored
Merge pull request #5157 from AmruthaPariprolu/balloon-defense-game
Balloon Defense Game added
2 parents 3c7f558 + 5044477 commit ac4ce20

File tree

6 files changed

+166
-1
lines changed

6 files changed

+166
-1
lines changed

‎Games/Balloon_Defense_Game/README.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Balloon Defense Game
2+
3+
## Overview
4+
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.
5+
6+
## Features
7+
- **Interactive Controls**: Move the cannon left or right and fire at the balloon.
8+
- **Hit Detection**: Check if the shot hits the balloon.
9+
- **Reset Functionality**: Reset the balloon to a new random position after each shot.
10+
- **Simple UI**: Clean and straightforward user interface.
11+
12+
## How to Play
13+
1. **Objective**: Align the cannon with the balloon and fire to pop it.
14+
2. **Controls**:
15+
- **Left Button**: Moves the cannon to the left.
16+
- **Right Button**: Moves the cannon to the right.
17+
- **Fire Button**: Fires the cannon at the balloon.
18+
- **Reset Button**: Resets the balloon to a new random position.
19+
3. **Winning**: If the cannon is aligned with the balloon when fired, the balloon changes color, and a "Hit!" message appears.
20+
4. **Try Again**: If you miss the balloon, a "Missed!" message appears, and you can try again or reset for a new challenge.
21+
22+
## Getting Started
23+
24+
### Prerequisites
25+
To run the game locally, you'll need:
26+
- A web browser (e.g., Chrome, Firefox, Safari)
27+
28+
### Contributor
29+
### Amrutha Pariprolu

‎Games/Balloon_Defense_Game/index.htm

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Balloon Defense Game</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<h1>Balloon Defense</h1>
11+
<div class="game-area">
12+
<div class="balloon" id="balloon"></div>
13+
<div class="cannon" id="cannon"></div>
14+
</div>
15+
<div class="controls">
16+
<button id="leftBtn">Left</button>
17+
<button id="fireBtn">Fire</button>
18+
<button id="rightBtn">Right</button>
19+
<button id="resetBtn">Reset</button>
20+
21+
</div>
22+
<p id="message"></p>
23+
24+
<script src="scripts.js"></script>
25+
</body>
26+
</html>

‎Games/Balloon_Defense_Game/scripts.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
const balloon = document.getElementById('balloon');
3+
const cannon = document.getElementById('cannon');
4+
const message = document.getElementById('message');
5+
const leftBtn = document.getElementById('leftBtn');
6+
const rightBtn = document.getElementById('rightBtn');
7+
const fireBtn = document.getElementById('fireBtn');
8+
const resetBtn = document.getElementById('resetBtn');
9+
10+
let cannonPosition = 125;
11+
const moveAmount = 25;
12+
13+
leftBtn.addEventListener('click', () => {
14+
moveCannon(-moveAmount);
15+
});
16+
17+
rightBtn.addEventListener('click', () => {
18+
moveCannon(moveAmount);
19+
});
20+
21+
fireBtn.addEventListener('click', fireCannon);
22+
resetBtn.addEventListener('click', resetGame);
23+
24+
function moveCannon(direction) {
25+
cannonPosition += direction;
26+
if (cannonPosition < 0) cannonPosition = 0;
27+
if (cannonPosition > 250) cannonPosition = 250;
28+
cannon.style.left = cannonPosition + 'px';
29+
}
30+
31+
function fireCannon() {
32+
const cannonRect = cannon.getBoundingClientRect();
33+
const balloonRect = balloon.getBoundingClientRect();
34+
35+
if (cannonRect.left < balloonRect.right && cannonRect.right > balloonRect.left) {
36+
balloon.style.backgroundColor = 'green';
37+
message.textContent = 'Hit! You popped the balloon!';
38+
} else {
39+
message.textContent = 'Missed! Try again.';
40+
}
41+
}
42+
43+
function resetGame() {
44+
// Reset the balloon color and message
45+
balloon.style.backgroundColor = 'red';
46+
message.textContent = '';
47+
48+
// Randomly reposition the balloon within the game area
49+
const randomLeft = Math.floor(Math.random() * (300 - 40)); // 300 is the game-area width, 40 is the balloon width
50+
balloon.style.left = randomLeft + 'px';
51+
}
52+
});

‎Games/Balloon_Defense_Game/styles.css

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
background-color: #e1f376;
4+
text-align: center;
5+
margin: 0;
6+
padding: 20px;
7+
}
8+
9+
h1 {
10+
font-size: 2em;
11+
margin-bottom: 20px;
12+
}
13+
14+
.game-area {
15+
position: relative;
16+
width: 300px;
17+
height: 400px;
18+
background-color: #d3d3d3;
19+
border: 2px solid #333;
20+
margin: 0 auto 20px;
21+
overflow: hidden;
22+
border-radius: 10px;
23+
}
24+
25+
.balloon {
26+
width: 40px;
27+
height: 60px;
28+
background-color: red;
29+
border-radius: 50%;
30+
position: absolute;
31+
top: 10px;
32+
left: calc(50% - 20px);
33+
}
34+
35+
.cannon {
36+
width: 50px;
37+
height: 50px;
38+
background-color: #333;
39+
position: absolute;
40+
bottom: 10px;
41+
left: calc(50% - 25px);
42+
}
43+
44+
.controls {
45+
margin-bottom: 20px;
46+
}
47+
48+
button {
49+
padding: 10px 20px;
50+
font-size: 16px;
51+
margin: 0 10px;
52+
cursor: pointer;
53+
}
54+
55+
#message {
56+
font-size: 18px;
57+
color: green;
58+
}

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1724,7 +1724,7 @@ This repository also provides one such platforms where contributers come over an
17241724

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

1727-
1727+
|[Balloon_Defense_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Balloon_Defense_Game)|
17281728

17291729

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

‎assets/images/Balloon_Defense_Game.png

32.5 KB
Loading

0 commit comments

Comments
 (0)