Milestone Project2 - Memory Toad Game

Introduction-

Welcome to my second Milestone Project called 'Memory Toad' which will be showcasing my skills, learning and understanding that I have learnt through the course so far while being implemented into a front-end, user centric memory game.

Within this README, I will cover all the steps and planning processes used while creating this project, including where I gained my inspiration from and my main focuses as the developer. You can view my live project here

During the planning process, I found the Elements of User-Experience to be helpful as it allowed me to keep in mind what the user wants and how my piece should respond to their actions. These elements are broken into 5 key stages:

The Strategy Plane
The Scope Plane
The Structure Plane
The Skeleton Plane
The Surface Plane

Strategy-

I began to conduct some research on what features a conventional memory game included in order to further understand what users would be expecting. I came up with a list of goals that I would want to achieve for my project:

Creator stories

As a creator, I want to create a positive user response throughout the project, following the principles of UX design and presents a structured layout and navigation model.
As a creator, I want to make sure that all content isn't too much for the eye and it all flows together nicely and smoothly.
As a creator, I want to ensure that once viewing my project from the homepage, the user is not confused by the purpose of the project.
As a creator, I want users are able to interact with the site in their particular way, to achieve their personal goals

User Stories

As a user, I want to be able to easily navigate my way through the site.
As a user, I want to be able to play the game across any device.
As a user, I want to have clear instructions so I know how to play the game.
As a user, I want to be able to contact the developer with any questions.

Once establishing both creator and user stories, my goals for my project were clear as I had an evident idea of what users will be expecting of the project game.

Scope-

This project is a simple and fun memory matching game that allows you to keep track of your score and moves.

The landing, play and contact page share the same simple design, yet correspond perfectly with Nintendo's retro game colour scheme. The simple to use, neat display offers the users easy navigation and total control.
The home page is an introduction to the game site. It includes a main image and a short and simple summary of the game and its instructions. It has a brightly coloured play button to direct the user to the game page.
The play page greets the user with two main buttons; the play button and the instructions button.

As the user clicks the play button, the game grid is instantly shown alongside their score, moves and reset button.
The user must choose 2 cards at a time and see if they are a match. If they are, the cards stay facing up, otherwise they are flipped back down and the user must try to remember where the colours are.
Once all of the matches are found, a congratulations message appears and the user is able to reset the game and replay.

A contact page to allow the users to contact the developer with questions and suggestions.

Requirements-

The game can be played across all devices and screen sizes.
The site is responsive.
Buttons and links are clear and easy to click on.
The navigation bar is always present(A menu for smaller screen sizes.)
A functioning reset button so the user doesn't have to exit the browser to play again.
The game is functioning with no crashes or bugs.
a simple and minimalistic design to keep the focus on the game.

Structure-

As my game characters were based on Nintendo's Mario games, i wanted to make a clear connection to the colours Nintendo uses within their games. This is done to bring the nostalgic feel to my project and incorporate the Mario magic that I, and Nintendo fans feel. As I was already familiar with the Nintendo bright and fun colour scheme, i went ahead and chose these as my main colours:

Light Blue #60AAF6
Dark Blue #2323FB
Yellow #FFDA44
Red #FD0000

These bright, primary colours create a fun and explorative environment for the game. To enhance this playful theme throughout my project, i decided to use a moving pixel cloud background to mimic the moving sky that the retro Mario games had.

Typography

Segoe UI

I decided to use one main front throughout the project and use a variation of font weights to offer a diverse yet simple look that is easy to read for the eye.

The navigation bar and footer and consistent throughout all pages to keep a clean and simple look in order for the user to feel familiar to where features are placed across the site. As the screen size becomes smaller, the navigation turns into a hamburger menu with a toggle feature, allowing the user to interact with when they want the menu to appear.

Use of relevant images on the landing and play page to fill in empty spaces and be appealing to the eye.

Within my project, i used bootstrap's framework and libraries to ensure my site is responsive and has a clean finish.

Skeleton-

As part of my planning process, creating mockups and wireframes helped me to visualize my ideas and see if they would be pleasing to the eye. These are my initial conceptual ideas:

There were minor changes made from the origional idea however i attempted to not make any major differences. Here are the differences between the initial mockups to my current project:

Home page:

-The nav bar logo and sub pages were on opposite sides of the page. I brought these closer as i thought it look more appealing to the eye.

The hero image and text have switched sides, making it easier to become responsive

Play page:

