Create the Project

To initiate our Vue project, we will employ the Vue CLI. You can install it using one of the following commands:

npm install -g @vue/cli

or, if you prefer Yarn:

yarn global add @vue/cli

After installation, execute the command below to create your new project:

vue create click-shape-game

Make sure to select all default options during the setup process.

Developing the Click Shape Game

The objective of the game is to earn points by clicking on shapes that appear in random positions on the screen. Here’s how to set up the game:

In the template section, include buttons for starting and ending the game, along with a display for the score. Additionally, create a clickable div that allows players to score points. Here’s a simplified outline:

<button @click="startGame">Start Game</button>

<button @click="endGame">End Game</button>

<div class="score">{{ score }}</div>

<div

class="circle" :style="{ top: circleY + 'px', left: circleX + 'px' }"

@click="onClick">

</div>

Within the script section, we define the data method, which initializes reactive properties. The variables circleX and circleY represent the position of the shape, while timer tracks the game duration. The onClick method handles clicks on the shape.

In the startGame method, we use setInterval to update the circleX and circleY properties to random positions on the screen. The endGame method clears the interval to stop the timer and resets the game state.

To ensure proper cleanup, we also invoke clearInterval in the beforeUnmount lifecycle hook.

Finally, the CSS for the div with the class circle will style it to appear as a perfect circle.

This video demonstrates how to construct a card matching game using Vue 3's Composition API, illustrating essential techniques that can be applied to our click shape game as well.