Pokemon Memory Game

Pokemon Memory Game is game for children and adults. The goal of the game is to match the cards together that contains the same pokemon. The game is finished when all the cards with same pokemon are matched. The game let the user train their memory capability. The player can try to match the cards as many times as they want, without failing the challenge. The game has no time limit either. The player can take all the times needed to complete the challenge.

Features

Page Title

• The page title (h1) is placed on top of the game board. The title refers to the Pokemon slogan "Gotta Catch 'Em All". It also gives the player instructions of what the game is about.
• The most common Pokemon colors are blue and yellow. That is why the title is styled with a yellow color.

Start of the game

• Before the game starts all the 12 cards gets placed in random positions on the board.
• All of the 12 cards have their back faced against the player. So the player doesn't know where the cards are positioned.
• The card gets bigger when the player is hovering the mouse over it. This helps the player to know what card they are about to click on.

Playing the game

• The cards flips over when the player clicks on it. The player can then see the Pokemon behind the clicked card.
• The first clicked card stays revealed until the player has clicked on the second card. If the player find the matching Pokemon card, then both of the cards stays revealed. If the player choose the wrong card, then both cards flips back.

Completing the game

• The game is complete when the user has matched all the Pokemon cards.
• The player knows the challenge is completed, when all Pokemons are visible.

Features for the future

• In the future when there is more time. I would like to add a time limit to the game.

Testing

• I have tested playing this game on Chrome, Firefox and Safari.
• I confirm that the fonts and colors are easy to read for the user.
• I confirm that the game result are always correct.
• I confirm that the game looks good and works on all standards screen sizes using the devtools toggle device toolbar.
• I have run the website through lighthouse in devtool. The overall result is good. The game gets a lower score in performance because of all the images used in the game.

Bugs

Solved Bugs

• When I tested the game in JSHint I got 11 warnings that I need to use 'esversion: 6' or Mozilla JS extensions.
• I solved this issue by adding the following comment in my script.js file: /*jshint esversion: 6 */.

Validator Testing

• I have tested my project for bugs at https://validator.w3.org/, https://jigsaw.w3.org/css-validator/ and https://jshint.com/.
• No errors were found when testing the html file in the W3C validator.

• No errors were found when testing the css file in the W3C CSS validator.

• Two unsolved warnings found when testing the script file in JSHint.

Unfixed Bugs

• Two unsolved warnings in script. No unfixed bugs that affects the game.

Deployment

• The website was deployed to GitHub pages. The following steps were taken:

1. First log in to Github.
2. Select Ehnvik/pokemon-memory-game from the repositories list.
3. Select Settings from the Menu items.
4. Click on pages.
5. Change Branch: None to Branch: Main and then save.
6. The page has now provided the link.

Pokemon Memory Game

Credit

Content

• The code for making the functions and the structure in the game was taken from https://www.youtube.com/watch?v=3uuQ3g92oPQ and https://www.youtube.com/watch?v=ZniVgo8U7ek

Media

• The images used in the game was taken from https://freepngimg.com/games/pokemon