Assignment 3: build a memory game

The game includes a 4 by 4 grid of tiles as shown in Figure 1. Once the player clicks on first tile, the tile should be flipped and stay flipped to show the image of the tile. Then the player can click on another tile, if the tile matches the flipped one, it stays flipped; if it doesn't match, then it should be flipped back after a delay to allow the user to see the images.

You need to create the memory game using JavaScript. The game first ask the player to enter their nick name. Once nick is provided, the "Play" button becomes active. Once the players clicks on "Play" button, the timer starts and the game starts. The game should keep track of time and number of clicks and show the result once all the tiles have been flipped correctly. Clicking on "Play" button in the middle of the game should start a new game. The records of the last 10 games should be stored in cookies and shown to the user when they come back and enter the same nickname.

All the steps of the game should be in only one page and different element should be displayed at the right time

The steps of the game are shown in the following figures:

Step 1:

Step 2:

Step 3:

Step 4:

Grading rubric: your assignment will be graded based on the following criteria

1. Requiring player to provide a nickname
2. Enabaling play button only after nickname has been provided
3. Flipping and timing the tiles correctly
4. Tracking player time and clicks
5. Showing the final message once the game has ended
6. Stroing records of games in a cookie
7. Displaying different element of the game at the right time and avoiding creating new pages
8. As in all the assignment, your HTML, CSS, and JS should be included in separate files and styling should not be mixed in you HTML
9. EXTRA POINTS: for creative and visually entertaining design