Shell-Shock-Memory-Game

My second project will be based on a memory card game. The theme will be my favourite cartoon group known as the Teenage Mutant Ninja Turtles. I will be using HTML, CSS and JavaScript to create an interactive game.

Demo

Here is the interactive demo game

User Experience

• UX Design

This game is for user that to play games. The Memory Game is the most suitable game because the user gets to find all the cards to match. It is fun and interactive for all users. It will be in a single page format.

User stories

• As a user, I want to be able to click all the cards.
• As a user, I want to be able to see how much time did i match my cards.
• As a user, I want to play the game again.
• As a user, i want to understand easily about the functionality of the game.

Design

• Color Scheme
  • The main colors I used are green and black.
• Typography - I used Cambria font style.
• Imagery
  • I found the image on the website to find the characters that everyone likes. These images could attract the user's attention.

Wireframe

This is the wireframe that i did for desktop, mobile and tablet. It shows my explanation on how i want my game to be displayed.

• Memory Game Wireframe

Features

The game will consist of 14 cards with the title above and time below the cards.

Existing Features

• Cards- it allows the users to click and see what the card reveals.
• Time- it allows the users to check how much time he/she needs to complete the game.

Future Feautures

• As a returning user, I want the game to have music.
• As a returning user, I want the game to have a popup.
• As a returning user, i want time to stop when i complete the game.
• As a returning user, I want to play the game again but with buttons.
• As a returning user, I want to be able to get some scores.

Technologies Used

1. HTML
2. CSS
3. Balsamiq
4. Git
5. GitHub
6. Javascript
7. JQuery
8. Html Validator
9. CSS Validator
10. JavaScript Validator

Testing

Testing User Stories from User Experience (UX) Section

As a user, I want to be able to click all the cards.

The user will be introduced with two sets of cards where he/she will be able to click the card that he/she reveals

As a user, I want to be able to get some scores.

If the user click on the card and matches with another card, he/she will definitely get a score

As a user, I want to be able to see how much time did i match my cards.

The time will be displayed for the user and the user will be able to check how much time he/she has left

As a user, I want to play the game again.

The user can play the game again by reloading the browser.

As a user, i want to understand easily about the functionality of the game.

The user will be able to understand the game and it will help the user to know where the cards are and if they match or not

Further Testing

• I add jquery to better simplify and adjust my codes.
• I want my functions to work correctly without any bugs. I decided to create a condition where each card has been defined. So l defined them as "firstClick". Therefore i want to make sure that if the cards match, they wont flip back and if the cards do not match, they flip back.
• I tested the game with Google Chrome, Microsoft Explorer and Mozilla Firefox.
• I tested the game using different devices using my IPad and my IPhone.

Bug

I have encountered so many bugs in my game but i did my best to fix them as much as possible:

• The functions were complicated to solve the problem but i have made some changes for each function to work.
• I removed the check function because it was not actually checking the cards properly.
• I fixed the matched function to actually check if the cards match.
• I fixed the unmatched function to actually check if the cards do not match.
• I was able to fix time but unfortunately when i finish the game, it continues to go on.
• I used lockBoard to fix the bug for the memory board game.
• Every time i click the card fast, the card will move and you will have to wait until the card flips back.

The screenshots for testing proof

Deployment

• To deploy my project to GitHub pages, here are the following:
  1. Log in to GitHub.
  2. Go to your right-hand profile and locate "your repositories"
  3. Click to the project (i.e. shell-shock memory game)
  4. Go and click Settings.
  5. Scroll down to GitHub pages.
  6. Click and change "None" to "main" because it will automatically show the root folder.
  7. Click Save.
  8. The page will automatically refresh.
  9. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.
  10. Click on the link and it will display the website.

Credits

Code

Content

• To create the memory game, i watched the tutorial by codeTonight which gave me useful tips while changing the code to help fit my own needs for the game.(https://www.youtube.com/watch?v=QrTCHHhoUQU&ab_channel=codeTonight)

Media

• The photos used are from Google images.

Acknowledgements

• I received inspiration from Nickeledeon.
• I would like to thank the Tutor Assistance for helping me with technical difficulties.
• I would to thank my friend for assisting me with solving the code problems.
• I would like to thank Aaron for the support.