Skip to content

Commit d8cf205

Browse files
king04amanking04aman
committed
add project: Balloons Poping Game
1 parent 2e76424 commit d8cf205

File tree

4 files changed

+140
-0
lines changed

4 files changed

+140
-0
lines changed

‎Balloons Poping Game/README.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Pop the Balloons
2+
3+
**An interactive game where users can pop balloons by moving their mouse over them.**
4+
This game provides a fun way to engage users while improving their mouse coordination skills.
5+
6+
### Functionalities
7+
- **Balloon Popping**: Users can pop balloons by hovering the mouse over them.
8+
- **Dynamic Balloons**: Balloons are generated dynamically, making it easy to adjust the number of balloons.
9+
- **Completion Message**: Displays a message when all balloons have been popped.
10+
11+
## Description
12+
In this game, players can pop balloons by moving their mouse over them. The balloons will disappear when hovered over, and a congratulatory message appears once all balloons are popped. This project utilizes HTML, CSS, and vanilla JavaScript, making it lightweight and easy to understand.
13+
14+
## Prerequisites
15+
No external libraries or packages are required for this project. It is built with standard web technologies: HTML, CSS, and JavaScript.
16+
17+
## Installing Instructions
18+
1. Clone the repository:
19+
```bash
20+
git clone https://github.com/your-username/All-In-One-Javascript-Projects.git
21+
```
22+
2. Navigate to the project directory:
23+
```bash
24+
cd All-In-One-Javascript-Projects/Pop-the-Balloons
25+
```
26+
3. Open the `index.html` file in a web browser:
27+
28+
29+
## Author
30+
- Aman Kumar (@[king04aman](https://github.com/king04aman))

‎Balloons Poping Game/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Pop the Balloons</title>
9+
</head>
10+
<body>
11+
<div class="wrapper">
12+
<h1>Pop the Balloons by Moving Your Mouse Over Them</h1>
13+
<div id="yay-no-balloons">
14+
<span class="blue">Wow!</span> All balloons popped!
15+
</div>
16+
<div id="balloon-gallery">
17+
</div>
18+
</div>
19+
<script src="main.js"></script>
20+
</body>
21+
</html>

‎Balloons Poping Game/main.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const balloonGallery = document.getElementById('balloon-gallery');
2+
const yayMessage = document.getElementById('yay-no-balloons');
3+
const totalBalloons = 24;
4+
5+
// Function to create and add balloons to the gallery
6+
function createBalloons() {
7+
for (let i = 0; i < totalBalloons; i++) {
8+
const balloon = document.createElement('div');
9+
balloon.classList.add('balloon');
10+
balloon.textContent = '🎈';
11+
12+
// Add event listener to pop balloon on mouseover
13+
balloon.addEventListener('click', () => {
14+
balloon.style.display = 'none';
15+
checkAllBalloonsPopped();
16+
});
17+
18+
balloonGallery.appendChild(balloon);
19+
}
20+
}
21+
22+
// Function to check if all balloons are popped
23+
function checkAllBalloonsPopped() {
24+
const balloons = document.querySelectorAll('#balloon-gallery .balloon');
25+
const poppedCount = Array.from(balloons).filter(balloon => balloon.style.display === 'none').length;
26+
27+
if (poppedCount === totalBalloons) {
28+
yayMessage.style.display = 'block';
29+
}
30+
}
31+
32+
createBalloons();

‎Balloons Poping Game/style.css

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
body {
2+
font-family: sans-serif;
3+
padding: 30px;
4+
background: #ededed;
5+
}
6+
7+
.wrapper {
8+
max-width: 690px;
9+
margin: 0 auto;
10+
}
11+
12+
.blue {
13+
color: #3f7abe;
14+
}
15+
16+
h1 {
17+
margin: auto;
18+
margin-top: 50px;
19+
margin-bottom: 50px;
20+
color: #08a3d9;
21+
text-transform: uppercase;
22+
font-size: 30px;
23+
color: #000380;
24+
}
25+
26+
#balloon-gallery div {
27+
background: #ff3300;
28+
height: 121px;
29+
width: 119px;
30+
text-align: center;
31+
color: #ff3300;
32+
font-size: 40px;
33+
font-family: sans-serif, arial;
34+
border-radius: 100%;
35+
margin-top: 20px;
36+
display: inline-block;
37+
margin: 2.5px 5px;
38+
transition: background 0.3s ease; /* Add a transition for visual effect */
39+
}
40+
41+
#balloon-gallery div:nth-child(3n) {
42+
background: #ffce00;
43+
}
44+
45+
#balloon-gallery div:nth-child(3n-1) {
46+
background: #3f7abe;
47+
}
48+
49+
#balloon-gallery div:nth-child(5n) {
50+
background: #8e7a8e;
51+
}
52+
53+
#yay-no-balloons {
54+
display: none;
55+
color: #ff3300;
56+
font-size: 100px;
57+
}

0 commit comments

Comments
 (0)