Rock , Paper or Scissors - This game has been played for ages its fantastic that we can have it digitailised.Mostly it's played with two people but with this game, it will be Player vs Computer. With this project ,I included HTML,CSS and Javascript language.
Live link:- https://sammy92dec.github.io/rspgame/
- Table of Contents
- Paper Rock Scissors Game
- 1. Project Overview
- 2. Features
- 3. Testing
- 4. Deployment
- 5. Credits
Live link:- https://sammy92dec.github.io/rspgame/
Paper, Rock, and Scissor is an interactive web app centered on allowing the user to pass the time by playing a fun game. The look, feel, and functionality will be explained in the following sections:
The project objective was to create an interactive and visually appealing web app, catering to those who enjoy video games, as well as games of chance.
- As a first time user I want an excellent visual experience.
- As a first time user I want to easily interact with website content.
- As a first time user I want to be able to ask for instructions of how te game is played.
- As a first time user I want to easily distinguish this site as a trusted site which is safe to use.
- As a returning user I would like to see regular game updates.
- As a returning user I would like to have a history of my gaming score.
- As a site owner I want to provide a fun and interactive gaming experience.
- As a site owner I want to have my site visually stand out.
To serve as a gaming website, a simplistic but functional design was needed. This combination served two primary purposes. The first purpose, simplicity, was used to maintain a pleasant look and aesthetic to cater to and appeal to users of varying age groups.
For the color scheme, those are the colors that stand out. I used "http://colormind.io/image/" for my color palette.
The website is two pages you can play on one page and read instructions if you press the instruction button it will take you to other page. This gives the user the ability to play the well-known Paper, Rock, and Scissors game if they are familiar with it.
The website was organized into five main sections, those being the logo, header, score area, result and control area and footer.
The logo is just on the top to make the page look nicer.
The header has instrutions and a button to reset the game and scores.
The result area is the choices displayed, by the player and computer. I chose texts and emojis to make the game simple.
The control area gives the user the opportunity to choose between rock, paper and scissors.
This area includes the players, computers score and the number of rounds.
The game score section has the following functionalities:
-
The game winner score count tally is incremented by 1 for every successful game won. A draw will result in no incrementation in user or computer score.
-
The rounds show how many games are played.
Its only 10 rounds.
The footer section contains only a copyright text.
This is an HTML page where it explains to the user how to play and how many rounds.
When there is time, I would like to add a player high score area, so that returning users are able to see their placement within all users who may have played the game on this website.
All documents were validated using W3C Jigsaw HTML validation service.No error was found.
Chrome development tools, as well as Firefox development tools were used to view the site's behavior for functionality.
To validate the site CSS, the site CSS file was uploaded to the W3C Jigsaw validation service. The first attempt indicated that there was an error in a class "text" that I wasn't even using. The way I fixed it is remove it.
JsHint version 2.13.6 was used to test the javascript for the site and did not return any major issues that needed to be addressed within this iteration of the game.
The Lighthouse performance app was used to test the website's performance.
Some bugs that were discovered and corrected throughout the development:
| Bug | Fix |
|---|---|
| Not being able to see if it's a win or lose. | It the emojis in front of the text.First I tried to use computerCamparison function but ad to fix the player botton as well. so the way it was fixed was by adding emojis in front the choices/buttons |
| The scores where not adding up | After fixing the result the scores came along too |
Github Pages was used to deploy the live website. The instructions to achieve this are below:
-
Log in (or sign up) to Github.
-
Find the repository for this project, rock-paper-scissors.
-
Click on the Settings link.
-
Click on the Pages link in the left hand side navigation bar.
-
In the Source section, choose main from the drop down select branch menu. Select Root from the drop down select folder menu.
-
Click Save. Your live Github Pages site is now deployed at the URL shown.
You may view the Github repository by clicking Here
- Eric Jones for sharing README text ideas. github :- https://github.com/ericjonesdev
- Ania Kubow for having alot of ideas to view. github :- https://github.com/kubowania/rock-paper-scissors-x3
- https://codebeautify.org/htmlviewer that helped me make my html organized.
- https://www.w3schools.com/ to check how and what choices to use most in my css.
- I used a free feature of https://www.grammarly.com/grammar-check to check the grammer errors in README.
Not alot of images were used with this games.I went with emojis to make it simple and quick to code. The images uploaded are screenshots from the actual game for the README texts.It was taken by me. No logo for the game.
Code was recreated from my old project and added new features that would make it more self-made project. github :- https://github.com/Sammy92dec/the-gamerps