-The play and instructions button have been removed as the game appears by default and the instructions are on the home page. This made a lot more sense as now, the user can click the play button on the home page and be redirected to the play page and begin the game without clicking any extra buttons.

The 'moves' and 'score' boxes appear above the game, keeping a simple and clean finish to the page. This can stay the same on smaller screens aswell.
The toad image on the page is removed on smaller screens to allow only the game to be the main focus and be too much for the eye.

I chose to go ahead with these changes as I thought it would make my project a lot more appealing to the user. The changes were made as a result of my growth and learning in interactive, front-end development as I have more of an understanding and more experience in the design and development of the project.

Surface-

Features that are present in the project

All pages have the same responsive navigation bar which includes the game logo and sub pages. The nav bar can be viewed on all devices as it toggles into a hamburger menu when viewed on smaller viewports. The active page is highlighted bright yellow, corresponding to the site's colour scheme.
A play button on the landing page to allow the user to be directed easily to play the game instead of having to click the options on the nav bar.
A bright, moving pixel sky backgound to enhance the playful theme and allow the other primary colours across the site to stand out. E.g: the red play button goes very nicely with the blue coloured background.
There is a clear and evident colour scheme throughout the site: blue, yellow and red. This adds very nicely to the clean and simple finish while also bringing a nostalgic, Nintendo feel.
Large hero images of Toad on the Home and Play page to keep the theme consistent and fill out empty spaces.
A simple, minimalistic footer with no background colour, allowing the soical icons to stand out as they are in different primary colours.
The score and moves update with every match made.
A contact form on the contact page to allow the user to directly communicate with the developer.
A reset button for Play page, allowing the user to reset their moves and score easily without refreshing the page or closing the tab.

Features that I still need to add

Having the contact form send the user's message to the developers email.
Adding a timer feature to the game.

Technologies Used

HTML
- This is used a the base of the code. It structures the code and acts as the main building block
CSS
- This allows styling to be added to the project.
Hover.css
- Hover effect used for the social icons, navbar, and portfolio.
Bootstrap
- A framework to make the project responsive
jQuery
- A framework used with Javascript
Font Awesome
- Used to obtain icons used for the footer and contact page.
Google Developer Tools
- Used to help debug the code and help find syntax errors.
Github
- Used to push and store the code.
Atom
- Used as the IDE and the development environment for writing the code.
JustInMind
- Used to create mockups.
JS validator
- Used as a JS validator
HTML validator
- Used as a HTML validator
W3C CSS Validator
- Used as a CSS validator
Grammarly
- Used to check and correct grammatical errors across the project.

Testing

Functionality Testing

