PRIDE MEMORY GAME

This project is based on the children’s card game, where the player tries to match pairs of cards that are flipped over. The player is shown how many moves they use and a timer to determin how long to complete the game.

Reflection

This is my final project I did with my coach Gillian through the Get Coding Program. Learning from Gillian was a great experience and I found her helpful and always leading an ear to help me solve most of my issues. Some thing I struggled with were flipping the cards back once clicked if not a match and shuffling the cards. Javascript challenged me in many ways to think outside the box. I enjoyed putting this project together, seeing the final result and showing my family and friends.

I am currently working on a larger scale game with 20 cards using similar code to keep JavaScript in my brain.

How To Play

• Click start button OR click a card to begin
• Click another card and determin if a match is made
• If two selected cards are a match; card matches stay visible; if not a match flip back and click another card
• Once all matches are found; win board is shown with a win board with time and moves and a replay button

Win Board

Overview

I have put together a memory game where I use css to syle my game; basic html and vanilla javascript. The game contains;

• Display of 12 cards
• Duplicate the cards to have 2 sets of 6
• Rainbow theme
• Start Button
• Timer and moves counter
• Randomize the display of cards
• Show back of card initially and flip on select
• Show image of front of card
• Flip back in not a match
• Stay visible if a match
• Only allow two cards to be selected at a time
• Once all cards selected and Win Message displayed

I decided to honour Pride month in our province (June) with a Pride theme. This project is based on the children’s card game, where the player tries to match pairs of cards that are flipped over. The player is shown how many moves they use and a timer to determin how long to complete the game. If the player successfully matches all of the cards, a “win” message is displayed with how many moves and how long you took to win!

Built With

• HTML
• CSS
• JavaScript

Link to Demo Site

https://ellemd709.github.io/Memory-Game/

Home Screen