RPSLS is a game targeted towards people that are interested in playing a challenging game of rock, paper, scissors. It has extra hand gestures for lizard and spock that lowers the chance of getting a draw which would typically happen when playing the regular version of the game.
The live link can be found here - https://awoyalejohn.github.io/RPSLS/
- The Header
- Featured at the top of the page.
- Has a hyper link to the homepage.
- Users can use it as another way to reset the page.
- The header has a blue background colour.
- The logo is white with a game controller icon beside it which contrasts well with the blue background.
- Font style used for the website title text is Catamaran.
- The controls area
- Featured below the header.
- The controls area gives access to the how to play button, restart button and music button.
- When the user clicks on the how to play button a modal will pop up and give a brief explanation of how you play the game. The modal can be closed by clicking anywhere on the screen.
- The restart button clears all the values on the page and starts the game again.
- The logo is white with a game controller icon next beside which contrasts well with the blue background.
- The music button plays the audio file put inside the game.
- The game area
- Featured below the controls area.
- This shows the area where the hand gestures will display when one of them is clicked on to.
- The box on the left shows the players choices and the box on the right shows the computers choices.
- The round area
- Featured below the game area.
- This tracks the rounds that pass.
- The score area
- Featured below the roundarea.
- This keeps track of the wins, losses, and draws that occur every round.
- The hand gesture area
- Featured below the score.
- This is where they will select their choice button when going against the computer.
- The buttons have an orange hover effect when the mouse hovers over it.
- This makes it easier for users to pick the choice that they want.
- The footer area
- Featured below hand gesture area.
- Shows the social media icons for Twitter, Facebook, Instagram and Youtube.
- Each social media button has a link that will open a new tab when clicked.
- The copyright info is also at the very bottom of the site.
- The modals
- A group of seven modals that will pop up depending on the condition.
- The how to modal shows how to play the game and can be closed by clicking the x button or on background.
- Round win modal displays whenever the player wins a round.
- Round lose modal displays whenever the player wins a round.
- Round draw modal displays whenever the player wins a round.
- Game win modal displays the player won the game if the player wins 5 rounds.
- Gamelose modal displays the player lost the game if player loses 5 rounds.
- Game draw modal displays whenever the player draws in 5 rounds.
- I tested that the game works in different browsers: Chrome, Firefox, and Opera.
- I confirmed that all buttons worked with the intended result when clicked.
- I confirmed that the gameover modal would show after 5 points to win, draw, or lose.
- I confirmed that the header, How to Play, Restart Game and music options, results and footer icons are readable and easy to understand.
- I confirmed that the game is responsive, looks good and functions on all standard screen sizes using devtools device toolbar.
-
When I added a way for the hand gestures to display inside of the boxes when a hand gesture button was clicked. The hand gestures would stack on top of each other after every new hand gesture button click. I fixed this by adding a function the would check if there was already a hand gestuer inside the box then stop it from displaying by changing that hand gesture to hidden before the new hand gesture would display.
-
I had a bug where some hand gestures would display outside of the computer hand gesture box when the website was being viewed on larger screens. I fixed this by adding more media queries to postion the hand gesture better inside the computer hand gesture box.
- HTML
- No errors were returned when passing through the official W3C Validator.
- CSS
- No errors were found when passing through the oficial (Jigsaw) validator.
- JS
- No errors were present when passing through the javascript validator.
- Accessibility
- I confirmed that the colours and fonts chosen are easy to read and accessible by running the website through the lighthouse in devtools. I also used the the Adobe color contrast checker to test if the colour scheme was accessible.
No unfixed bugs
- The website was deployed to GitHub pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the settings tab
- From the sources section drop-down menu, select the Main Branch
- Once the Main branch has been selected, the page will provide a link to the completed website
The live link can be found here - https://awoyalejohn.github.io/RPSLS/
- The code used to hide the images of the hand gestures came from w3schools
- The code used to target elements with the same class was taken from Pretag
- The code used to display an element that was hidden was taken from w3schools
- The code used to randomise computer choices was taken from an answer on Stackoverflow
- Update score function code was taking from the love maths tutorial
- The code used to check if an elemrnt in CSS was set to displaywas taken from Stackoverflow
- Code used to make the modals was taken from W3schools
- The code used to add audio was taken from MDN Web Docs
- The code used to pause and play audio with javascript from taken from an answer on Stackoveflow
- The code for the Social Media buttons came from love running tutorial
- DOMcontent loaded event listener code for all buttons I got from love maths tutorial
- The do nothing code came from Stackoveflow
- The code used for the emojis is from W3schools
- The code used to updates scores was from the love maths tutorial
- The images for the hand gestures came from font awesome
- The audio I used for the music button is from my brother’s soundcloud