تنفيذ لعبة ذاكرة كلاسيكية لعبة التخمين

The task is to implement a classic memory game. You are free to solve this task with, or without Vue.

The board is n-by-n, where n is your choosing (minimum 4).

The deck contains unique pairs of cards (for a board of n*n, we need n*n/2 pairs of cards). You can select the "theme" (e.g., places, cars, logos, etc.).

Rules of the game:

Cards are laid out in a grid face down.

Two players take turns.

Player flips a pair of cards over. If the cards match, they disappear, the player scores one point, and gets a bonus turn.

The game is over when all matches are found.

Card grid should be randomized for each game.

Use some animation or effect for flipping the cards. Check out CSS transition, CSS 2D transform, CSS 3D transform.

Count and show on the screen the total number of flips and each players score

Show in the end which player won.

Allow to start a new game after finishing, without refreshing the page.

Allow the player to see both cards before they are flipped back or removed.

Tip:

You can write a function which is run every time the user tries to flip a card:

When first card is clicked, flip it and remember what image it has.

When second card is clicked, flip it and remember what image it has.

When third card is clicked, do not flip it. Instead compare the two previous card and remove them or flip them back.

Alternatively, you can do part 3. upon timeout, 1sec after the second card is flipped.

The samples/ folder contains some example screenshots. Note that the appearance is left to you, it doesn’t have to look the same.