wakey001/Rock Paper Scissors Lizard Spock

Rock, Paper, Scissors, Lizard, Spock. This game is for adults and children and is a fun, intuitive replayable game that is played against the computer.

Rock Paper Scissors Lizard Spock Game

Ux

User Goals

• The game should have relevant content
• The game should be easy to use on all platforms
• The game should be intuitive and look modern
• The game should be fun, exciting
• The game should work without fault or glitches

User Stories

• As a user I want the game to be easy to navigate
• As a user I want the game to have useful information
• As a user I want the game to be exciting
• As a user I want the game to be visually stimulating
• As a user I want the game to be current and modern in design

Site Owners Goals

• To have a working game that is fun to use
• The game should be easy and fun to use
• The code should be easy enough to read as to be potentially upgraded or extended to include other weapons such as Spock or lizard in the future

User Requirements And Expectations

Requirements

• Easy to play and understand who is winning
• Relevant quality content
• Clear rules in the footer
• Visually appealing

Expectations

• The user expects the game to be fun
• The user expects the game to entertain them
• The user expects the game to react smoothly with minimal lag
• The user expects the game to be visually appealing

How to Play

The user chooses to push one of the 5 buttons on-screen each button corresponds to a weapon. The computer also chooses a weapon. The winner is then determined and a point is given to the victor. The game ends when either player or computer gets to 15. The user can also choose to read the rules by clicking the rules button in the footer.

Design choices

Fonts

• Fonts for my website are from GOOGLE FONTS. I have decided to go with Simonetta as I feel in my opinion this is a modern and stylish and current feel and is easy to read. I also chose the same for my header as I feel this contrasts well with the main text as when larger its flair is even more noticeable in my opinion. I have also gone with Irish Grover
• I've gone with this as it's a bit wacky and out there and I wanted to give the game a cool-looking but readable font.

Icons

• Icons for my website are from FONT AWESOME LIBRARY.The icons I have chosen are : Rock Paper Scissors

• These fit with the game type as they provide a little fun whilst giving a visual cue whilst also making the site feel modern and for a young audience.

Colors

• This colour #52D1DC is for the main background colour.

• This colour #D7FFAB is for the user/player background weapon choice colour.

• This colour #654C4F is for the house/computer background weapon choice colour.

• This colour #F5A65B is for the background colour of the button rock.

• This colour #DFF2D8 is for the background colour of the button paper.

• This colour #CEC2FF is for the background colour of the button scissors.

• This colour #B49FCCis for the background colour of the header.

• To create the color scheme for the game, I used coolers I went to create palette colors until I found a color that I liked, locked it in, and kept going to get my color scheme.

• The image of these colors are from the site colorate

Wireframes

• To design the wireframes I have used balsamiq. These designs vary depending on screen size.

Mobile

• As can be seen when compared to the actual result the images were made into a column on each side to fit.

Tablet

• The images for the tablet were decreased in size as were some headings, but ultimately looks almost like the wireframe.

Desktop

• Again almost the same apart from an update with the scoreboard.

Features

Existing Features

Header

* Located at the top of the page it shows the game name Rock, Paper, Scissors, Lizard, Spock in a playful font which is used to make the user feel the game is not serious and to give a casual feel. 
* The title also tells the user what game they are playing.

The Game Choices

* The game includes clear instructions in the footer and a clear choice of buttons to push. These are rock, paper, scissors, lizard, Spock. These are interactive buttons that the user clicks. These have been styled to give a 3d effect when hovered over as well as the cursor transforming to a pointer. On mobile, only a 3d effect is in effect.

