Memory Card Matching Game

Project Overview


The goal of this project was to create a popular fun card game where its objective is to collect a total of 8 pairs of cards from the table that are faced down. The user would have 2 tries every turn to guess the pair and if they successfully match the two cards, they get 1 point and keep moving on until all the pairs have been collected. If the user unsuccessfully matches the pair, the cards will be faced down to its original position for the next turn. The trick of this game is to memorize the positions of the cards so it would be easier to match the pairs rather than guessing every turn. 



This is the starting screen when you first enter the game. To begin with, the heading is using an animation text style that animates both keyframes of the <div> text and <div> border in order to create that typing style. 

Right below, we have the scoreboard, the timer to see how long the user takes to complete the game, attempt count to view how many moves it took to complete and finally the new game button for users who would like to replay to beat their time or restart the game. 

As for the coding aspect of this game, each image of the card is sectioned with a <div> with a data-framework name set. Each of these cards are collected in an array and uses multiple functions to test if the two cards clicked by the user have the same data-framework style and executes the function to disable the flip if they match, if not then they would unflip back to its original position.


This is the main screen, essentially the process of the user playing game. As its display visually, the attempts are counted for every take of an attempt of clicking 2 cards for the pair. The timer utilizes the timer() function which is setting the interval time manually and it is called whenever the very first pair has been clicked.

As mentioned above, the first card is disabled, meaning they would not flip back to its original position until the second card has been clicked. Once the second card has been clicked, this calls the function to check if the two data-framework names match which validates the two cards if they are a pair or not. If so, The two cards would remain disabled until the end of the game, and if its not a pair, the two cards that were flipped would return back to its “unflipped” position until the user would click on it again for its correct matching pair. 


This is the game ending screen, essentially the congratulations screen when the user has successfully guess all 8 total of pairs of cards. The board is displayed used the function modal, which at the same time stops the timer, and collects the data from the game status details in the HTML. 

The user has an option given to either play again or close the modal on the close “x” icon, which both would recall the same function as new game and would restart the game.

This new game function contains elements of 2 functions which is to shuffle the cards using Math.random() function, and also utilizes the redo() function that I created which would restart the board by flipping back all the cards faced down. 

Scroll to top