DEV Community

TakDevelops
TakDevelops

Posted on

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’
Enter fullscreen mode Exit fullscreen mode

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');
    }
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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');
    }
}
Enter fullscreen mode Exit fullscreen mode

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}`);
    }
}
Enter fullscreen mode Exit fullscreen mode

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!
}
Enter fullscreen mode Exit fullscreen mode

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!`);
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

Read next

robinkiplangat profile image

Decomposition.

Robin Kiplangat -

borisgigovic profile image

Monoalphabetic and Polyalphabetic Ciphers in Cryptography

Boris Gigovic -

sharony profile image

Python Security Essentials for Your Apps

Sharon Yelenik -

szabgab profile image

Perl Weekly #669 - How Time Machine works

Gabor Szabo -