Create a Balloon Popping Game with Vue 3 and JavaScript

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

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

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create balloon-poppinng-game

and select all the default options to create the project.

Create the Balloon Popping Game

To create the balloon popping app, we write:

<template>
  <div v-for="(b, index) of balloons" :key="b.id" class="balloon-container">
    <div
      v-if="!b.popped"
      class="balloon"
      :style="{ 'background-color': b.color }"
      @mouseover="onPop(index)"
    ></div>
    <div v-else>popped</div>
  </div>
</template>

<script>
const colors = ["red", "green", "blue"];

const generateColor = () => {
  const index = Math.floor(Math.random() * colors.length);
  return colors[index];
};
export default {
  name: "App",
  data() {
    return {
      balloons: Array(25)
        .fill()
        .map((_, i) => ({ id: i, popped: false, color: generateColor() })),
    };
  },
  methods: {
    onPop(index) {
      this.balloons[index] = {
        ...this.balloons[index],
        popped: true,
      };
    },
  },
};
</script>

<style scoped>
.balloon-container {
  display: inline-block;
}

.balloon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid black;
}
</style>

In the template, we render the divs for the balloons with v-for .

b is the ballon object, index is the index of the balloon entry.

key has the unique ID for the ballon for Vue to keep track of the balloons.

Inside it, we have a div to render the ballon if b.popped is false , which indicates it’s not popped.

Otherwise, we show ‘popped’ with v-else .

In the script object, we have the genberateColor function to generate a random color for the balloon.

We set the style prop to the background-color to the balloon’s color property.

Also, we have the @mouseover directive to run the onPop method to pop the balloon.

In the data method, we return the ballons array with the balloon entries.

In the onPop method, we just set popped property of the balloon entry to true .

In the style tag, we make the ballon round and display side by side.

To make it display side by side, we set the balloon-container class to display: inline-block .

In the balloon class, we set the width and height of the balloon to the same dimensions.

border-radius is set to 50% to make it a circle.

And we add a border with the border property.

Now when we hover over a balloon with our mouse, we see the popped text displayed in place of the balloon.

Conclusion

We can create a balloon popping game easily with Vue 3 and JavaScript.