Memory Game

Project for Udacity's Front-End Web Developer Nanodegree Program

🔗 View Live Project

Project Overview

Build a complete browser-based card matching game (also known as Concentration).

The game board consists of sixteen "cards" arranged in a grid. The deck is made up of eight different pairs of cards, each with different symbols on one side. The cards are arranged randomly on the grid with the symbol face down. The gameplay rules are very simple: flip over two hidden cards at a time to locate the ones that match!

Each turn:

• The player flips one card over to reveal its underlying symbol.
• The player then turns over a second card, trying to find the corresponding card with the same symbol.
• If the cards match, both cards stay flipped over.
• If the cards do not match, both cards are flipped face down.

The game ends once all cards have been correctly matched.

References:

• Webinar: FEND P3: Memory Game with Mike Wales
• Webinar: Memory Game Webinar with Ryan Waite
• Memory Game Walkthrough by Matthew Cranford:
  • Part 1 – Setup
  • Part 2 – Toggling Cards
  • Part 3 – Matching Pairs
  • Part 4 – Shuffling Decks
  • Part 5 – Moves & Stars
  • Part 6 – The Clock
  • Part 7 – Making a Modal
  • Part 8 – Putting It All Together
• Stack Overflow: Create a <ul> and fill it based on a passed array
• W3Schools: CSS/JS Modal – How To Create a Modal Box
• Sabe: How To Create a Modal Popup Box with CSS and JavaScript