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.

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 the score 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

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

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.