You can view the live site here

Rock Paper Scissors Lizard Spock is an extension of the classic game of chance, Rock Paper Scissors, created by Sam Kass and Karen Bryla. Sam Kass explains he created the expanded game because it seemed like most games of Rock Paper Scissors with people you know would end in a tie.

View further details here

The goal of this project was to make a simple game that would help players learn the rules of the additional lizard spock components in a fun and playful way.

The user goals of this website are:

• To learn how to play Rock Paper Scissors Lizard Spock.
• To practice their skills and understand the additional choices and combinations that lizard and Spock bring to the traditional game.
• To have fun whilst learning something new.

This game is targeted towards both children and adults. The simple clean interface appeals to all ages.

1. As a new user I want to play Rock Paper Scissors Lizard Spock.
2. As a new user I want to understand the rules of the game.
3. As a new user I want to be able to tell if I am winning or losing against the computer.
4. As a new user I want to be able to tell what option the computer chose against me.
5. As a new user I want to be able to reset the overall game at any point to start again.
6. As a new user I want to be able to see if I have won or lost the overall game against the computer.

You can view the wire frame here

The colour scheme takes inspiration from traditional marvel comic book covers and is meant to evoke feelings of fun and playfulness.

Bangers is a comic book style font which packs a punch! It is designed in the style of mid-20th century superhero comics cover lettering. The font was chosen to add a playful and fun feel to the game.

The rules button in the top left corner of the screen allows the user to quickly access the rules of the game. If there is a need to reset the game at any point before either player reaches a score of 5 this can be done in the top right of the screen via the reset button.

The player score is prominent clear and easy for the user to understand if they are winning or losing in the game. The "First to 5 Wins the Game" message explains how the game is won and is replaced with a win, draw or lose message including a message explaining which choice won.

This section visually displays the user choice image and the computer choice image based on their selection.

The game options are displayed at the bottom of the screen and allow the user to select an option. This kicks off the game functionality.

This modal displays the rules of the game and is available to click at any time during an ongoing game.

The winner modal is displayed when the user is the first to score 5 points. The play again button refreshes the game and resets the scores to 0. The modal can only close by hitting the play again button.

The loser modal is displayed when the computer is the first to score 5 points. The play again button refreshes the game and resets the scores to 0. The modal can only close by hitting the play again button.

You can view the testing file here

The project was deployed to GitHub pages using the following steps:

1. Once logged in to GitHub, navigate to the site's repository.
2. Under repository name , click Settings.
3. In the left sidebar, click Pages on the left-hand menu.
4. Under "Source", select the Main Branch and hit Save.
5. To see your published site, under GitHub Pages, click the site's URL.

In order to make a local copy of this application, you can clone it by typing the following command in your IDE Terminal:

• git clone https://github.com/r3b3l-dev/paper-scissors-rock-lizard-spock.git

Alternatively, if using Gitpod, you can click here to start a new Gitpod workspace on your account.

HTML5 - Used for the main context of the site and layout.

CSS3 - Used for the styles of the site.

JavaScript - Used for the main interaction with the DOM.

Bootstrap v5.0.2 - Used for better responsiveness and layout.

Gitpod - Used for development as the cloud-based IDE.

GitHub - Used for securing my code online.

Git - Used for version control (git add, git commit, git push)

GitHub Issues - Used to track any issues internally to my repository.

Favicon - Used to generate the favicon.

Balsamiq - Used to create my wireframes.

ResizeImage.net - Used to resize my images online.

Google Fonts - Used for typography on the site.

Font Awesome - Used for icons on the site.

Am I Responsive - Used to generate the responsive image at the top of the README.

Site Palette - Used to generate the README site palette.

• Main Background Image from Shutterstock

• Player Selection Icons from PNGEGG

• Computer Selection Icons from PNGEGG

• CSS Framework and Modals Bootstrap

• CSS & HTML W3Schools

• External references for specific code is included in comments. These are from StackOverflow

The content of this website is for educational purposes only and not intended for commercial use.