Memory Game

A single page web app consisting of 16 cards arranged randomly in a grid. The deck is made up of 8 pairs of cards, each with different players on one side. Match the same players by flipping the cards in minimum amount of moves and time for a higher score and rating.

Open and view the Project using the .zip file provided or at my Github Repository.

The Game is also hosted on Github.

Table of Contents

• Getting Started
  • Instructions
  • Tools Required
• Development
• Running the App
• References

Getting Started

This Project is all about demonstrating my mastery of HTML, CSS, and JavaScript. I built a complete browser-based card matching game (also known as Concentration).

This project was built from scratch and is a part of Udacity's Front-End Web Developer Nanodegree program. The project will be evaluated by a Udacity code reviewer according to the project rubric

Udacity also provides the starter code for this project which can be found here

Instructions

The game board consists of 16 cards arranged randomly in a grid. The deck is made up of 8 pairs of cards, each with different players on one side. The cards are arranged randomly on the grid with the players side down.

Match the same players by flipping the cards in minimum amount of moves and time for a higher score and rating.

Each turn:

• The User flips one card over to reveal its underlying player.
• The User then turns over a second card, trying to find the corresponding card with the same player.
• If the cards match, both cards stay flipped over
• If the cards do not match, both cards are returned to their initial hidden state

The game ends once all cards have been correctly matched.

Tools Required

• jQuery (Javascript Library) for easier coding of javascript.
• Bootstrap to make the page responsive.
• Image Resizer to resize Cover and Card Images.
• Color-Hex to add hexa-decimal color codes in css.
• HTML Beautifier to Beautify HTML.
• CSS Beautifier to Beautify CSS.
• JS Beautifier to Beautify JS.
• Online Markdown Editor to test README.md.
• Google Fonts to add stylish text.
• Fonts Awesome to add Icons.
• Animate.css to animate CSS.

Development

• Create index.html with following markup:

  • Start and Win Modals
  • Game board with basic grid structure
  • Icons to handle functionalities

• Create styles.css with additional styling and media queries to make the app more responsive

• Create engine.js for adding the functionalities:

  • Add a Model called players with all the player info
  • Add a viewmodel with the following functions:
    • A function to trigger the game to start when clicking on Start Modal
    • startGame which Shows and Hides the Modal and calls runGame
    • runGame which runs the game and contains the following functions:

      createCards
shuffleArray
flipCard
matchCards
setRating
timer
      

    • resetGame to restart the game by resetting the game board
    • endGame to end the game and display the results in a modal

For details now how these functionalities have been implemented, refer the source code.

Running the App

• Open the project through the .zip file provided and extract file.

  Open index.html from the root directory in the browser of your choice.

• Click on start icon to play the game and get ratings(score and stars) for your performance.
• Restart the game with the reset button at the bottom of the screen or in the results modal after completing the game

Screenshots

Start Screen

Game Board

Gameplay

1. Unmatched Cards Open

2. Unmatched Cards Closed

3. Matched Cards Open

4. Winning Screen

References

• Stack Overflow and W3schools for minor references
• Array shuffle from Stack Overflow's answer
• Card Flipping CSS from David Walsh's Page