Career Pivot into Development Journal, Day 2.1: Rock, Paper Scissors (cont.)

Next, let's tackle this subproblem:

If the user wins, alert the string ‘You Win!’
and add 1 point to the user
then return the current score of the user and the computer

If the computer wins, alert the string ‘Boohoo, you lost to the computer.’
and add 1 point to the user
then return the current score of the user and the computer

If the user and computer draw, alert the string ‘It’s a draw’

This subproblem can be broken down into further subproblems to simplify out task. Let's first solve If the user wins, alert the string ‘You Win!’, If the computer wins, alert the string ‘Boohoo, you lost to the computer.’, If the user and computer draw, alert the string ‘It’s a draw’.

Write a function that will play a single round of Rock Paper Scissors taking two parameters, playerSelection and computerSelection, and return a winner or loser.

let playRound = function (playerSelection, computerSelection) {
    if (playerSelection === computerSelection) {
        alert ('It\'s a draw!');
    } else if (playerSelection === 'rock' && computerSelection === 'paper') {
        alert ('Sorry, you lose! Paper beats rock.');
    } else if (playerSelection === 'rock' && computerSelection === 'scissors') {
        alert ('You win! Scissors beats rock.')
    } else if (playerSelection === 'paper' && computerSelection === 'rock') {
        alert ('You win! Paper beats rock.');
    } else if (playerSelection === 'paper' && computerSelection === 'scissors') {
        alert ('Sorry, you lose! Scissors beats paper');
    } else if (playerSelection === 'scissors' && computerSelection === 'paper') {
        alert ('You win! Scissors beats paper');
    } else if (playerSelection === 'scissors' && computerSelection === 'rock') {
        alert ('Sorry, you lose! Rock beats scissors');
    }
}

Now, we can move on to solving adding 1 point to the user when the user wins, and adding 1 point to the computer when the computer wins.

First, we must declare two variables that stores the respective scores:

let playerScore = 0;
let computerScore = 0;

We can then use += 1 to add 1 point to what playerScore or computerScore was previously equal to:

let playRound = function (playerSelection, computerSelection) {
    if (playerSelection === computerSelection) {
        alert ('It\'s a draw!');
    } else if (playerSelection === 'rock' && computerSelection === 'paper') {
        computerScore += 1;
        alert ('Sorry, you lose! Paper beats rock.');
    } else if (playerSelection === 'rock' && computerSelection === 'scissors') {
        playerScore += 1;
        alert ('You win! Scissors beats rock.')
    } else if (playerSelection === 'paper' && computerSelection === 'rock') {
        playerScore += 1;
        alert ('You win! Paper beats rock.');
    } else if (playerSelection === 'paper' && computerSelection === 'scissors') {
        computerScore += 1;
        alert ('Sorry, you lose! Scissors beats paper');
    } else if (playerSelection === 'scissors' && computerSelection === 'paper') {
        playerScore += 1;
        alert ('You win! Scissors beats paper');
    } else if (playerSelection === 'scissors' && computerSelection === 'rock') {
        computerScore += 1;
        alert ('Sorry, you lose! Rock beats scissors');
    }
}

Finally, return the playerScore and computerScore after 1 round:

let playRound = function (playerSelection, computerSelection) {
    if (playerSelection === computerSelection) {
        alert ('It\'s a draw!');
        return (`There is no change in score. Your score = ${playerScore}. Computer's score = ${computerScore}`);
    } else if (playerSelection === 'rock' && computerSelection === 'paper') {
        computerScore += 1;
        alert ('Sorry, you lose! Paper beats rock.');
        return (`Your score = ${playerScore}. Computer's score = ${computerScore}`);
    } else if (playerSelection === 'rock' && computerSelection === 'scissors') {
        playerScore += 1;
        alert ('You win! Scissors beats rock.')
        return (`Your score = ${playerScore}. Computer's score = ${computerScore}`);
    } else if (playerSelection === 'paper' && computerSelection === 'rock') {
        playerScore += 1;
        alert ('You win! Paper beats rock.');
        return (`Your score = ${playerScore}. Computer's score = ${computerScore}`);
    } else if (playerSelection === 'paper' && computerSelection === 'scissors') {
        computerScore += 1;
        alert ('Sorry, you lose! Scissors beats paper');
        return (`Your score = ${playerScore}. Computer's score = ${computerScore}`);
    } else if (playerSelection === 'scissors' && computerSelection === 'paper') {
        playerScore += 1;
        alert ('You win! Scissors beats paper');
        return (`Your score = ${playerScore}. Computer's score = ${computerScore}`);
    } else if (playerSelection === 'scissors' && computerSelection === 'rock') {
        computerScore += 1;
        alert ('Sorry, you lose! Rock beats scissors');
        return (`Your score = ${playerScore}. Computer's score = ${computerScore}`);
    }
}

Next, we'll tackle Loop for 5 rounds

This was provided by The Odin Project:

for (let i = 0; i < 5; i++) {
   // your code here!
}

Add in all the above code except for let playerScore = 0; and let computerScore = 0;. For the sake of keeping this post short, please view the solution on my GitHub repo.

Lastly, we'll announce the winner of the entire game by comparing the user and computer's final scores:

 (playerScore > computerScore) ? alert (`Congratulations, you beat the computer! Your score = ${playerScore}. Computer's score = ${computerScore}` ) : alert (`Boohoooooo, you lost to the computer. Your score = ${playerScore}. Computer's score = ${computerScore}. Refresh and try to win again!`);

and...we're done with my first ever Javascript project!

Phew, that was a little challenging but very rewarding. This is the beginning of many...

Live preview (make sure to open up console first before navigating to this link)
Code