Gold Hunter

Project Overview

Gold Hunter is a memory game where the player has to find matching images of money at the end of the rainbow.

User Experience

Mock up. https://github.com/SteveMontgomery55/Gold-Hunter/blob/e87f7737b85d835312b3e4b5f97342362918c5e6/README%20images/Mockup.jpg

Gameboard. https://github.com/SteveMontgomery55/Gold-Hunter/blob/e87f7737b85d835312b3e4b5f97342362918c5e6/README%20images/Gameboard.png

User Stories

First Time Visitor Goals

1. As a First Time Visitor, I want to see what the game is.
2. As a First Time Visitor, I want to see if I can pick it up easily.
3. As a First Time Visitor, I want to see if I can complete the task.

Returning Visitor Goals

1. As a Returning Visitor, I want to see if I can finish the game quicker.
2. As a Returning Visitor, I want to see if other levels of difficulty have been added.

Features

The game board is brightly coloured and visually pleasing. The images of the the matching pairs are quite similar
to each other in some cases to make the game more difficult.
The game is responsive on all sizes of device and the images also have alt attributes so if the images do not
display, the game can still be played.

Furture Features

Many more levels could be added to the game with more matches to find.
The images could be even more similar to each other to add to difficulty
A countdown timer element could be added for more difficulty.
A scoreboard could be created for returning users.\

Technologies Used

To create this site, the following have been used.
GitPod https://www.gitpod.io/ and GitHub https://github.com/ were used to create, host, store and
eventually deploy the project.
Bootstrap https://getbootstrap.com/ was used for layout and resposive elements of the site.
Pexels https://www.pexels.com/ was used for all the images throughout the site
W3C https://jigsaw.w3.org/css-validator/ , W3C https://validator.w3.org/#validate_by_input and
were used JSHint https://jshint.com/for testing purposes along with Lighthouse in developer tools\

Testing

First Time Visitor Goals

1. As a First Time Visitor, I want to see what the game is.

• On first loading the site, a simple line of text explains what the game is about.

2. As a First Time Visitor, I want to see if I can pick it up easily.

• After reading the basic instructions, and two cards being clicked on, an alert appears with either a yes or no comment,
  with more relevant wording relating to the game. Once the ok button is clicked, the game can carry on.

3. As a First Time Visitor, I want to see if I can complete the task.

• Once started, the urge to finish the game is too great to just leave it, so completing it is a must.

Returning Visitor Goals

1. As a Returning Visitor, I want to see if I can finish the game quicker.

• Until a possible coutdown is added, competition against yourself and previous times is a big incentive to try again.

2. As a Returning Visitor, I want to see if other levels of difficulty have been added.

• A number of additions can be made to the game including more levels to draw users in.

I have run the code including css through W3C validators and checkers and no errors have occurred.

HtML check
https://github.com/SteveMontgomery55/Gold-Hunter/blob/06e6eb782904ee9174fb0d88634c6abd7e492352/README%20images/HTML-Checker.png

CSS check
https://github.com/SteveMontgomery55/Gold-Hunter/blob/06e6eb782904ee9174fb0d88634c6abd7e492352/README%20images/CSS-Validation.png

JavaScript check
https://github.com/SteveMontgomery55/Gold-Hunter/blob/06e6eb782904ee9174fb0d88634c6abd7e492352/README%20images/JavaScript-Checker.png

Deployment

Site is deployed by GitHub

In GitHub, find the GitHub Repository
Click on the Settings button.
Scroll down to GitHub Pages.
Click the link to the new dedicated tab.
Under Source, click on None.
Select Master.
Select save.
A link will appear to the deployed site.\

https://stevemontgomery55.github.io/Gold-Hunter/

Credits

Content

I have used a number of sites and tutorials to help with code, content and styling.
The links to these are as follows.
https://dev.to/fakorededamilola/create-a-memory-game-with-js-1l9j
https://devsnap.me/javascript-memory-games
https://codepen.io/unnegative/pen/dVwYBq
https://www.youtube.com/watch?v=ZniVgo8U7ek
https://www.youtube.com/watch?v=tjyDOHzKN0w

Media

All photographs are taken from the Pexels website.

Acknowledgements

Credit needs to go to the tutors at The Code Institute for their support and my Mentor Aaron Sinnott
for his help and encouragement.