In this article, we will create a Card Pair game using JavaScript. The Concentration or Memory Matching Game is mainly utilized for memory tests & concentration levels of the player. Here, the player needs to find out all the matching pairs of identical cards placed that are face-down on the board & the player can only turn 2 cards at a time. Accordingly, try to remember their position for the respective card match. The player needs to complete the game with the fewest number of moves to find all the pairs of cards. After completing the project, the below images will appear:

Prerequisites:

• HTML
• CSS
• JavaScript

Project Structure:

The following project structure will appear:

Approach:

• Create the game card layout in HTML using HTML tags like divs, headings, span, p, etc. in the body tags along with relevant class names and ids.
• Use tags, ids, and class names to style the page with CSS properties like margin, padding, background color, font properties, height, width, box, etc.
• In JavaScript first create a list of items to be used in the game and rearrange them with the shuffle function using swapping and math.random() method.
• Define a function createCard() to render the items on the web page using HTML DOM methods like createElement, classList.add, getElementById, etc., and render all items using the array.map() method.
• Use addEventListener to handle click to update moves and trigger the toggle function to update the cards accordingly with the setTimeout function to apply some delay.
• Use the check function to check the finish condition and display the result using the window.alert

Example: This example illustrates the Pair Game using Javascript.

CSS

Javascript

Output: