Project Overview
What Will I Build?
The Memory Game Project is all about demonstrating your mastery of HTML, CSS, and JavaScript. You’ll build a complete browser-based card matching game (also known as Concentration). But this isn’t just_any_memory game! It’s a shnazzy, well-designed, feature-packed memory game!
The styling of the game is up to you, but here's what we came up with:
How The Game Works
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.
Game Functionality
The real-life game, players flip over cards to locate the pairs that match The goal is to recreate this effect in your project. There are a couple of interactions that you'll need to handle:
- Flipping cards
- What happens when cards match
- What happens when cards do not match
- When the game finishes
Below are some examples of how we implemented these interactions.
A Correct Guess
An Incorrect Guess
Winning The Game
Interactivity Guideline
Keep in mind that the specific functionality demonstrated here (e.g. a card performs a horizontal flip when clicked) is an example. You do not need to have this exact functionality.
What Will I Learn?
The memory game presents the first opportunity to fully combine your skills in HTML, CSS, and JavaScript into a large project. Aside from solidifying your skills with these three technologies, you'll discover how best to combine them in a complex application.
The following are just some of the questions that you'll experience along the way:
- What's the ideal workflow?
- How many files do I need?
- Do I modify the HTML first or the CSS?
- How many JavaScript functions do I need?
- Should my function be this many lines of code?
There's no one right answer to each question. While building this project, working with mentors, and getting feedback from the project reviewer you'll develop answers to these questions.