Navigation bar
- The navigation bar always stays at the top of the page, on all sub pages and screen devices.
- When the logo/ game name 'Memory toad' is clicked on, It brings the user to the home page.(has been tested on all screen views from all pages.
- All links are working properly and have been tested.
- The hamburger dropdown menu appears on screen sizes smaller than 992px. These links on the dropdown have been tested and are working fine.
Hover effects throughout site
- Every button throughout the site has some sort of hover effect, either a change in background colour, or a slight increase in size to imitate the retro nintendo buttons. All hover effects have smooth transitions.

-Footer - footer and social icons are always displayed at the bottom of the page . - When social links are clicked on, they are taken to the right and relevant social media pages on a new tab.

Contact Form
- The form requires all fields to be filled out and alerts the user when this is not done. The user cannot submit the form until this is done.
- Once the submit button is pressed an alert message appears letting the user know that their message has been sent. This message appears on all screen sizes.
- Once the 'ok' button is clicked on the modal message, the user is redirected to the home page.
The Game
- When two cards are clicked on, the moves counter increases by one, when a match is made,the score count increases by one.
- When reset button is clicked, the cards are flipped back around, the score and moves are reset, and cards are shuffled.
- The reset button resets both the score and moves count back to zero.
- The user is unable to click on more than two cards at a time as the game board is locked during the matching period.
- Once a match is made, the user cant click on one of the matched cards.
- The user cant click on the same card twice.

Testing User Stories

I used the following browsers to test out my project:

Google chrome
Firefox
Microsoft Edge

I used Chrome dev tools to allow me to view how my site would look across the following devices:

Iphone X
Iphone 6/7/8
iPhone 5/SE
Pixel 2/2 XL
Motorola G4
Surface Duo
Ipad
Ipad Pro

I used a validator to validate my HTML, CSS and JS errors within my code

The main errors that came up in my HTML code were:

Some img elements were missing 'alt' attributes. I added these with small descriptions of what the images were.
unclosed div elements
no spaces between attributes. These errors were all fixed.

The main errors that came up in my CSS code were:

missing semi colons These errors were all fixed.

The main errors that came up in my JS code were: -missing semi-colons -some variables were not defined properly. Most of these errors were fixed, however i was left with "'result' and '$' is not defined."

Known Bugs and fixes

The landing page main content wasnt responsive.

I added bootstrap elements and classes thoughout the HTML such as 'text-center' and 'container-fluid' to ensure it was able to be viewed on smaller screens and responsiveness would be smooth

The footer was responsive on some devices but not all.
- I made a seperate media query for the specific device size in order to ensure the footer stayed at the bottom of the page for all viewports.
The reset button wasnt working on the game page as it would only reset the moves and not the score.
- I added : result.innerHTML = 0; to the reset function in my JavaScript in order for the result count to be reset to 0. This line of code is also added at the top of the js file in order the game to reshuffle when the tab is refreshed.
The reset button wasnt shuffling the cards.
- This enabled the user to remember exactly where the cards are, and defeats the purpose of a reset button. I fixed this issue by adding the line of code:
  - cardList.sort(()=> 0.5 - Math.random());
Users can spam click the cards causing the game to crash.
- I wanted to ensure that the player is unable to click more than 2 cards at a time until the code checks if the cards match. I began this step by step and added 'let locked = false;' as a variable that would determin when or where the locked variable would take place. I made sure to set the 'locked = false' in the reset function in order for the cards to be unlocked once the board is reset.
The contact form wasnt functioning.
- I added the form element to HTML and added input fields. I then created a JS file for the contact form which allowed me to add if statements for when error messages would appear. I also added an alert message for when the message was successfully sent through an if statement which checked if the amount of errors were equal to 0.
The player could press on the same card twice, and the score would increase.

In order to resolve this, i had to create the empty array of 'firstCard' which is where both first and second cards would be pushed to. The logic i used was: the two cards that are chosen are pushed to the 'firstCard' array. If theyre a match, their click event listeners are removed, else, they flip back around. The array is cleared after every pair is chosen.

I had a slight overflow issue only on smaller screen devices.

I fixed this by removing the padding on the navbar which was pushing the whole page to the right, resulting in a scroll bar at the bottom of the page.

The matched cards could still be clicked on and played with even after being matched. To resolve this, i used this line of logic:
- card.removeEventListener('click',flipCard);
- This enables me to remove the event listener of the cards being clicked if they were a match until the board is reset again.

I used Dev tools quite alot throughout my testing process to see if variables were being called. I did this through the console, and would constantly console.log to see if they were working. this technique i found very helpful as if the console wouldnt output the varibales, i would know something is wrong and go back to the code to correct it.

For example, the screenshot above allowed me to see that all my arrays were acting correctly, however my images were loging out as 'null' instead of their srcs.

Deployment

This project has been deployed using GitHub pages and I have used the following process to do so:

Publishing

Within your repository section, choose which project you would like to deploy.
At the top, underneath the project name, there are several options such as 'code' and 'issues'
Choose the option 'settings'
Scroll down until you see the section: 'Github Pages'
Within this section, below 'source', choose which branch your project is under and then click Save.
Once the page refreshes, go to the Github pages section and you will see "Your site is published at ...."
Click on the Github Pages web address and you will see your project live.

Forking You can fork a project to make a copy without it affecting the main branch with this process:

log in to GitHub and find the repository that you wish to fork
Once you have clicked on the repository, on the top right-hand side you will see three options: 'unwatch' 'star' and 'fork'
Once the fork button is clicked, you will then have a copy of the repository in your Github account

Cloning You can clone/download your chosen repository to your local device by using this process:

Choose the Github repository that you wish to clone.
Chose the 'code' button at the top next top 'add file'.
Copy the link that you are given.
Open your terminal and choose the directory to the location you would like the clone to be in.
type in git clone and paste the URL you copied and then click enter.

Credits

Used Stack Overflow when having issues with code and to find solutions.
Used Online Tutorials Youtube to help me with the js code for making the 'moves' score increse.
Used Dani Krossings videos to help me understnad a bit more of JS functions.
Used Bootstrap with navigation bars and cebtering text.

code-institute-submissions / laila-ba-project2_septresub Goto Github PK

laila-ba-project2_septresub's Introduction