Milestoneproject-2

Comics Memory Game Project

What is the Memory Game?

• Link view the live project 🏠 here

The memory game consists of fifth cards arranged randomly in a grid. The deck is made up of eight different pairs of cards, each with different symbols on one side.

Rules

Each turn:

• When it starts, you will have about 1.5 seconds to help you memorize the comics' characters
• A player flips one card over to reveal its underlying comics character
• The player then turns over a second card, trying to find the corresponding card with the same comics character
• If the cards match, both cards stay flipped over
• If the cards do not match, both cards are returned to their initial hidden state
• The game ends once all cards have been correctly matched

It is designed to have easy access on a range of devices, with simple navigation.

Features

• 1 Theme: DC and Marvel Comics
• Sounds on winning or losing
• New record pop - up
• Keep record of top 10

Challenge

Match cards in less time with less moves.

How to play

Instructions:

• Click on a card
• Keep revealing cards and working your memory to remember each unveiled card
• Match cards properly with less moves and in faster time

How I built the Memory Game.

I manipulated the DOM with. JavaScript altered part of the HTML and style the game.

• Created a deck of cards that shuffles when game is refreshed
• Created a counter to count the number of moves mad by player and timer to know the duration of the play
• Added effects to cards when they match and are unmatched
• Create a pop-up modal when player wins or loose game

Technologies Used

Languages Used

• HTML5
• CSS3
• jQuery
• JavaScript
• Bootstrap5

Design

• Color Scheme
  • The two main colors used are Black and white.
• Typography
  • Default Bootstrap 5 web font family - reference

Frameworks, Libraries & Programs Used

1. Bootstrap 5.0.1
   • Bootstrap was used to assist with the responsiveness and styling of the game
2. jsDoc
   • jsDoc was used as format to comment JavaScript code
3. jQuery 3.6.0
   • jQuery was used to make buttons and containers
4. Git
   • Git was used for version control by utilizing the IDE terminal to commit to git and push to GitHub
5. GitHub
   • GitHub is used to store the project after being pushed from Git

Testing

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

• W3C Markup Validator - Results

Testing User Stories from User Experience Section

• First Time players Goals
  1. Upon entering the game, user is automatically greeted with an easily visible center page panel
  2. Over the top of the panel tile figures, you can find number of moves in heart shape symbols, score and time left
  3. The player has the options to subscribe his name for further record

Further Testing

• The memory game was tested on Google Chrome, Microsoft Edge, and Safari browsers
• The memory game was viewed on a variety of devices such as Desktop, Laptop, IPhone7, IPhone8

Deployment

The project was deployed to GitHub Pages using the following steps:

• Log in to GitHub and locate the GitHub Repository
• At the top of the Repository (not top of the page), locate the Settings Button on the menu
• Scroll down the Setting page until you locate the GitHub Pages Section
• Under Source, click the dropdown called “None” and select “Master Branch”
• The Page will automatically refresh
• Scroll back down through the page to locate the now published site Link in the GitHub Pages section

How to Run

• Clone the Repository
• Pen index.html file to view the project in your browser

Content

• All content was written by the developer

Media

• Logo custom made by the developer with Adobe Illustrator
• All images found [https://www.pinterest.ie/pin/277252920797320654/]