Fun classic game of rock paper scissors
The game is a basic game of Rock paper scissors in which the icons will glow either green, red or blue depending if you win lose or draw with the computer. First to reach 5 points wins. If the user wins they can enter in their email to recieve their scores via email. Have fun!
The theme involves blue/green/grey colours which create a war-like theme as there is a battle between the user and the computer. Additionally the colour scheme was inspired by battleships which have blue/green/grey colour schemes.
For the title I used grey as it matches with blue and it can be contrasted against so it can be easier to notice by the visually impaired. This should have positive impact on the accessibility score.
each button is made fron the font awesome icons. When one of the 3 options are clicked the border of the icons would turn green when you beat the computer red if you lose or blue if you draw with the computer.
This will allow it to be more convinient with individuals who perhaps have dyslexia or any other problems with reading.
Additionally there is text displayed when the user wins, draws or loses and the fact that what they chose beats the computers choice.
Shows that the user has won the round and scored a point as a result.
Shows that the user has lost the round against the computer therefore the computer will get a point
The purple glow indicates that that there is a draw between the user and the computer.
When the user wins the game a form will appear which allows the user to enter in their email and receive their scores via email.
I added this feature as it allows the user to keep track of their scores as they play or if they want to show their friends.
-I added some captions one of them comparing the users and computers choice and who wins e.g."Rock overpowerd paper, you win". I added this feature as some may not know which options overpower each other (those new to playing).
-Secondly, When you win or lose, a caption is displayed which shows how many rounds it took to win/lose against your opponent.
-I found it easy to get around the website.
-I liked the idea of the icons glowing different colours depending if i won lost or had a draw.
-The game is mobile friendly as the icons and scoreboard adapt to my screen. Instead of scattering around the page the icons are one on top of the other.
-When playing the game I noticed that when I won a box appeared asking me to enter in my email. I got sent an email showing me my scores.
-Moreover, when I won, It showed me how many rounds it took to beat the computer which I found really helpful, it motivates me to try and get a better score in the future.
-When I win/lose the scores reset so that I can play again. Additionally there is a caption which allows me to know why I won or lost.
- I played the game on my laptop in which the icons were of a decent size the game was responsive
-Whilst playing I like how everything is easy to tell the difference between the icons. Its very easy to navigate around as the colours are contrasting. So the game can be played by more people.
- I played the game on a tablet one of the icons was a little out of place but this did not get in the way when playing the game. Moreover when I tried to play the game on different browsers the game was exactly the same across all of the browsers.
The game seemed to be working the same way throughout the browsers Microsoft Edge, Mozilla Firefox and Google Chrome. The email text was working and lead to the scores of the user and computer to be sent to their email.
The website was working the same across Microsoft edge, firefox and google chrome. The website has contrasting-colours so it is easier for users to read the information.
The form is validated the submit button leads to the opening of the code institute 'congratulations' page. Moreover, if the user misses out on a field the form cannot be submitted and the user will be told to complete the field they missed out on for their form to be submitted.
-Initially, my HTML included a lot of problems which I had to fix one by one a lot of the issues being to do with stray tags.
- HTML validator showed no errors but 2 warnings about including type in script tags
- For CSS there were no errors or warnings.
- For JS there were a lot of warnings regarding missing semicolons which were corrected, but no sufficient problems.
- My code obtained a high accessibility score of 97% and a overall score of 95% suggesting that users will find it easy to play the game.
-One bug involved the buttons of the website not responding once they were clicked which was resolved by removing a misplaced semicolon.
-The combinations of the options included in the switch-case were the wrong way around causing the user and computer scores to be interpreted incorrectly.
-One of the buttons move slightly out of place when the screen is set to tablet format. But at times this problem does not show up.
1.Got to settings in Github repository.
2.Select main-branch from the source drop-down menu.
3.Once selected code for the website should be provided.
- HTML
- CSS
- Javascript
Am I Responsive https://ui.dev/amiresponsive - Used to verify responsiveness of website on different devices.
Responsinator - http://www.responsinator.com/ Used to verify the responsiveness of the website on different devices.
YouTube video - https://www.youtube.com/watch?v=jaVNP3nIAv0&ab_channel=freeCodeCamp.org Gave me an insight on how I can make my own version of this game some of my code was inspired by this video
Chrome Developer Tools - Used for changing details and testing responsiveness accessed by pressing f12.
Font Awesome - https://fontawesome.com/ Hand icons for the rock paper scissors icons.
Google Fonts - https://fonts.google.com/ Used to import fonts on the website.
Responsinator - http://www.responsinator.com/ Used to verify the responsiveness of the website on different devices.