![Interactive Buttons](https://user-images.githubusercontent.com/83303996/151927052-429e8b6c-064d-42f2-9fbf-8c39d1228ca7.PNG)

The Game Results

* The winner is announced to the user under the interactive buttons.
* The score is updated for either the user or computer depending on who wins.
* The winner and scoreboard are clear for the user to understand.

 ![Scoreboard and Results](https://user-images.githubusercontent.com/83303996/139327289-2ed2c1da-ad25-4716-8e34-965e268a06dd.PNG)

Player and computer Images

* These have a standard image with a battle stance that is mirrored for the computer, this gives the game a playful but serious feel. These have now been deleted and lizard and Spock have been added, but also they did clutter the screen especially on smaller devices.
![Battle Area](https://user-images.githubusercontent.com/83303996/151927879-df8ae5ec-e68b-47fc-80ce-bb1703f6bfc5.PNG)

Footer

* Initially I decided to change my footer to a button, Rules. This now opens up an image of the various selections and shows what beats what rather than text with pipes as before.
Unfortunately, the image would not always load on every platform, so instead, I decided to insert a paragraph of text instead.
![Footer](https://user-images.githubusercontent.com/83303996/152237622-19ce020c-ae55-4f59-9986-b9867971d440.PNG)

Features To Be Implemented

* In the future Id like to add the Lizard Spock from the big bang theory.
* Id also like to add an end game feature which ends the game after either player or computer wins 5 or 10 games 
* I'd also potentially like to have a countdown with audio " 3.. 2.. 1.. Draw!", this would add more tension and excitement to the game.

Images

• My images are borrowed from google images.

Structure

• I will be building my website with a mobile-first approach. Using the Chrome developer tools to give me the iPhone 5/SE (320px), I will use this as the smallest screen size for styling.

Testing

After some feedback from my mentor and friends, I decided to implement the player and computer weapon image successfully. Another part of the game I felt I needed to implement is an endgame function, as this was also given as feedback. AS the game runs continuously. I decided to set a target of 15 and once reached by either player or computer the game prompts the user with an alert box and resets once ok is pressed. Some other feedback I had from an older user as they weren't familiar with the game or what to do. Although the individual is quite a computer literate for their age I realized they had a good point and instead of the rules being placed at the bottom I decided to have a button that toggles the rules once clicked with the added benefit of reducing the space taken up by the footer, especially on smaller devices.

I have checked my code in all 3 of the recommended validator services without issue. These are mentioned below in tools.

• My results from the lighthouse in dev tools are below. With no errors in my CSS or HTML when passed through the validators mentioned in the tools section.

Bugs

• Bug

  • An issue I came across was with my win() function being implemented. This function was to increment the score. The problem was the numbers on the scoreboard would say, NaN.

• Fix

  • Could not figure out the problem so turned to slack for help. This put me in the direction of looking at what the values of my variables were which turned out to be the main problem. I had not declared that the variable for playerScore and computerScore needed to be 0.

• Verdict

  • After the fix, I tested the game thoroughly to find It now works perfectly with the scoreboard working fluently.

Mobile device

• Bug

  • When on smaller devices under 350px , the div expands when scissors is chosen making one side lop-sided

• Fix

  • I decided the best option was to decrease the font size using a media query for screens under 350px. I targeted divs with h2 headings and played around with different sizes before settling at 70%.

• Verdict

  • After implementing the fix the mobile devices under 350px now display constant sizes reliably and do not increase or decrease the size of the div.

images

• Bug

  • When uploading my images of rock paper scissors. They load vertically by default and were both to the left of their div containers. This looked terrible so needed to be fixed.

• Fix

  • I fixed them in css using display:flex , flex-direction: column , and align-items: center .

• Verdict

  • This made them sit perfectly in the middle of their div container whilst still retaining the vertical image layout.

Unfixed Bugs

• When clicking on the icon within the button this does not give the user any feedback but the game still runs.

Technologies Used

Languages

• Html
• Css
• JavaScript

Libraries And Frameworks

• Font Awesome
• Google Fonts

Tools

• Git hub
• Git pod
• W3c Html Validation service
• W3c Css Validation service
• JSHint JavaScript Validator

Deployment

This project was deployed using Github using the following method:

1. After logging into github.com open repository
2. Click on settings then on the left find the pages section
3. Once on the page click on the master branch and then save
4. Now a link should appear and in a few moments be able to be clicked
5. This is now a live website that can be viewed from any device

To run it locally on Gitpod follow this method:

1. Assuming you have Gitpod as an add-on. Click on which repository you want to run.
2. Click on Gitpod this should then take a few moments
3. Once loaded find the terminal section and type python3 -m HTTP.server
4. This will open a port 8000, click yes to open
5. A new tab should appear with your work, although sometimes needs to be refreshed

Credits

Content-Media-Inspiration

• My inspiration was a mixture of a lot of games I have seen both online on youtube and on the forum slack.

Acknowledgements

• I'd like to firstly acknowledge my mentor Simen Daehlin, his guidance helped me structure the project to meet deadlines for our meetings which helped immensely. I'd also like to thank the community of slack who helped me with some issues I had with JavaScript.

Credits

• The layout I based my work on was code-institutes own HTML this gave me a good base to work on and I've gone on to modify and alter this to make the project my own.