Looking for a beginner-friendly yet fun project to enhance your HTML, CSS, and JavaScript skills? Let’s walk through how to create a simple Balloon Pop Game where players try to pop as many balloons as possible in 30 seconds. Below, we break down the structure and functionality in three key parts: HTML, CSS, and JavaScript.
HTML – Structuring the Game:
The HTML sets up the basic structure of our game. It includes three main screens: a start screen, a scoreboard, and an end screen.
-
The
<div id="start-screen">contains a title and a button to begin the game. -
The
<div id="scoreboard">displays the time left and the score, and it’s hidden initially. -
The
<div id="balloon-container">is the area where balloons float upward. -
Lastly, the
<div id="end-screen">shows the final score when the game ends and provides a button to restart the game.
These sections are toggled on or off using JavaScript based on the game’s state.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Balloon Pop Game</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="start-screen">
<h1>🎈Balloon Pop Game🎈</h1>
<button id="start-btn">Start Game</button>
</div>
<div id="scoreboard" style="display: none">
Time: <span id="time">30</span>s | Score: <span id="score">0</span>
</div>
<div id="balloon-container"></div>
<div id="end-screen" style="display: none">
<h1>Game Over!</h1>
<p>Your Score: <span id="final-score"></span></p>
<button onclick="location.reload()">Play Again</button>
</div>
<script src="script.js"></script>
</body>
</html>
Â
CSS – Styling and Animating the Game:
The CSS gives our game a clean, fullscreen look with a black background and colorful elements.
-
The
bodyis styled with a sans-serif font, black background, and no scrollbars (overflow: hidden), making the game immersive. -
Both the start and end screens are styled to cover the entire screen and center their content using Flexbox.
-
Balloons are styled as absolutely positioned emoji characters that animate upwards using a
floatUpkeyframe animation. -
The scoreboard is styled with a golden background and white text, giving it a nice game-like appearance.
-
The animation
@keyframes floatUpmoves each balloon from the bottom to the top of the screen while fading its opacity.
body {
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
overflow: hidden;
background: #000000;
font-size: 1.5rem;
user-select: none;
position: relative;
height: 100vh;
}
#start-screen,
#end-screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 2;
}
#start-screen button,
#end-screen button {
font-size: 1.5rem;
cursor: pointer;
margin-top: 20px;
background-color: #cea813;
border: none;
color: #ffffff;
}
#balloon-container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
}
.balloon {
position: absolute;
bottom: -50px;
animation: floatUp linear;
cursor: pointer;
font-size: 100px;
}
#scoreboard {
position: absolute;
top: 10px;
left: 10px;
font-size: 1.2rem;
background-color: #cea813;
color: #ffffff;
padding: 8px 15px;
border-radius: 8px;
z-index: 3;
}
@keyframes floatUp {
from {
bottom: -50px;
opacity: 1;
}
to {
bottom: 110%;
opacity: 0.5;
}
}
Â
JavaScript – Making the Game Work:
JavaScript handles all the interactivity and logic.
-
When the Start Game button is clicked, the game hides the start screen, shows the scoreboard, and starts spawning balloons using
setInterval. -
Each balloon is a
divelement with a class ofballoon. Its position and animation duration are randomized for variety. -
Balloons are clickable. When a player clicks a balloon, it disappears and the score increases.
-
A timer counts down from 30 seconds. When it reaches zero, the game ends by clearing intervals, hiding the scoreboard, and showing the end screen with the final score.
All DOM elements are selected using getElementById, and event listeners handle user interaction.
const startScreen = document.getElementById("start-screen");
const endScreen = document.getElementById("end-screen");
const startBtn = document.getElementById("start-btn");
const balloonContainer = document.getElementById("balloon-container");
const scoreboard = document.getElementById("scoreboard");
const timeDisplay = document.getElementById("time");
const scoreDisplay = document.getElementById("score");
const finalScoreDisplay = document.getElementById("final-score");
let gameInterval;
let timeInterval;
let timeLeft = 30;
let score = 0;
let gameRunning = false;
function createBalloon() {
if (!gameRunning) return;
const balloon = document.createElement("div");
balloon.classList.add("balloon");
balloon.textContent = "🎈";
balloon.style.left = Math.random() * (window.innerWidth - 50) + "px";
const duration = Math.random() * 3 + 4;
balloon.style.animationDuration = duration + "s";
balloon.addEventListener("click", () => {
balloon.remove();
score++;
scoreDisplay.textContent = score;
});
balloon.addEventListener("animationend", () => {
balloon.remove();
});
balloonContainer.appendChild(balloon);
}
function startGame() {
startScreen.style.display = "none";
scoreboard.style.display = "block";
gameRunning = true;
//Start spawning balloon
gameInterval = setInterval(createBalloon, 400);
//Start countdown timer
timeInterval = setInterval(() => {
timeLeft--;
timeDisplay.textContent = timeLeft;
if (timeLeft <= 0) {
endGame();
}
}, 1000);
}
function endGame() {
gameRunning = false;
clearInterval(gameInterval);
clearInterval(timeInterval);
scoreboard.style.display = "none";
endScreen.style.display = "flex";
finalScoreDisplay.textContent = score;
}
startBtn.addEventListener("click", startGame);
Â
This Balloon Pop Game is a fun and easy project to help you understand how HTML structures content, CSS styles and animates elements, and JavaScript brings everything to life. By combining all three, you create an interactive and visually engaging browser game.
Whether you’re a beginner looking to practice or someone teaching web development basics, this project is a perfect blend of fun and learning. Ready to pop some balloons? 🎈
