This project is a memory card game Super Mario theme based. The idea is that the user will match all the card pairs in order to finish the game. There is a time limit of 60 seconds and a score of 1000 points to which every click deducts 20 points.

Click here for a live demo version of this project.

Focus on providing the user a way to train his/her memory skills by playing a memory card game. The project is easy to navigate through and it has a simple and attractive layout, as well as an option to listen (or not) to the well known super mario soundtrack song.

• As a user, i have a start button the allows me to initialize the game.
• As a user, i have access to the current time left to play as well as the score, at all times.
• As a user, i have access to a button that allows me to restart the game at any time.
• As a user, i have the possibility the mute and, consequently, unmute the sound by clicking on the mute/unmute button during the game.
• As a user, i can restart the game immediatelly after i win or lose as there is a restart button available on both win and game over screens.

The objective is to collect the most pairs of cards. When a player turns over two cards that do not match, those cards are turned face down again (in the same position). The trick is to remember which cards are where.

The goal is to provide the user a way to train his/her memory skills through a fun and interactive experience.

It's a single page project. All the game information is available to user at all times (time left, score, buttons to restart and mute/unmute). In addition, there are three different cover screens. One once the game is loaded(start screen, that also includes a start button), one once the user wins(win screen) and one once the user loses(game over screen). Both the win and game over screens have a button to restart the game.

The following wireframes for this projects were developed with Figma:

Desktop Version
Mobile Version

The red color used is one of the super mario colors. The grey color on the card front (when flipped) intends to make it easier for the user to identify the cards left to match. As the colors of the characters are all very similar it would easy to get confused once only a few pairs would be left to match (if using black as the card back). The font-family "Press Start 2P" was picked to give the game a retro aspect.

• HTML - was used create the website structure
• CSS - was used to style the HTML
• JavaScript - was used for the website interactiveness
• Figma - was used to create the wireframes

The user is able to restart the game at any moment as well as disable/enable the sound, by clicking on the "Restart" and "Mute"/"Unmute" buttons, respectively. The remaining playing time and score are visible at all times. Once the user loses or wins the game there are buttons available to restart the game.

Create different dificulty levels.

This project was tested on Chrome, Safari, Edge, Brave, iOS devices (iPhone Xs and Ipad) and Android. All functionalities work as expected. It does not work properly on Internet Explorer.

W3C HTML Validator: Used it to check the site's HTML document markup validity and it's functionality.
W3C CSS Validator: Used it to check the site's CSS document markup validity and it's functionality.

The project is hosted at GitHub, directly from the master branch. For that reason, any new changes committed will be deployed automatically.

All images are from the free stock image library pngGuru.

Retro Mario Match was inspired on this GitHub repository link.