Starter Code The starter code has some HTML and CSS styling to display a static version of the Memory Game project. Goal was to convert this project from a static project to an interactive one primarily using JavaScript.
The memory game presents the first opportunity to fully combine my skills in HTML, CSS, and JavaScript DOM manipulation to build a complete browser-based card matching game (also known as Concentration).
Download the folder contents and open the index.html file
Steps to play the game
-
Click on any card.
-
A card reveales its icon to you, then click on a second card to reveal its icon.
-
If the first card clicked by you matches its icon with the second card clicked; you get a match.
-
If the both card icons don't match, they are hidden back and you start over steps 1, 2 & 3 again.
-
When total 8 pairs of card are matched, you win.
-
Your no of moves taken to achieve above steps will determine your final star rating.
-
You can restart the game by clicking on the reload icon.
For higher star rating,match cards with less moves in lesser time. Good luck!
- Bootstrap CDN
- FontAwesome
- CSSAnimate
- Javascript
- HTML
- CSS
- Visual Studio Code Editor
- Captures the number of moves required to match all the cards.
- Captures the time required to complete the game in minutes and seconds.
- Once the game is completed, displays star rating on the basis of time and moves made by the player with a Modal message.
- In the modal message player can choose to play the game again or close it.
- Player can restart the game at any time using the reload icon on the screen.
No such external dependencies are required to play. All assets are locally available and works offline,removing the need for an active internet connection.
Any suggestions are welcome.