We're going to make a simple implementation of grade-school classic "rock paper scissors". If you don't know what that is check the Wikipedia article or this ridiculous step-by-step. For the moment we're just going to play the game from the browser console, but we will revisit it and add a front end later so don't forget to keep the code on GitHub! You might notice some 'view in browser' links in the student solutions - this is coming in a later lesson. When you get there don't forget to come back and add your link!
-
Important note: you want to
return
the results of this function call, notconsole.log()
them. To test this function console.log the results:function playRound(playerSelection, computerSelection) { // your code here! } const playerSelection = 'rock' const computerSelection = computerPlay() console.log(playRound(playerSelection, computerSelection))
-
Write a NEW function called
game()
. Use the previous function inside of this one to play a 5 round game that keeps score and reports a winner or loser at the end.- You have not officially learned how to "loop" over code to repeat function calls... if you already know about loops from somewhere else (or if you feel like doing some more learning) feel free to use them. If not, don't worry! Just call your
playRound
function 5 times in a row. Loops are covered in the next lesson. - At this point you should be using
console.log()
to display the results of each round and the winner at the end. - Use
prompt()
to get input from the user. Read the docs here if you need to. - Feel free to re-work your previous functions if you need to. Specifically, you might want to change the return value to something more useful.
- Feel free to create more "helper" functions if you think it would be useful.
- You have not officially learned how to "loop" over code to repeat function calls... if you already know about loops from somewhere else (or if you feel like doing some more learning) feel free to use them. If not, don't worry! Just call your
Go back to your “Rock Paper Scissors” game from a previous lesson and give it a simple UI so that the player can play the game by clicking on buttons rather than typing their answer in a prompt.
-
Copy your original code into a new file so you don’t lose it.
- Stored in the "console" branch of this project
-
For now, remove the logic that plays exactly five rounds.
-
Create three buttons, one for each selection. Add an event listener to the buttons that calls your
playRound
function with the correctplayerSelection
every time a button is clicked. (you can keep the console.logs for this step) -
Add a
div
for displaying results and change all of yourconsole.logs
into DOM methods. -
Display the running score, and announce a winner of the game once one player reaches 5 points.
-
You will likely have to refactor (rework/rewrite) your original code to make it work for this. That’s OK! Reworking old code is an important part of the programmer’s life.
-
Don’t forget to go back and add your new version to the original Rock Paper Scissors Project!