Code Institute Milestone Project 2

Memory Game for Preschoolers

User Experience (UX)

The primary goal is to provide an appealing and fun memory game for children aged 3 - 6 years old.

User Story

The game should be intuitive and easy to navigate for young players. Parents should be able to easily demonstrate the game to their children if necessary.

Goals

The game will have a simple layout with child-friendly images, font and attractive colours.
There will be a score counter so the player can see the results.
There will be 3 levels where the player can choose a level corresponds to their ability.
There will not be a timer to avoid putting the player under pressure.
It is the most important for the player to have fun and be able to complete the game for a sense of achievement.

Design

Colour Scheme

Bright and coordinating colours are used to appeal to young children.

Font Type

The Montserrat Alternates font is the main font with Sans Serif as the fallback font. This font looks fun and informal.

Images

Images are crucial for a memory game.
They must be eye-catching to capture children's attention.
They need to be identifiable so the player can remember them.
Image size is optimised with particular consideration to fit on mobile devices as this is likely to be the main platform where children will play the game with.
Animal images are chosen for young children which they might already be familiar with.

Wireframe

Features

Responsive on desktop and mobile devices with parituclar emphasis on the latter which is the main platform for playing games.
Interactive elements where player can flip the cards to match and clear them from the game board area.

Technologies

Languages Used

HTML
CSS
Javascript

Frameworks / Libraries / Programmes Used

Google Fonts is used to import font type.
Font Awesome is used to import icons.
Unsplash.com is used to import images.
Git is used with Gitpod terminal to commit to Git and push to GitHub.
GitHub is used to store the projects code after being pushed from Git.
Figma is used to create the wireframes.

Testing Tools

Pages were checked using Chrome DevTools.
HTML codes are checked using W3C HTML Validator and beautified using HTML Formatter.
CSS codes are checked using W3C CSS Validator and beautified using CSS Formatter.
Javascript codes are checked and beautified using beautifytools Javascript Validator and Beautifier.

Testing User Story / UX

Upon entering the site, parents and children are welcomed by a colouful homepage with an hero image of young children and educational images.
The homepage states the potential benefits of memory game and provides game instructions.
There is a button to start the game at easy level under instructions.
The navigation menu shows 3 levels of difficulty: easy, medium and hard.
The difficulty options are easy to select by click of a button and will bring the player to the relevant page.
For each gaming page, there is a counter to record the score, a grid to show the cards for each corresponding level (3x4, 3x6 and 3x8).
There is a restart button should the player wish to play another game.
All pages are clean with emphasis on the game board which shows a range of animal photograph cards.
There is sufficient time for the cards to be displayed when being flipped over to help children to memorise the images.
The games are designed not to entrap the players with a timer, but to let them complete the game in their own timeframe.
There are no social media links which are not appropriate for young children.
The player can learn through playing the game and improve their cognitive skills and to have fun.

Further Testing

The website is tested on various browers including Google Chrome, Safari and Firefox.
The website is also viewed on a variety of devices using the Google Chrome Inspect tool function across platforms such as desktop, iPad and iPhone to ensure that it is responsive.
Testing is done repeatedly to ensure there are no broken links between the homepage and all three gaming levels.
Family member is asked to view and play the games to identify issues if any.

Bugs

When using the Google Chrome Inspect tool, the game board is pushed towards the right when displayed on some mobile devices.
The restart button is not levelled with the score counter when being moved across responsive screens.
The game board remains uniform in size across plateforms which works well on mobile devices but does not stretch across on full computer screen.
Decision was taken to keep them as they are in the current game board layout to avoid any image distortion.

Deployment

The project is deployed to GitHub as follows:

Log onto GitHub.
Create Repository in GitHub called Memory Game Project with description.
Open workspace in Gitpod.
Identify and correct any issues highlighted.
Commit changes and push across from Gitpod to Github as initial commit.
Regularly commit all files and images on Github for progress tracking.
Push and commit all files from Github ready for submission.
Recheck Readme file and all files prior to final commit.
Locate GitHub pages under Settings in Repository.
Under Source click dropdown menu, select the Master branch and save.
Return to GitHub pages and the published site link is displayed.

Credits

Code

Below are links to tutorials from which external codes were used:

YouTuber DarkCode - Responsive Menu Navigation Using Only HTML & CSS https://www.youtube.com/watch?v=cQ6YQ8K5MRw
Stackoverflow User w3debugger - 2 Columns layout in CSS https://stackoverflow.com/questions/29395613/two-columns-layout-in-css-text-and-image-changing-order-in-each-row/29395830#29395830
w3schools.com - Responsive Image Gallery https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery_responsive
w3schools.com - HOW TO Responsive Form https://www.w3schools.com/howto/howto_css_responsive_form.asp
YouTuber Ania Kubow - Make Memory Game in Javascript, HTML and CSS https://youtu.be/tjyDOHzKN0w
codegrepper.com - Refresh button snippet
https://www.codegrepper.com/search.php?q=refresh%20button

Content

Following advice from mentor, improvements were made as follows:

Restart button added to refresh game page instead of having to click on menu.
Game board was adjusted to improve positioning when viewing across devices.
Javascript codes written in 3 separate javascript documents were merged into one for cleaner coding and less repetition.
Play button added to facilitate game play.
Readme file was updated to include more details of the whole development and testing processes.
Testing results checked.

Media

All photographs are free downloads from Unsplash.com:

bird by Boris Smokrovic
blocks by Susan Holt Simpson
bricks by Patrick Tomasso
camel by Saj Shafique
elephant by Alessandro Desantis
fox by Ray Hennessy
kids by Macus Spiske
koala by Jordan Whitt
learning by Element5 Digital
leopard by Gwen Weustink
lion by Francesco De Tommaso
panda by Yu Wang
rhino by Ronald Gijezen
tiger by Kartikeya Srivastava
turtle by Wexor Tmg
white by Olga Thelavart
zebra by Frida Bredesen

Acknowledgements

I received inspiration for this project from Code Institute.
My mentor, Medale Oluwafemi, has provided helpful feedback at Skype call sessions.
The Slack community has helped to maintain the initiative and motivation.
Online free tutorials have proven to be extremely helpful in consolidating my understanding.

code-institute-submissions / memorygameproject Goto Github PK

memorygameproject's Introduction