Build Memory Game With Html, Css And Javascript

Memory Game Project

Matching Game

DATE: 2016


This is a simple memory game cerate with HTML, CSS, Javascript and jQuery library. The are 8 pair of card with 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 card which you just selected just now. Once both card is match, it will open and lock. Which means you have paired the card. To win this game, you need to pair all the card 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 in app.js to simplify the selector of HTML.
  • animate.css – An animation CSS library that helps to save the time on developing a animation from scratch. I use the bounce animation from here when 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 new feature for player choose their own animation when opening the card. Credit to
  • app.js – This files 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.