Memory Game Project

PROJECT: MEMORY GAME
DATE: 2016
DEMO: PLAY NOW
SKILLS: HTML/CSS/JAVASCRIPT/JQUERY/ANIMATE.CSS

Instructions

This is a simple memory game cerate with HTML, CSS, Javascript and jQuery library. They are eight pairs of cards with a total of 16 cards in each match. When clicking the card, it will be selected. The next move is to select the same pair of cards which you just selected just now. Once both cards are matched, it will open and lock. Which means you have paired the card. To win this game, you need to pair all the cards as lower move as possible to get higher ratings.

Code Dependencies

The app is built with the following code dependencies:

  • jquery.js – A javascript library is using app.js to simplify the selector of HTML.
  • animate.css – An animation CSS library that helps to save time on developing an animation from scratch. I use the bounce animation from here when I open the card. Noted: The reason I’m using this library is because There are tons of very cool animation here. It would be great to add a new feature for players to choose their own animation when opening the card. Credit to https://daneden.github.io/animate.css/
  • app.js – This file contained all the game logics and implementation.
  • index.html – The HTML structure of the game.
  • app.css – The game style sheet use for designing the index.html.