Introduction
For this project, you will create the game Rock Paper Scissors. This game will be played entirely in the console.
Problem solving approach
Since this is the first JavaScript project being built from scratch, it’s important to remember the wise words from the Problem Solving lesson. For each step in this project, be sure to do the following
- Plan or pseudocode your solution.
- Write the code.
- Test your code to make sure it works.
Assignment
Remember to commit early and often! To refresh your memory, check out the commit messages lesson.
Step 1: Setup the project structure
- Create a new Git repository for your project.
- Create a blank HTML document with a script tag.
- Check if JavaScript is linked correctly:
- Write
console.log("Hello World")
in JavaScript. - Check if “Hello World” is logged in the browser console once you open your webpage.
- Write
It’s best practice to link to an external JavaScript file inside this script tag. Using an external JavaScript file keeps your HTML file clean and organized.
You don’t have to write additional code in the HTML file. This game is played entirely via the console.
Step 2: Write the logic to get the computer choice
Your game will be played against the computer. You will write a function that randomly returns “rock”, “paper” or “scissors”.
- Create a new function named
getComputerChoice
. - Write the code so that
getComputerChoice
will randomlyreturn
one of the following string values: “rock”, “paper” or “scissors”.- Hint: The Math.random method returns a random number that’s greater than or equal to 0 and less than 1. Think about how you can use this to conditionally return one of the multiple choices.
- Note: Some learners might think that arrays are necessary for this problem, but they aren’t. If you’re unfamiliar with arrays, don’t worry - they’ll be covered later in the curriculum.
- Test that your function returns what you expect using
console.log
or the browser developer tools before advancing to the next step.
Step 3: Write the logic to get the human choice
Your game will be played by a human player. You will write a function that takes the user choice and returns it.
- Create a new function named
getHumanChoice
. - Write the code so that
getHumanChoice
will return one of the valid choices depending on what the user inputs.- Hint: Use the prompt method to get the user’s input.
- Test what your function returns by using
console.log
.
Step 4: Declare the players score variables
Your game will keep track of the players score. You will write variables to keep track of the players score.
- Create two new variables named
humanScore
andcomputerScore
in the global scope. - Initialize those variables with the value of
0
.
Step 5: Write the logic to play a single round
Your game will be played round by round. You will write a function that takes the human and computer player choices as arguments, plays a single round, increments the round winner’s score and logs a winner announcement.
- Create a new function named
playRound
. - Define two parameters for
playRound
:humanChoice
andcomputerChoice
. Use these two parameters to take the human and computer choices as arguments. - Make your function’s
humanChoice
parameter case-insensitive so that players can input “rock”, “ROCK”, “RocK”, or other variations. - Write the code for your
playRound
function toconsole.log
a string value representing the round winner, such as: “You lose! Paper beats Rock”. - Increment the
humanScore
orcomputerScore
variable based on the round winner.
Example code:
function playRound(humanChoice, computerChoice) {
// your code here!
}
const humanSelection = getHumanChoice();
const computerSelection = getComputerChoice();
playRound(humanSelection, computerSelection);
Step 6: Write the logic to play the entire game
Your game will play 5 rounds. You will write a function named playGame
that calls playRound
to play 5 rounds, keeps track of the scores and declares a winner at the end.
- Create a new function named
playGame
. - Move your
playRound
function and score variables so that they’re declared inside of the newplayGame
function - Play 5 rounds by calling
playRound
5 times.- Hint: When you assign a function call to a variable, the return value of that function is assigned to the variable. Accessing the variable afterward will only provide the assigned value; it doesn’t recall the function. You need to recall the choice functions to get new choices for each round.
- Re-work your previous functions or create more helper functions if necessary. Specifically, you may want to change the return values to something more useful.
- If you already know about loops, you can use them. If not, don’t worry! Loops will be covered in the next lesson.
When making interactive projects, like this one, you might be tempted to add more features, improve interactivity, user experience, design and styling of your website, and so on.
We recommend not doing that, and saving this effort for your portfolio projects.
For more information on learning mindset and portfolio pieces read Part 5 and Part 7 of Becoming a TOP Success Story