The game lays out 16 cards (8 pairs of matching cards). The player clicks on a card to flip it an expose the image. The next step is to find the matching card by flipping another card to expose the image and see if it matches. If the cards match, they stay flipped and the user can move on to find the next pair of matches. If the cards don't match, they flip back over to hide the image and the user moves on to find a new match or another card that matches one they have already seen. The goal is to match as many cards in as few flips as possible in the shortest amount of time.
When the cards are all matched, the game is complete. The player can decide to play again or press the restart image to start over.
This project contains HTML, CSS, and JavaScript to recreate a card flip Memory Game. The HTML contains the general layout for the page and modal window used to display the winning message. The CSS provides styling for the layout as we as media information for responsive design. The JavaScript houses the core functionality for shuffling the cards, starting the game, handling events from the user as they interact with the cards or restart the game, and tracking clicks and successful matches to determine when the game is complete.
For specific, detailed instructions, look at the project instructions in the Udacity Classroom.
- jQuery - Framework for working with the DOM
- Bootstrap - Responsive layout framework
- Font Awesome - Provides a free library of icons
- Google Fonts - CDN hosted library of fonts
This repository is the starter code for all Udacity students. Therefore, we most likely will not accept pull requests.
For details, check out CONTRIBUTING.md.