Create a Balloon Popping Game with React and JavaScript

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a balloon popping game with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app balloon-popping-game

with NPM to create our React project.

Create the Balloon Popping Game

To create the balloon popping game, we write:

import React, { useState } from "react";

const colors = ["red", "green", "blue"];

const generateColor = () => {
  const index = Math.floor(Math.random() * colors.length);
  return colors[index];
};

const balloonArr = Array(25)
  .fill()
  .map((_, i) => ({ id: i, popped: false, color: generateColor() }));

export default function App() {
  const [balloons, setBalloons] = useState(balloonArr);

  const onPop = (index) => {
    setBalloons((balloons) => {
      const b = [...balloons];
      b[index].popped = true;
      return b;
    });
  };

  return (
    <div className="App">
      <style>
        {`
        .balloon-container {
          display: inline-block;
        }

        .balloon {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          border: 1px solid black;
        }
      `}
      </style>
      <div>
        {balloons.map((b, i) => {
          if (!b.popped) {
            return (
              <div className="balloon-container" key={b.id}>
                <div
                  className="balloon"
                  style={{ backgroundColor: b.color }}
                  onMouseOver={() => onPop(i)}
                ></div>
              </div>
            );
          } else {
            return <div className="balloon-container">popped</div>;
          }
        })}
      </div>
    </div>
  );
}

We have the colors array with the balloon colors.

generateColor picks a random color from the colors array.

Then we have the balloonArr array which has 25 objects with data for rendering the balloons.

It includes whether it’s popped or not, and the color .

In App , we have the balloons state which is set to balloonArr initially.

The onPop function lets us set the balloons entry with the given index ‘s popped property to true .

We have a callback to get the balloons , then we make a copy, modify it, and then return the modified copy.

Next, we have the styles to make the balloons display online.

The ballon class makes the div display as circles by setting the border-radius to 50% .

Then finally, we render the balloons by calling map .

In the map callback, we check if b.popped is false .

If it’s false , then we render the ballon with divs.

We set the styles and the onMouseOver prop to a function that calls the onPop function to pop the balloons by setting popped to true .

Otherwise, we render the ‘popped’ text.

Conclusion

We can create a balloon popping game with React and JavaScript.