Rock, Paper, Scissors is a common beginners project. Here we would complete the project as assigned in `The Odin Project`.
Get Computer Choice
First, we create a function to get the computer's choice. I used the Math.random function to generate a random value. Math.random returns a value greater than or equal to 0 but less than 1.
If the function returns a value less than or equal to 0.3, it will return “rock.” If the numerical value is greater than 0.3 but less than or equal to 0.6, it will return “paper.” If the value is greater than 0.6, it will return “scissors.”
function getComputerChoice() {
num = Math.random()
if (num <=0.3) {
return 'rock'
}
else if (num<=0.6) {
return 'paper'
}
else {
return 'scissors'
}
}
Get Human Choice
Next, we ask for the user's input. The user will be prompted to enter their choice, and for this, I used the JavaScript function prompt(). The user's choice is then stored in a variable.
Using prompt(), we can display a dialog box that asks the user to enter either "rock", "paper", or "scissors". The returned value is converted to lowercase using the JavaScript function toLowerCase() to ensure consistent casing.
function getHumanChoice() {
choice = prompt('Your choice(rock,paper,scissors)?').toLowerCase()
return choice
}
Play Round Function and Declare Score Variables
Before creating the function to play a round, we need to declare two variables: `humanScore` and `computerScore`, and set them equal to 0. These variables will keep track of the score and will be updated after each round.
let humanScore = 0;
let computerScore = 0;
Next, we create a function called `playRound`. This function will take two parameters: `humanChoice` and `computerChoice`. It will determine the winner for the round and increment either the `humanScore` or `computerScore` variables depending on who wins. If it’s a tie, the scores remain unchanged.
function playRound(humanChoice, computerChoice) {
console.log(`Computer chose ${computerChoice} while you chose ${humanChoice}`)
if (
(humanChoice === 'rock' && computerChoice === 'scissors') ||
(humanChoice === 'scissors' && computerChoice === 'paper') ||
(humanChoice === 'paper' && computerChoice === 'rock')
) {
console.log(`You win! ${humanChoice} beats ${computerChoice}`)
humanScore = humanScore + 1
}
else if (humanChoice === computerChoice) {
console.log(`It's a tie! Both chose ${humanChoice}`)
}
else {
console.log(`You lose! ${computerChoice} beats ${humanChoice}`)
computerScore = computerScore + 1
}
}
In this function:
- We log the choices made by the computer and the human.
- We check if the human wins using a series of conditions.
- If the human wins, we increment `humanScore` and log the win.
- If it’s a tie, we log the tie without changing the scores.
- If the computer wins, we increment `computerScore` and log the loss.
By keeping track of the scores and updating them accordingly, we can maintain a running tally of who is winning as the game progresses.
play game and declare winner
Lastly, we will create two more functions: `playGame` and `declareWinner`. We will also introduce a new variable `round` and set it to 0.
The `playGame` function will call the `playRound` function five times and keep track of the score. After five rounds, it will call the `declareWinner` function to determine and output the winner based on who has the highest score. If fewer than five rounds have been played, it will call itself recursively and increment the `round` variable by 1.
function declareWinner() {
if (humanScore > computerScore) {
console.log(`You win!`)
}
else if (computerScore > humanScore) {
console.log(`Computer wins!`)
}
}
function playGame() {
humanChoice = getHumanChoice()
computerChoice = getComputerChoice()
playRound(humanChoice, computerChoice)
console.log(`Your score: ${humanScore}`)
console.log(`Computer score: ${computerScore}`)
if (round >= 5) {
declareWinner()
}
else {
round = round + 1
console.log(`Round Number: ${round}`)
playGame()
}
}
Explanation
1. play Game Function
- This function checks if fewer than five rounds have been played.
- If so, it calls `getHumanChoice` and `getComputerChoice` to get the choices for the round.
- It then calls `playRound` to play the round and increments the `round` variable by 1.
- The function calls itself recursively to continue the game until five rounds have been played.
- Once five rounds have been played, it calls the `declareWinner` function.
2. declare Winner Function
- This function outputs the final scores.
- It compares `humanScore` and `computerScore` to determine the winner.
- It logs a message declaring the winner or indicating a tie.
Complete Game Flow
- Get Computer Choice: Generates a random choice for the computer.
- Get Human Choice: Prompts the user to enter their choice.
- Play Round: Plays a single round and updates the scores.
- Play Game: Manages the game flow, playing five rounds in total.
- Declare Winner: Declares the winner based on the final scores.
By following this structure, we can ensure a smooth and interactive game experience. Here's the complete code:
function getComputerChoice() {
num = Math.random()
if (num <=0.3) {
return 'rock'
}
else if (num<=0.6) {
return 'paper'
}
else {
return 'scissors'
}
}
function getHumanChoice() {
choice = prompt('Your choice(rock,paper,scissors)?').toLowerCase()
return choice
}
let humanScore = 0
let computerScore = 0
let round = 1
function playRound(humanChoice, computerChoice) {
console.log(`Computer chose ${computerChoice} while you chose ${humanChoice}`)
if (
(humanChoice === 'rock' && computerChoice === 'scissors') ||
(humanChoice === 'scissors' && computerChoice === 'paper') ||
(humanChoice === 'paper' && computerChoice === 'rock')
) {
console.log(`You win! ${humanChoice} beats ${computerChoice}`)
humanScore = humanScore + 1
}
else if (humanChoice === computerChoice) {
console.log(`It's a tie! Both chose ${humanChoice}`)
}
else {
console.log(`You lose! ${computerChoice} beats ${humanChoice}`)
computerScore = computerScore + 1
}
}
function declareWinner() {
if (humanScore > computerScore) {
console.log(`You win!`)
}
else if (computerScore > humanScore) {
console.log(`Computer wins!`)
}
}
function playGame() {
humanChoice = getHumanChoice()
computerChoice = getComputerChoice()
playRound(humanChoice, computerChoice)
console.log(`Your score: ${humanScore}`)
console.log(`Computer score: ${computerScore}`)
if (round >= 5) {
declareWinner()
}
else {
round = round + 1
console.log(`Round Number: ${round}`)
playGame()
}
}
playGame()
