Explore

Pop The Balloon

Learning Outcomes:

Write a BOM javascript application that floats 6 colored balloons around the web page.

User must click on each balloon to pop it.

Program keeps track of time and reports to user their time to win. Balloons move faster as each is popped.

Here's a fun and interactive JavaScript Balloon Popping Game using the BOM (Browser Object Model). The game floats 6 colored balloons around the webpage, and users must click on each balloon to pop them. The program tracks the time, and as each balloon is popped, the remaining balloons move faster.

Once all balloons are popped, the user's time to win is displayed.

Key Features:

Balloon movement: The balloons float randomly around the screen using JavaScript.

Balloon popping: The user clicks on each balloon to pop it.

Increased speed: The remaining balloons move faster after each balloon is popped.

Timer: The game keeps track of the time it takes for the user to pop all balloons.

Code:

html

Copy code

<!DOCTYPE html>

<head>

<title>Balloon Popping Game</title>

<style>

body {

margin: 0;

padding: 0;

overflow: hidden;

position: relative;

height: 100vh;

background-color: lightblue;

display: flex;

justify-content: center;

align-items: center;

font-family: Arial, sans-serif;

}

.balloon {

width: 50px;

height: 80px;

position: absolute;

border-radius: 50% 50% 50% 50%;

cursor: pointer;

border: 2px solid #333;

display: flex;

justify-content: center;

align-items: center;

color: white;

font-weight: bold;

text-align: center;

font-size: 20px;

transition: transform 0.2s ease;

}

#gameOverMessage {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

font-size: 2rem;

color: darkblue;

display: none;

}

</style>

</head>

<body>

<div id="gameOverMessage">You popped all the balloons! <br> Your time: <span id="timeTaken"></span> seconds</div>

// Select all balloons

const balloons = document.querySelectorAll('.balloon');

let poppedBalloons = 0; // Track number of popped balloons

let startTime; // Track start time of the game

let speedMultiplier = 1; // Speed multiplier for balloon movement

// Initialize balloon positions and movement

function startGame() {

startTime = Date.now(); // Record the start time of the game

balloons.forEach(balloon => {

// Set initial random positions for the balloons

balloon.style.top = Math.random() * (window.innerHeight - 100) + 'px';

balloon.style.left = Math.random() * (window.innerWidth - 50) + 'px';

// Move each balloon continuously

moveBalloon(balloon);

// Add click event to pop the balloon

balloon.addEventListener('click', popBalloon);

});

}

// Function to move balloons

function moveBalloon(balloon) {

let deltaX = Math.random() * 2 - 1; // Horizontal movement (-1 to 1)

let deltaY = Math.random() * 2 - 1; // Vertical movement (-1 to 1)

function animateBalloon() {

// Get current position

let currentX = parseFloat(balloon.style.left);

let currentY = parseFloat(balloon.style.top);

// Update position

currentX += deltaX * speedMultiplier;

currentY += deltaY * speedMultiplier;

// Keep balloons within bounds of the window

if (currentX <= 0 || currentX >= window.innerWidth - 50) {

deltaX *= -1; // Reverse direction on horizontal bounds

}

if (currentY <= 0 || currentY >= window.innerHeight - 100) {

deltaY *= -1; // Reverse direction on vertical bounds

}

balloon.style.left = currentX + 'px';

balloon.style.top = currentY + 'px';

// Continue animating if balloon is not popped

if (balloon.style.display !== 'none') {

requestAnimationFrame(animateBalloon);

}

animateBalloon(); // Start the animation loop

}

// Function to pop a balloon

function popBalloon(event) {

const balloon = event.target;

balloon.style.display = 'none'; // Hide balloon

poppedBalloons++; // Increment popped balloons count

// Speed up remaining balloons

speedMultiplier += 0.5;

// Check if all balloons are popped

if (poppedBalloons === balloons.length) {

endGame();

}

// Function to end the game

function endGame() {

const endTime = Date.now();

const timeTaken = ((endTime - startTime) / 1000).toFixed(2); // Calculate time taken in seconds

// Show game over message

const gameOverMessage = document.getElementById('gameOverMessage');

const timeTakenElement = document.getElementById('timeTaken');

timeTakenElement.textContent = timeTaken;

gameOverMessage.style.display = 'block';

}

// Start the game on page load

window.onload = startGame;

</script>

</body>

</html>

Explanation:

HTML Structure:

There are 6 balloon <div> elements with different colors. Each balloon has the class balloon, and each one is assigned a unique id (balloon1 to balloon6).

A div with id="gameOverMessage" displays the time taken once all balloons are popped.

CSS Styling:

The balloon class gives each balloon a size, color, and makes it round with the border-radius property.

The game over message is initially hidden and displayed in the center of the page when the game ends.

JavaScript Functionality:

Starting the Game: When the page loads, the startGame() function initializes the game by placing the balloons at random positions and starting their movement.

Moving Balloons: Each balloon moves randomly around the screen using requestAnimationFrame() to create smooth animations. The speed increases as balloons are popped.

Popping Balloons: Each balloon has an event listener that triggers when clicked, hiding the balloon and increasing the speed of the remaining balloons.

Game Over: Once all balloons are popped, the total time taken is calculated and displayed on the screen.

Balloon Movement:

Balloons move continuously and bounce back when they hit the edges of the browser window.

The speed of the balloons increases as each balloon is popped by modifying the speedMultiplier.

Event Handling:

The click event is used to pop the balloons. Once clicked, the balloon is hidden using balloon.style.display = 'none', and the game checks if all balloons have been popped.

Timer:

The game tracks the time using Date.now() at the start and end of the game. When the last balloon is popped, the game calculates the total time taken and displays it.

How to Play:

The balloons will start floating around the page when the game starts.

The player must click on each balloon to pop it.

With each balloon popped, the remaining balloons move faster.

Once all balloons are popped, the game will display how long it took to pop them all.

Enhancements:

You could extend this game by:

Adding sounds when balloons are popped.

Increasing the number of balloons.

Keeping track of high scores and allowing players to restart the game.

This interactive project demonstrates the use of the BOM for handling window sizes, animations, and user interactions through events in a fun and educational way.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.