This is my second milestone project, I have created a memory game that you as a player must turn the cards and try and find the matching pairs before the time runs out.
I deployed my website and files using GIT and GITHUB hosting. GIT is used to push files up to GITHUB where i can store the code for you to see. If you want to see the source code you click on the file name ie. index.html or style.css.
Link to my website: https://kososwede.github.io/ms2/
You start by choosing which category you would like the cards to display. You then are presented with a screen that you must click or press whenever you are ready to begin to start the timer. You then click on the cards you would like to turn over, if the second card that is turned is not a matched then both cards are turned back and you must guess again until all the cards are matched.
USER STORIES
The idea behind MIX 'n' MATCH is to enhance memory and thinking skills by taking part in mentally challenging exercises designed to 'train your brain'. Many people know are turning to brain training games to try and keep their brains active and healthy.
Here you will find a link to my wireframes: https://github.com/kososwede/ms2/blob/master/images/wireframes/project2-memoryGame.pdf
STRATEGY
This game was designed for players of any age or sex. The game will be a challenge but users will keep wanting to play to see if they can get fewer card flips than before. The game is cross platform friendly meaning you can enjoy it on desktop, tablet or mobile phone.
scope
There should be an easy to navigate landing page so that first time users or anyone not computer or mobile inclined can easily get a game started with a click of a button or a touch of a screen. The images that need to be matched on the cards should be clear and easily identified. The countdown timer and flip counter should also be easily readable so that users know how long they have left and also how many card flips they have had.
structure
The game is structured so that the relevant game is placed in its own page:
- Footbal game is placed in the button labeled 'FOOTBALL'.
- Dinosaur game is placed in the button labeled 'DINOSAUR'.
- Animal game is placed in the button labeled 'ANIMAL'.
There will also be a button at the top of every page that will take you back to the homepage when clicked.
SKELETON
Full screen landing page features the title of my game and a sub-heading. Underneath that there will be three buttons to the categories of the game. The main image on my landing page is a cartoon brain. The background colour has a linear gradient that goes from green to pink which i think is quite pleasing to the eye. It will be full screen on all devices with no need to scroll down.
SURFACE
I wanted to keep this game as simple as possible so that anyone of any age can play. I also used categories that can be liked by both male and female and the images are easily recognisable. I will use an image in the background that represents the categories that have been chosen.
- More categories, To give more control to the user.
- High score table, So that the user can keep track of their best scores and times.
- Background music, To give the game an extra element of fun.
- Adding different levels of dificulty.
- Changing the ammount of cards you can play with.
- HTML5 - as its the most widely used declarative language. https://developer.mozilla.org/en/docs/Web/Guide/HTML/HTML5
- CSS3 - used with HTML5 to produce colour, style and layout to my page. https://developer.mozilla.org/en/docs/Web/CSS/CSS3
- JAVASCRIPT - used in conjunction with HTML and CSS3, JavaScript is one of the core technologies of the World Wide Web. JavaScript enables interactive web pages and is an essential part of web applications.
- BOOTSTRAP (v4.3.1) - was used to create the buttons. https://getbootstrap.com/
- GIT - used to track changes I have made in my code. https://git-scm.com/
- GITHUB - works hand in hand with GIT, after files are added and commited to GIT they can be pushed to GITHUB into my repository. https://github.com/
- FONT AWESOME - to customise my text. https://fontawesome.com/
- PIXABAY - used for images in the dinosaur and animal game. https://pixabay.com
- ALL-FREE-DOWNLOADS - used for images in the football game. https://all-free-download.com
My website was tested in Chrome, Firefox, Safari, Opera and Microsoft Edge. It was also tested on android and ios devices and all worked as it should. A link from GITHUB was sent to my family and friends in England to make sure that it worked on all of their devices. All buttons worked and opened in a different browser window. I was testing my game at every major point in production to make sure everything I was implementing was working. My HTML5 CSS3 and my JAVASCRIPT code have all been checked in:
- https://validator.w3.org to check HTML5 and returned with no errors.
- https://jigsaw.w3.org to check CSS3 and returned with no errors.
- https://jshint.com to check JAVASCRIPT and returned no errors.
MEDIA
index.html
- Image was taken from https://pixabay.com
footy.html
- Images were taken from https://all-free-download.com
- Sounds were taken from https://freesoundeffects.com
dino.html
- Images were taken from https://pixabay.com
- Sounds were taken from https://freesoundeffects.com
animal.html
- Images were taken from https://pixabay.com
- Sounds were taken from https://freesoundeffects.com
I received inspiration for this project from
- w3schools.com https://www.w3schools.com/html/default.asp
- Bootstrap.com https://getbootstrap.com/docs/4.3/getting-started/introduction/
- CSS-tricks.com https://css-tricks.com/
- stackoverflow.com https://stackoverflow.com/
- Various videos on youtube https://youtube.com
- Web Dev Simplified
- FreeCodeCamp.org
- Code Sketch