Creating Your Project

To kick off our Vue project, we can utilize the Vue CLI. Install it by running:

npm install -g @vue/cli

or using Yarn:

yarn global add @vue/cli

After installation, initiate your project with:

vue create memory-game

Select the default options to set up the project smoothly. Additionally, we will need the uuid package to generate unique IDs for our game tiles. Install it using:

npm i uuid

Building the Memory Game

To construct the memory game, we start with a div that has the class container, serving as a flexbox container for our clickable tiles. The game logic is as follows: when two tiles displaying the same value are clicked, they remain visible. If not, they revert to a blank state.

We define a property open to manage the display of tile values. In our script section, we create the answer array filled with numbers and transform them into objects using the map method. Each object consists of an ID and an open status, which we then shuffle randomly using the sort method with a callback returning a value between -0.5 and 0.5.

In the data method, we return an object containing reactive properties. The answer property is made reactive for rendering in the template, while itemId stores the IDs of the selected tiles.

Next, we implement the onClick method, which takes an ID and adds it to the itemIds reactive array, provided there are fewer than two selected tiles and the current ID isn't already in the array. We then find the index of the clicked tile and mark its open property as true.

When two tiles are selected (indicated by this.itemIds.length === 2), we compare their values. If they don't match, we set open to false for each tile. If the itemIds array already contains two items, we reset it to empty.

When you click on two matching tiles, they will remain visible; otherwise, they will return to being blank.

Watch this tutorial on building a card matching game using Vue 3's Composition API in under 2 hours!