Rock Paper Scissors Project

Overview:

In this unit, coders will create a Rock, Paper, Scissors game. The Rock, Paper, Scissors game will take user choice, generate a computer choice, and display the winner to the screen. To create this project, coders will use jQuery to take user input and display data, the Math Library to generate a random choice, and conditionals to determine the winner.

Day 1

Planning

• Complete the project planning document.

Set-Up

• Go to the repository at https://github.com/ScriptEdcurriculum/rockpaperscissors
• Fork this repository to your github account and clone to a new workspace
• Add, commit, and push your changes
• Make your site live on gh-pages

JavaScript

• Add a click handler that displays the value of the input within the div with the id #userChoice

HTML and CSS

• Add any more HTML elements you will need to the page
• Customize your HTML with CSS

Wrap

• Push your changes!
• Save and submit your website using the link on the Daily Session Document.

Day 2

Javascript

• Outside of your click handler, declare 3 variables (userChoice, computerChoice and winner) and assign them values of empty strings
• Outside of your click handler, declare a randomNumber variable and set it equal to 0
• In your click handler, generate a random number and assign it to the randomNumber variable
• In your click handler, store the input value in the userChoice variable
• In your click handler, display userChoice to the screen

Wrap

• Push your changes!

Day 3

JavaScript

• Write a conditional statement which, given the number range of randomNumber, assigns ‘rock’, ‘paper’ or ‘scissors’ to the computerChoice variable
• Display the computerChoice to the screen
• Write a conditional statement that compares the userChoice to the computerChoice to determine the winner of the game
• Display the winner to the screen in the result div
• Clear the input value once a result is displayed

Wrap

• Push your changes!

Projects Extensions:

• Style the page to fit your personality
• Validates input so that it will return “Not valid input” if the user types in a wrong choice.
• Accepts any form of a word regardless of capitalization (i.e. “Rock” “rock” roCk”)
• Keeps track of total wins and losses, until the page refreshes.
• Create a game with more variety in throwing options. Example: Rock-Paper-Scissors-Lizard-Spock

References/Tools

• Advanced Reference Table
• Script Tag
• How Jquery Works
• JQuery Events
• Math.random