Rock Paper Scissors , Traditionally a Hand Game which is played by 2 people. This Game is often used by 2 persons to make a decision when there are conflicting opinions. Similar to flipping to coin , a decision can easily and quickly be decided. This website was created to allow user to have online access to the Rock Paper Scissors game. Access to the game can viewed here. Live Website Here.
- Rules of the Game
- User Goals
- User Expectations
- Features
- How the game is Played
- Testing
- Deployment
- Credits
The players count aloud to three, or speak the name of the game (e.g. "Rock! Paper! Scissors!"), either raising one hand in a fist and swinging it down with each syllable or holding it behind their back.
They then "throw" by extending it towards their opponent.
Variations include a version where players throw immediately on the third count (thus throwing on the count of "Scissors!"), or a version where they shake their hands three times before "throwing".
The main goal/purpose of this web app/game is to develop a game that allows a user to initiate a game of rock paper scissors against a computer.
The computer choice is random there for allowing the user to use this site as a decision making tool when there is a conflicting opinion between parties and the parties choose to use this game to make the end decision.
The Game is designed considering the expectation of users to be simple and easy to use and nagivate.
- The user interface is easy to navigate. Upon opening the page , there are clear instruction on how to play the game.
- The Game generates a random computer choice each time the user selects a button.
- The Game has a scoreboard which is clearly visible and easy to follow.
- The Game can be won or lost.
- The game can be restarted during playing or after the game is over.
- Responsive design for all screen/device sizes like mobile, tablet and desktop.
- Colour Scheme
The Background colour used is linear-gradient(135deg, #24C6DC ![Blue Colour](./read-me/blueREADME.png) , #514A9D ![Purple Colour](./read-me/purpleREADME.png)).
The Font colours used are also #24C6DC , #514A9D
, White and Black are also used.
A (Green) colour is applied to the background when the user wins.
A (Red) colour is applied to the background when the computer wins.
- Logo
The Logo is Located in the top left of the page. The Logo states the name of the game "Rock Paper Scissors".
The 2 main colours used in the logo are #24C6DC, #514A9D.
This also indicates to the user what the game being played is.
- The Main Game Area
The main game area consists of the User and Computer Score and the 3 game options (Rock, Paper, Scissors).
The 2 main colours #24C6DC, #514A9D are used in the user and computer score , and buttons.
- Game Rules
The Game Rules are displayed below the main game area. This explains how rock paper scissors is played and the objective which is first to score 5.
- Restart Button
During Playing, the user can restart the game by selecting the restart button.
In the future, I would like to add more detailed graphics to the game.
I would also like add the Lizard and Spock options to the game.
Finally, i would like to add a feedback form at the end of the game which would rate the users experience and allow a field for user comments.
The user starts be selecting one of the 3 options (Rock, Paper or Scissors).
Once the user selection is made, the JavaScript code generates a random option for the computer choice , compares the user and computer choice , and increments the score by 1 , depending on the winner.
A message appears under the buttons after each score which clearly states the user choice and computer choice , and a result messages
- Once the user or computer reaches a score of 5 , the game is over , a winning or loosing message is displayed onscreen, and there is an option to play again by selecting the play again button
- Testing was completed on the following browsers.
Google Chrome
Microsoft Edge
Firefox
Safari
I have also tested my site on multiple devices such as include:
Galaxy S5 (360 x 640)
iPad (768 x 1024)
iPhone 12
iPad Pro (1024 x 1366)
HP laptop (1980 x1080)
- Lighthouse in Dev Tools was run on this webpage to check accessibility and performance.
- HTML
No Errors found when passing HTML through the Official W3C Validator
- CSS
No Errors found when passing CSS through the Official Jigsaw Validator
- JavaScript
https://jshint.com/ was used to validate JavaScript Code. No Errors Found.
During Testing , I could not solve an issue regarding incrementing the user/computer score.
After Hours of Research I discovered that I was not using the ''parseInt'' function which converts a string into a number.
parseInt(document.getElementById("computer-score").innerText);
I discovered missing semicolon in several lines of javascript code which was solved after validation with Jshint.
There are no remaining unfixed bugs
Deployment of the site to GitHub Pages was done as follows:
- Login to my GitHub account
- Open the project repo
- Select the 'Settings' tab
- On the left-hand-side menu select the Pages option
- Select the main branch as the source, then click the Save button
- A message will confirm that the site has been published at https://YOUR-GITHUB-NAME.github.io/REPO-NAME/
- Test that the site has successfully gone live by clicking on the link
- HTML5 was used for the HTML site markup
- CSS3 was used to style the HTML content
- Am I Responsive was used to test the responsiveness of the site
- Font Awesome was used for the site icons / social icons
- Google Fonts provided the fonts used on the site
- Google Chrome Developer tools was used to test site responsiveness and to test code
- Github was used as the repository hosting service
- Gitpod was used as the Code Editor for the site
- Animate was used for the animation
- W3C Markup and Jigsaw validation were used to validate the HTML and CSS used
- Online JavaScript Validator was used for JavaScript validation.
- Background Colour Generator was used for Main Background Colour.
The Code used in this website was written by the developer. The Code institute , YouTube and W3 Schools were used a guides.
The Animation for the Navbar and Social links was take from Animate
The Main Logo was created using Logo Design