To start, you should define all the variables you need for the game, using descriptive names of your choosing:
Create two variables for the user’s score and the computer’s score, both with an initial value of 0.
Create an array for the computers choices of moves stored as strings: rock, paper and scissors
Create six variables for the DOM elements we need to keep track of. These elements don’t have any id attributes, so you will need to use query selectors. You can look at the HTML to work out the required selector structure. The elements are:
The form element, which has the dropdown for the users choice and a submit input.
The span element inside the div with a class name = ‘user-choice’
The span element inside the div with a class name = ‘computer-choice’
The p element inside the div with a class name= ‘message’
The span element inside the div with a class name = ‘user-score’
The span element inside the div with a class name = ‘computer-score’
Next, you will need to create an event listener for when the form is submitted. Inside a callback function which will run when the event happens, set up the following code:
A way to stop the default action of the form submission happening and trying to load another page. Not completing this step will cause your page to reload every time the submit button is clicked and break the functionality of your app.
Create a locally scoped variable which stores the value of the dropdown selection element (you can look at the HTML to see the name attribute of the input element). It will save either ‘rock’, ‘paper’ or ‘scissors’ as the value.
Call a function called playGame passing the variable you just created as an input paramater.
Now you need to define the playGame function. This is going to be a function which triggers a number of other functions:
Don’t forget to include the input parameter, which will use the value from step 4b.
Call a function called displayChoices, with two input parameters. The first paramater will be the same as the input parameter from the playGame function (steps 4b > 4c > 5a). The second parameter will be the variable for the user-choice span element that you set up in step 3b. This function is what will display the emoji on the screen for the user’s choice.
Set up a locally scoped variable to keep track of what the computer chooses. You can choose what the variable is called, but the value should call the function makeComputerChoice, with no input parameters.
Call the function displayChoices, again with two input parameters. This time, the first parameter will be the computers choice that you just set up a variable for in step 5c. The second parameter will be the computer-choice span element, using the variable created in step 3c.
Lastly, call a function by the name of handleWinner, passing in two input parameters: The user’s choice (step 5a), and the computer’s choice (step 5c).
Define the makeComputerChoice function, remembering that this function doesn’t need any input paramaters. Inside the function, it should do the following:
Create a locally scoped, temporary variable to store a randomly generated whole number from 0-2 (inclusive). You may need to read up on random numbersLinks to an external site..
Using the random number, select an element from the array of possible computer choices (step 2).
Return the string value (‘rock’, ‘paper’, or ‘scissors), which will populate the variable you set up in step 5c.
Define the displayChoices function, which needs to take in two parameters. Seeing as this is a function that is used for both the user and the computer, these input parameter names should be fairly generic. The first parameter will be the choice, as a string, with a value of either ‘rock’, ‘paper’, or ‘scissors’. The second parameter will be the HTML element to overwrite to visually display the choices. Inside the function:
Set up a local variable which is just an empty string for now.
Create a switch statement to check the choice that was passed in as the first input parameter:
If it’s ‘rock’, set the variable to 🪨
If it’s ‘paper’, set the variable to 📃
If it’s ‘scissors’, set the variable to ✂️
Set the text value of the HTML element (from the second input parameter) using the new variable with the emoji.
Finally, define the handleWinner function, which will take in two parameters, one for the user’s choice and one for the computer’s choice. Remember that these inputs are coming from the playGame function, so they are still text strings and not emojis. Inside the function:
Create a variable to keep track of the winner, it can be an empty string for now.
Write an if/else if/else conditional statement, to determine who the winner is. Consider how you could test multiple conditions in one statement, for example if the user chooses ‘rock’ and the computer chooses ‘scissors’.
If it is the computer, set the variable value to ‘computer’
If it is the user, set the variable value to ‘user’
If it is a tie, you can set the variable value to ‘tied’
Write an if/else if/else statement to evaluate the winner variable from step 8a.
If either the computer or the user win, display an appropriate message on the screen by setting the text content of the paragraph element defined as a variable in step 3d.
Also increment the appropriate score variable, depending on the who the winner was
Update the score on the UI with the newly incremented score value. You will need to set the text content of either the variable from step 3e or 3f, depending on the winner.
Lastly, if it is a tie, use the message paragraph to let the user know.
Test the functionality of your app by playing some games and making sure the emoji is displayed correctly based on the user input, and the conditions are all working. If the scores and messages all update appropriately, congratulations on making a working game of rock paper scissors!