Project: RPS
Purpose: This project involves creation of a web page that plays the Rock, Paper, Scissors game with the user.
Basic Features: Your web version of the game needs to have the following required features:
A proper title.
Buttons or a "select" list for the user to choose rock, paper, or scissors.
A "shoot" button.
Display of each of the following:
- What the user picked.
- What the computer picked.
- Who won
- Total score for the user.
- Total score for the computer.
The computer should choose randomly from the 3 choices of rock, paper, or scissors randomly and not cheat by using the user's selection to make the winning choice! Recall that we used the Math.random () function to get random numbers. You can use that to select a random choice for this game.
Planning Your Solution:
Build up your solution in steps:
- First, sketch out the collection of input and output text boxes you need, the buttons you need, etc. Then implement them in HTML. At this point, don't worry about any event handlers. Also, don't make the page super-fancy and colorful. That can come later.
- Then for each event handler you need (one each for the 4 buttons or list elements), write a function that does nothing more than show an alert saying which button was clicked.
- Next, think about what sort of information you need in order to run the game. There are several variables you will need to keep track of what is going on:
- User's pick
- Computer's pick
- Winner
- Total wins for Computer (initially 0)
- Total wins for User (initially 0)
Use var declarations inside the script tag to define these.
Now it is time to think about your strategy for keeping track of the user's selection of rock, paper, or scissors, and to make the computer's selection. You have created a variable to hold the user's choice. Each of the three selection buttons (rock, paper, and scissors) sets that variable. You'll have to decide what values to use for this variable. You might use numbers (for example, rock is 0, paper 1, and scissors 2), or strings (perhaps 'rock', 'paper, and 'scissors', or maybe just 'R', 'P', and 'S'). Modify the functions you wrote for each of the buttons for rock, paper, and scissors to set this variable.
The function that implements the event handler for the 'shoot' button has more work to do. First you need to make a random choice for the computer of rock, paper, or scissors. Do this by choosing a random number 0, 1, or 2 (recall the example in class that did something like this). If you used numbers to represent rock, paper, and scissors, you are done, otherwise you need a series of if statements to assign the appropriate string. In any case, you store the computer choice in a variable.
Temporarily, put an alert here showing the user's choice and the computer's choice. That will let you see that you have the values in your variables that you think are there. Now, continuing with the 'shoot' event handler, you need to compare the computer's choice with the user's choice. Create a variable to identify the result (computer wins, user wins, and tie). You'll need a series of if statements to do this.
With the winner determined, update the total wins for the computer or the user (or neither, in the case of a tie). Temporarily, put an alert here to show the values of these variables.
Finally, display your output to the user by updating the values in the boxes for winner, computer score, and user score. (If you want also to show the number of ties, go ahead!) When everything works, remove the alerts that were put in temporarily.
A Word about Coding Style:
Good style not only helps us read your code. It helps you figure out what you had in mind when you come back to your code after being away from it. Use variable names that suggest their purpose. Words do better in this regard than abbreviations (for example winComputer versus wc). The same concept applies to function names and to the IDs for elements of your HTML web page. Use good indentation so that it is easy to see what code in part of a loop, function, etc. The same indentation ideas apply to your HTML code.
Avoid repeated code. If you are writing basically the same code a second time with only minor changes, writing a single function that can be called from both places may be a better approach.
Added Features:
These features don't add functionality but make the page look better. Add them once the basic features Work:
- Neat placement of items on the page (alignment, centering, etc.).
- Use of color.
- A reset button to set the scores back to zero.
- Graphical images of rock, paper, and scissors
Extra Items beyond the Requirements:
Feel free to add more features beyond the "basic" and "added" ones.