Introduction

A retro grid-based game in vanilla JavaScript, HTML and CSS.
MemoriseIT is an engaging, web-based memory card matching game that challenges your concentration and cognitive skills. The game presents you with a grid of cards, each displaying an image when flipped. Your goal is to find and match pairs of identical cards hidden within the grid. By flipping two cards at a time, you try to memorize their positions and match them. The game rewards sharp memory, quick thinking, and attention to detail.

Some of the inbuild functions that we will use while coding:

for loops
addEventListener
setAttribute
getAttribute
data-name
document.querySelector
createElement

How to Play:

1. Start the Game:

Once the game begins, all cards are laid out face down on the screen. The cards are shuffled randomly, so each playthrough is unique.

2. Flip the Cards:

Click on a card to reveal the image hidden on the other side. Then, click on a second card to reveal another image.

3. Find Matches:

If the two flipped cards show the same image, they remain flipped, indicating a successful match. If the cards do not match, they flip back to their original state, and you must try again.

4. Score:

For each successful match, you earn points, and a message is displayed on the screen and the score is incremented by "1". If your attempt is incorrect, a alert like "Oops! The match is incorrect 😢" will appear, encouraging you to keep trying.

5. Win the Game:

The game ends when all pairs are successfully matched. A congratulatory message will display, celebrating your victory.

Objective

The objective of MemoriseIT is to match all the pairs of cards as quickly as possible, while improving your memory and focus.

Setup

Download the zip file of the code and extract it.
Open the code in VsCode or any other ide and load the images.
Run the code and you are good to go

Output

1. Initially the game will look like this.

2. If the match is incorrect, an alert will appear for the wrong pair.

3. If you find the correct pair, also the alert will appear.

4. If the pair matches the cards will become blank and the score will be incremented.

5. The score is incremented by 1.

6. After finding all the matching pairs, a message displaying "Congratulations" will appear.