Rock, Paper, Scissors

Overview

This app is both a traditional game of Rock, Paper, Scissors as well as an alternative game with an exciting twist. The user simply selects the version they would like to play, and chooses their fighter. The computer randomly selects it's fighter and a win, loss or draw is displayed! The game then allows the user to select a new game and wins persist across all games. here.

How Does It Work?

1. The page loads and the user is presented with a Rock, Paper, Scissors header along with two game choices and the rules for each within their own containers. On the right and left of the page are full height columns displaying a player, and token as well as the computer. Each game choice, Classic or Spicy presents hover states to the user to define a clickable property.

2. Once a game type is selected, the user is presented with a fighter selection page. The left side of the page below player column now displays a change game and new game button with hover states. The fighter options are displayed in the middle of the page and the header now reads "Choose your fighter." The fighter icons each have hover states and when clicked display at the top a win, loss or draw. The outcome heading is displayed for 3 seconds before timing out and reverting to "Choose your figher". Score is cumulative in the computer and player columns as games are played.

3. When change game button is selected, the user is returned to the home screen to once again choose between a classic or spicy game play. The new game and change game buttons are hidden but the cumulative scores persist.

4. Clicking the new game button at any point resets the game and scores.

Contributors

• Turing School of Software & Design Front-End Student
  • Chad DeGange (https://github.com/cdegange)

Future Feature Additions

• Add animations to make the game more interactive.
• Leaderboard.
• Change game theme to something more user friendly.

Technologies Used

-HTML, CSS, Javascript

The spec for this project can be found here.

Installation Instructions

• Fork this project to your own Github account
• Clone the repository to your local machine
• cd into the project
• Run open index.html to see the app