Memory

A GitHub Classroom Assignment

This assignment must be accepted on GitHub Classroom.

Objective

For the final project, you will be demonstrating your cumulative understanding of HTML, CSS, and JavaScript to create an interactive game of Memory.

Game Play

When the page loads the player will be presented with a set of difficulty options. Once the player has selected a difficulty, the cards will appear and the game will begin.

The player will click on any card to show the card's pattern. The card's pattern will remain shown until a second card is clicked. If the second card's pattern matches the first, the game will indicate that a match has been found. If the second card's pattern does not match the first, the both patterns will be hidden. The player will continue selecting cards until all of the matches have been found.

Once all matches have been found the player with an end of game sequence. Then the player should be presented with the option to play the game again.

Requirements

The following requirement must be met in order to complete the assignment successfully:

1. Clone this repository from GitHub. Aside from this README file, there are NO starter files for this project.
2. When the page loads, the screen must display a set of difficulty levels.
3. There must be a minimum of 3 difficulty levels. NOTE: Difficulty level can be created simply by adding or removing the number of cards on the board. There should be at least 4 cards for each difficulty level.
4. Selecting a difficulty level should display a grid of cards.
5. The cards must be laid out in a responsive, user-friendly manner.
6. The cards should be created and added to the page dynamically using JavaScript.
7. Each card should have a pattern (image, shape, symbol, etc) that is hidden from the player.
8. Clicking on a card should show the pattern.
9. If the second card matches the first, there must be some indication that there was a match. For example, the matched cards stay open, or fade out or disappear all together.
10. If the second card does not match the first, both cards should hide their patterns. Hiding the pattern MUST be animated.
11. When all the matches have been found, an ending sequence must be initiated. The ending sequence must use CSS Animation.
12. At the end of the sequence the player must be presented with the option to play again.

Example

The following video is an example of how a finished version of the assignment could look like.

Note

In the video, it says that when a pattern is revealed, it must be animated.

This is no longer a requirement.

Hints

Below are a few suggestions, recommendations, and answers to common questions on how to complete this project. This list will be updated as questions arise.

1. While you can use anything you wish for the patterns of your cards, it is recommended that you keep it simple. You can used simple shapes (squares, circles, rectangles, etc) and colors or a icons. For example, an icon font like Font Awesome would be an acceptable choice.
2. David Walsh has an excellent tutorial on how to Create a CSS Flipping Animation.

Rubric

The following rubric will be use to grade this assignment.

Task	Points
The game has at least 3 difficulty levels	5
The cards are dynamically generated by JavaScript	5
The cards are displayed in a responsive grid.	5
Clicking on a card reveals it pattern.	5
The game responds properly when a match is found.	10
The game responds properly when a match is not found.	10
The game ends when all the matches are found.	5
There is a animated sequence at the end of the game.	5
Total	50

Submission

When the project is completed, follow the steps below to submit for grading:

1. Create a commit with the message "Completes the Memory assignment"
2. Push all commits to GitHub.
3. Submit the URL to your GitHub repository to the Memory assignment on BrightSpace.