Rock, Paper, or Scissors - This game has been played for ages its fantastic that we can have it digitalised. Mostly it's played with two people but with this game, it will be Player vs Computer. How it works is Rock always beats Scissors, Scissors always beat Paper, and Paper always beat Rock. A straightforward game in which you do not need a lot of practice. With this project, I practiced Javascript including also my HTML and CSS skills.
Link to the website : "https://sammy92dec.github.io/the-gamerps/"
This game can be played in different devices.A simple page easy to manage. It will be Player against Computer.I used "ami.responsivedesign.is" to show how the frontpage would look.
Rock Paper Scissors is a game to play for fun. The choice is made randomly,so you win if you are only lucky.
- Understand the purpose of this website quickly and easily.
- Easily navigate the website.
- Play a game for fun.
- Get an understanding the Rock, Paper, Scissors game.
The focus was on making the design a fun, user-friendly and creative site.
For the purpose to show my knowledge in JavaScript, by creating a popular games.
I aimed for a simple website that should contain as little clicks as possible.It have few coding compared with my first project.Adding mouse lisner to make it reponsive.
The website is this designed as it it looks simple and clear.For the wireframe I used pen and paper to help me with my planning.It doesn't look like the sketch but evolved to how it looks now.
The background color is purple and the buttons are red, green, and orchid.The purpose was to make it look fun and happy color.For the color scheme those are the colors that stand out but I have orchid for my scissor button.I used "http://colormind.io/image/" for my color palette.
- HTML - To create a basic site
- CSS - To create the pages beauty with colors and some edits on the header texts and the aligmennt of the whole page
- JavaScript - to handle all the mechanics and make it reponsive.
Rock Paper Scissors is a game with only one page.
- Header with the title of the game. Background color blends in well with the rest of the page.
- Game area is with two parts the score area and three icons to choose from when playing the game.
To have score history with Players names.
For the accessibility this was used:
- Semantic HTML.
- Alt attributes on images
- Sufficient colour contrast.
In contrast to the first project. I continuously tested the code along to with coding to make sure everything is ok.I started my coding with Replit as I had issue with Codeanywhere at the beginning. After validating HTML one error was marked.It was just a closing div and solved it just my removing it. I used "https://validator.w3.org/nu/#textarea" to validate HTML.
The CSS Validator gave me two errors. I had added a code to have a shadow to the game-area but it came wrong on the CSS validator though it was nice on the game I had to remove it. I used "https://jigsaw.w3.org/css-validator/" to validate CSS.
I also used Lighthouse in Chrome to find ways to increase the accessibility of the website.
For Javascript validation I used "https://jshint.com/".I got 15 warnings.But I had to only correct the last function "Checkwinner" I forgot semi-colon.But the rest just came up as warning.
To add I've been using the Inspect view in Google Crome using different layout for different devices and a lot with the responsive layout. I used "https://www.freeformatter.com/html-formatter".html#before-output" to orgnaize my HTML coding.
I didn't find any bugs to solve it was a smooth project.
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.
- Inspiration was from Code-institue Project idea.
- Check alot of youtube videos when I was going but more credit goes to Bro-Code "https://www.youtube.com/watch?v=n1_vHArDBRA"
- Used some of the ideas from I Love Math videos for my control buttons
Written by Samrawit Tekheste
-
For the logo in the page and the controls I used icons from "https://www.flaticon.com/"
-
I used "https://www.favicon.cc/" to shrink the logo to use it in the tab.
-
As for the rest of the media i added the links before the picture or right after.
Thanks to my mentor to help me finish this project with excitment.
- Martina Terlevic, my Code institute mentor.