Midterm Project – Balloon Popper

Ever been at a wedding or party, locked in deep conversation, when suddenly—a balloon drifts by, practically begging to be popped? You hesitate. Would it be childish? Would people stare? Well, worry no more! Balloon Popper is here to satisfy that irresistible urge. No awkward glances, no judgment—just pure, unfiltered balloon-bursting joy.

Project Overview

Balloon Popper is a simple game that I worked on, though not always with ease. The objective is to pop balloons as they fall from the top of the canvas using a shooter that fires “bullets” from the bottom. The game consists of a start page, a game environment, and a finish page. It utilizes classes to define key elements such as the shooter, bullets, and balloons, each with specific properties that support collision detection, interaction, and display functions.

Implementation

The game begins with a start page where the player can view the instructions by clicking the instructions button or start the game by pressing the start button. Once the game starts, the player must shoot the balloons before they reach the bottom of the canvas. The player moves left and right along four paths using the arrow keys and fires bullets using the spacebar.

At the top of the canvas, three score trackers display the number of lives, balloons popped, and stray bullets. The lives counter tracks how many balloons have passed the bottom of the canvas, while the stray bullets counter keeps track of bullets that were fired but missed the balloons. If either the lives or stray bullets count reaches five, the game ends. The number of balloons popped is also displayed, but there is no specific win condition—the player can continue playing and challenge themselves to improve their score.

When the game ends, the finish page appears, displaying the reason for the loss, whether due to missing five balloons or using up all stray bullet allowances. The end screen also includes a restart button, allowing the player to reset the game and play again.

Code Highlights

function displayTextBox(textStr, x, y, textColor) {
  textSize(16);
  textStyle(BOLD);
  textFont("Poppins");
  let textWidthValue = textWidth(textStr);
  let padding = 5;

  fill(255, 255, 255, 200);
  rect(x - padding, y - 15, textWidthValue + 10, 20, 5);

  fill(textColor);
  textAlign(LEFT);
  text(textStr, x, y);
}

I particularly love the code snippet above that defines how I displayed the score trackers at the top of the canvas.

  isHit(bullet) {
    return dist(this.x, this.y, bullet.x, bullet.y) < this.r / 2;
  }
}

for (let i = balloons.length - 1; i >= 0; i--) {
  balloons[i].update();
  balloons[i].display();

  for (let j = bullets.length - 1; j >= 0; j--) {
    if (balloons[i].isHit(bullets[j])) {
      playPopSound();
      balloonsPopped++;
      balloons[i].reset();
      bullets.splice(j, 1);
      break;
    }
  }

The above two code snippets show how to detect collision between the bullet and the balloon.

Challenges and Areas for Improvement

One of the main challenges I faced was styling the game, including selecting colors, font sizes, and text styles. I realized that I need to work on improving my design skills. Loading the balloon images was another issue, but after consulting resources such as Stack Overflow and AI tools, I was able to find a solution and successfully display the images.

This project has been a great learning experience, and I plan to build on what I’ve learned. In the future, I want to improve button management, refine the game’s sound integration, and enhance the overall visual design to make the game even more engaging. Additionally, I would like to optimize the collision detection and fine-tune the difficulty scaling to provide a more dynamic challenge for players.

ENJOY;