Matching Game

Using HTML, CSS, and JavaScript, this two-page application challenges the player to find all matching pairs of cards in the fewest moves. To try the game, click here. Note: This project is based on a skeleton structure from Udacity. For more information, see the initial commit on the appropriate GitHub page given above.

Structure
  • You must find the 8 matching images from cards that are turned over.
  • When you click a card, it flips, turns blue, and the hidden image appears.
  • When you make a match, the cards change color and the images remain visible.
  • If you do not make a match, the cards flip back over to their original display.
  • Once you match all cards, the game is over and the screen congratulates you, listing various statistics about your game. To play again, click the "play again" button.
Design
The main screen includes a timer, a move counter, a reset button, and a star rating. Below is an example of the interface:
A screenshot of the game's introductory page
Finishing with at most 15 moves yields a 3-star rating, finishing with more than 16 moves but at most 25 yields a 2-star rating, and finishing with more than 25 moves yields a 1-star rating. Here is an example end page:
A screenshot of the game's end page
Running The Application
Run the application in your browser by clicking here. To download, clone the repository using this terminal command:
git clone https://github.com/wbchristerson/memory-game.git

Alternatively, follow the instructions below to download to a hard drive:
  • Navigate to this page.
  • Click the green "Clone or download" button towards the right then choose "Download ZIP".
  • Find the folder memory-game-master in your Downloads folder or wherever it was placed on your device.
  • Right click and choose "Extract All" then extract.
  • Open your browser and use Ctrl + O (for Windows machines) to open the file selector on your device.
  • Go to memory-game-master, enter memory-game-master again, then select index.html. The game screen will appear.