Rock, Paper, Scissors, Lizard, Spock is the geek version of the classic Rock, Paper, Scissors game. Rock, Paper, Scissors, Lizard, Spock is created by Sam Kass and Karen Bryla.
- Visitors
-
The users of the site should imediatly recognise how the games works.
-
The users should find the buttons interactive and responsive.
-
The users should find the game easy to navigate and fun to play.
-
-
Colour Scheme
- The site has an array of different colours, all which are eaisly distiguishable from each other.
-
Typography
- The main font for the site is Barlow Semi Condensed with Sans-Serif as back-up. I used the back-up font Sans-serif because most browsers will be compatiable with it.
-
Imagery
- The website uses simple yet effective images which clearly indicate each option. The images are used make the user want to play the game and interact with the website.
-
Languages
- HTML
- CSS
- JavaScript
-
Header
- The header is centered at the top of the screen with a simple design with the name on the left.
- The score count is located at the right of the header with a contrasting background so that the user can easily see it. The score counter will keep track of the users progress.
-
Game box
- The game box is at the center of the page so that it is obvious to the user.
- The game box has five different options to choose from which are all coloured individually so that
-
The rules button
-
The rules button is at the bottom right of the page for easy access to the user.
-
When the user clicks on the button a modal box will pop up with the rules of the game.
-
-
Game Buttons
-
The user can clearly see the different choices of rock, paper, scissors, lizard, spock.
-
Using icons for the buttons gives a clear understanding what the user is pressing.
-
The mouse curser changes to a pointer so the user understands that this is a button.
-
The buttons colour fills the area when the user hovers over it with the mouse. It's striking and will attract the users attention.
-
-
Player and computer choices
-
This area of the game shows what the user picked and what the computer picked.
-
Font colour in white for contrast against purple background, so it's clear for the user to see.
-
the users choice will display next to the "You Picked:" and "The Computer picked:" statements.
-
In this area the user can clearly see the outcome of the round
-
The outcome will be displayed in the center of the page
-
If the user wins "YOU WIN!" will be displayed, if the users looses the round "YOU LOSE!" will be shown and if it's a draw "DRAW" will be shown
-
-
Play again button
-
The play again button takes the user back to select another option for the next round.
-
The button has a color transition when hovered over.
-
-
HTML
- No errors returned when passing through the official W3C validator
-
CSS
- No errors were found when passing through the official (Jigsaw) validator
-
Javscript
- The javascript page was put through Js Hint and came out with no errors.
-
Deployment of the site was done on GitHub. The steps of how are as follows:
-
Click on repository "portfolio-project-2" from my account. From there navigate to settings.
-
On the left side of the page under "code and automation" click on pages.
-
Select "main" in the Branch, then you will be provided a link that will take youto the completed website
-
-
While reserching for this project i came across FrontEndMentor.io where there is a challenge for this project. There are assets, JPG images of the design files and a basic style guide for you to use, so i took advantage of that and used it as a foundation of this project.
-
Part of my javascipt code was taken from a youtube video found here.
-
I was helped a lot from the community at stackoverflow.com where i was able to find answers to problems i came across during the coding of this project.