Create a Whack a Mole 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 whack a mole 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 whack-a-mole

and select all the default options to create the project.

Create the Whack a Mole Game

To create the whack a mole game, we write:

<template>
  <button @click="startGame">start game</button>
  <button @click="endGame">end game</button>
  <p>score: {{ score }}</p>
  <div>
    <div v-for="n of 6" :key="n" class="container">
      <img
        v-if="index === n"
        src="https://grid.gograph.com/happy-mole-cartoon-vector-art_gg68718247.jpg"
        @click="onClick(n)"
      />
      <div v-else class="hole"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      index: 0,
      timer: undefined,
      score: 0,
    };
  },
  methods: {
    generateIndex() {
      this.index = Math.floor(Math.random() * 6);
    },
    startGame() {
      this.timer = setInterval(this.generateIndex, 2000);
    },
    endGame() {
      clearInterval(this.timer);
      this.score = 0;
      this.index = 0;
    },
    onClick(n) {
      if (this.index === n) {
        this.score++;
      }
    },
  },
  beforeUnmount() {
    clearInterval(this.timer);
  },
};
</script>

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

.container {
  display: inline-block;
}

img {
  width: 50px;
  height: 50px;
}
</style>

We have the start game and end game buttons to let us start and end the game.

When we click start game, startGame is called to start the game.

And when we click start game, endGame is called to end the game.

Then we show the score to the player in the p element.

Next, we render the divs to show the mole.

index is the index where the mole is located.

So if index equals n , then we show the mole.

Otherwise, we show a circle.

On the image, we have a click event listener that checks if we click on the mole.

In the component object, we have the data method to return the initial values of the reactive properties.

The generateIndex generates random index value.

startGame starts the game by calling setInterval to start the timer.

The 2nd argument is the interval to wait between the callback in the first argument runs again.

The interval is in milliseconds.

endGame calls clearInterval to the end of the timer.

We also set score and index back to 0 to reset the game.

The onClick method checks if n is the same as this.index and increases the score if it is.

Now when we click start game, we should see moles popping up and we can click it to increase the score.

Conclusion

We can create a whack a mole game easily with Vue 3 and JavaScript.