Rock, Paper Scissors is an online game to try your luck! Choose one of the 3 options and play against the computer. This very famous and popular game is brought to the computer for a more fair and exact result with no cheating possible. Have fun with friends and family, or be adventurous and make life-changing decisions.
Users of this game will be able to make decisions based on intuition and then have their luck proved by the computer`s random choice. try it out!
The live website on Github pages can be accessed at the following link:
The header contains the title of the webpage and says exactly what the game is about. Rock, Paper, Scissors is written in a simple, clear, and fun typography. The title is centered in the middle of the webpage as the only element on it.
This section has the 3 options to choose from. The instructions are clear on what to do and how to play. 3 buttons are displaying the 3 options from which to choose. These, are interactive and can be clicked with the player's choice, for the computer to generate a random choice too.
In this feature of the webpage, when opening or refreshing the page, the main image of the game appears. A group of 3 hand-drawn hands, in a very simple style, make the gestures of the 3 options of the game.
When one of the buttons, is clicked by the player, first, the image of their selection updates to the hand that represents their choice.
Automatically, a Javascript code runs to generate a random choice by the computer and selects the other image accordingly.
The winner is announced in the middle of the page, right under the buttons. the text is updated to 'You Won',' Computer Won!, Try again!', or 'It's a Draw!'.
The footer of the webpage is positioned at the bottom of the webpage. In it, you can find the rules, again, with the same legible typography.
You can also find the two links that click to my webpage and my GitHub profile. Both links are clickable and open on a new webpage.
In the future, I would like to implement an audio track for the webpage and a chosen amount of times a player needs to win for the game to start all over.
- This game was tested on Android and iPhone mobile devices, as well as tested in Chrome and Firefox.
- I confirm that, by playing with it, the scores are always correctly counted and added to the scores of each, player and the computer.
- I tested the adaptability of the header, game area, and footer are always responsive.
- I tested the fonts, colors, and features are easy to read and access thanks to the Lighthouse tool in DevTools.
- HTML Before final deployment, no errors were returned when passing through the offical W3C Validator
- CSS Before final deployment, no errors were found when passing through the official W3C Jigsaw CSS Validator
- Javascript The javascript code was run through jshint to check for any errors.
Throughout this module I encountered many difficulties with the learning material, the time I invested in it, and extensive Google searching. instead of stating one by one the bugs y fixed, I will be very descriptive with the sources I used. I hope I did not miss too many links.
- This site was deployed using Github pages, the steps i followed are the following:
- Inside my github repository, i navigated to Settings tab.
- I went to the pages section, and changed the branch name from "none" to main" and saved the changes.
- Then github created my url repository succesfully, and provided me the link to it.
- Creator: Fercha pombo @ferchapombo
- Link to Github : Github
Throughout the process of creating this game application, I went through different websites and forums that helped me with the CSS styling of my game, as well as with creating the functions of my Javascript. Special thanks to the community in Slack and to Vitor Barbosa_5P who helped me through the process of checking and updating my score.
Source code for function update score
Source code for function update score
Source code for function update score
Help with understanding inner text
Help with css borders and margin