Rock | Paper | Scissors

The Rock, Paper, Scissors game is a game played with a chance of winning against the computer. You are able to play as many times as you want as there is no score limit.

Users of this website will be able to find information on 3 different pages, a Home page, a Play page and Register page.

Features

• Navigation
  • The navigation links are below the main name of the website: Home, Play and Register. These link you to either the "PLAY" page where you can play the game. "Register" page links you to register your interest in other games. "Home" will link you to the home page.
  • The navigation options are in clear and easy to read font. It contrasts in colour with the blue backgrond and black text making it easy for the user to read.
  • The navigation clearly tells the user the name of the website, and gives the user the options to click and explore different pages of the site.

• The Header
  • At the top of the page, the header shows the name of the page (Rock, Paper, Scissors). This is centered in the middle of the page to be easy to read, and its the first thing you read as you see the page. It uses contrasting colours to stand out from the background color.
  • The header clear shows to the user this page is for Rock, Paper, Scissors.

• Home Page Content
  • The "Welcome to Rock, Paper, Scissors! Can you beat the Computer? If you can, press PLAY!" is the introduction to the page, welcoming the user to the page and asking if they can beat the computer, press the play button to Play. This question is great for the user as it asks them to do something, ie press the play button to start. It makes it clear on what they need to do.
  • The rules of the page are there for clear, easy to ready instructions of how the game works and what is included. This is important to the user as if they didnt know how to play rock, paper, scissors they can clearly see how to. This page has clear contrasting colours between the text and the background to make it easy to read on all devices.

• Play Page Content
  • The "Play" page has all the content on for the Rock, Paper, Scissors game. This includes a "Restart Game" button. Buttons for Rock, Paper and Scissors and then also the scores of the game below for each player.
  • The Restart button is there for once the player has had enough of the game and want to start again, this will reload the game to start from fresh. This is useful to the user as they have an easy access button to restart instead of reloading the page manually.
  • The three buttons to click for Rock, Paper and Scissors are in easy view for the user, when they are hovered over with a mouse they enlarge to show the user that you are on a specific choice. This is to show the user that they are clicking a certain button.
  • The scores for Computer and Player are below the game buttons. These stay in the same place at all times and count upwards as the game is played, depending on which player winds the hand each time. These are in a clear font with contrasting background to make it easy to read for the user. The user will benefit from this feature as they can then see what their score is to the computer and who is winning.
  • The icons that appear as you click the buttons to play are the winning and losing choices. If you win, your score will increase by 1, if the computer wins their score will increase by 1. If you lose, your Icon will have a lower opacity to highlight which player has won and lost. Lower opacity means you have lost that hand. This makes it easy and clear for the user to read what score they have got and also which choice they have entered.

• Register Page Content
  • The register page is there for the user the register their interest in other potential new games to play.
  • There are 2 enteries for the user, Name and Email address. These are in a clear text with contrasting background to stand out so the user can easily read the content.
  • If the name field isn't entered, the form will tell the user a name needs to be entered. The same as email address, if a valid email address is not entered, it will tell the user the enter a valid email address. This is really useful to the user as it will stop them from submitting the form without the correct information being filled in first.

• Social Media Link
  • The social media link at the bottom of all pages is to link to my personal Linkedin Page, this link will also open to seperate browser or on mobile device it will take you to the application on your device. This is useful to the user if they want to follow or connect with the creator of the game.

Testing

• I have tested the game on multiple different browsers including Google, Firefox and Safari. It has also been tested on mutliple different devices for responsiveness including an Iphone 12 Pro Max and a Ipad Pro 12.9inch.

• I confirm this project is responsive, looks clear to the user and functions on all standard screen sizes using the devtools device bar on Google Chrome.

• I confirm the navigation, header, home page, play page, register page and the social media links are all readable and clear to see and easy to understand.

• I can confirm the register form works, it requires an entry in each field and will not let you submit the form without correct entries being entered into the form. It will kick back to the user if it is not entereted correctly and prompt the user what they need to enter.

Manual Testing

• I can confirm by manual testing the game, it runs smooth on desktop and mobile devices. I have tested the game by playing the game and resetting the game to start from scratch. I have also tested the register form and it promts the user to enter field correctly, if not it will not let you submit the form.

Bugs

• The bug I came across in Javascript was when creating the form functions, Javascript was not reading the code that was written. I seeked support from CI Tutors and I resolved the bug by creating a seperate Javascript file just for the form page, which then fixed this bug.

Validator Testing

• HTML
  • No errors were found when passing through the offical W3C HTML Validator
• CSS
  • No errors were found when passing through the offical W3C CSS Validator
• Javascript
  • No errors were found when passing through the official JSHINT Validator

Deployment

• The site was deployed to GitHub pages. The steps to deploy the site are:
  • In the GitHub repository, go to the Settings tab
  • From the source section drop down menu, select Main Branch
  • Once the main branch has been selected, the page will provide the link to the completed website.

The live link can be found here Rock | Paper | Scissors

Credits

Content

• I have used some basic HTML strcutre code and CSS from the Love Maths Project
• The code to create some of the Javascript, CSS and HTML content was taken from this Youtube Video for the register form for users.
• The code to clear the form once a user has submitted the form was taken from this Blog
• I had have tutor support on CSS Media queries.
• I used this video to get the If statements and functions for the gameYoutube Video
• The code to reload the game page if the user wants to start again was taken from Quackit

Media

• Icons used where taken from Font Awesome
• Fonts used where taken from Google Fonts
• Images used where taken from vecteezy
• Icons for the game where taken from Emojipedia: Rock, Paper, Scissors.