How do I get Javascript to track my score increments?

I am making a basic Rock Paper Scissors game and thought I was coding the score increments correctly, but the game keeps the scores at 0 each round.

I tried initializing the variables within the function as well as globally. I tried adding return in front of the variable increments. I tried with and without the return score statements shown at the end of the playRound() function. I understand that the game either isn’t modifying the variable and/or keeps deferring to the initial given value, I just can’t figure out why or what I need to do to get the variables to maintain the increments.

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Rock Paper Scissors</title>
</head>

<body>
    <script>
        const choices = ['Rock', 'Paper', 'Scissors'];
        let playerScore = 0;
        let compScore = 0;

        function computerPlay() {
            return choices[Math.floor(Math.random() * choices.length)];
        }

        function playRound(playerSelection, computerSelection, playerScore, compScore) {  
            computerSelection = computerPlay(); 
            playerSelection = prompt("Rock, Paper, or Scissors? ");

            if (playerSelection === 'Rock' && computerSelection === 'Scissors') {
                playerScore += 1;
                return "You win! Rock beats Scissors!";
            } else if (playerSelection === 'Scissors' && computerSelection === 'Paper') {
                playerScore += 1;
                return "You win! Scissors beats Paper!";
            } else if (playerSelection === 'Paper' && computerSelection === 'Rock') {
                playerScore += 1;
                return "You win! Paper beats Rock!";
            } else if (playerSelection === 'Scissors' && computerSelection === 'Rock') {
                compScore += 1;
                return "You lose! Rock beats Scissors!";
            } else if (playerSelection === 'Paper' && computerSelection === 'Scissors') {
                compScore += 1;
                return "You lose! Scissors beats Paper!";
            } else if (playerSelection === 'Rock' && computerSelection === 'Paper') {
                compScore += 1;
                return "You lose! Paper beats Rock!";
            } else {
                playerScore += 1;
                compScore += 1;
                return "Tie!"
            }
            return playerScore;
            return compScore;
        }

        function game() {
            for (let i = 0; i < 5; i++) {
                console.log(playRound());
                console.log(`Your score: ${playerScore}`);
                console.log(`Computer score: ${compScore}`);
            }
            winner();
        }

        function winner() {
            if (compScore > playerScore) {
                console.log("nThe computer dominated your ass! Better luck next time!")
            } else if (compScore < playerScore) {
                console.log("nWay to crush it! You win!")
            } else {
                console.log("nHoly shizzers! It's a tie!")
            }
        }
    </script>
</body>
</html>

Answer

There are many ways in which you can improve your code. I removed the arguments of your playRound() function, removed the return statements at the end of that function and added the game() call at the end of your script to make it work.

The arguments in playRound() forced the function to work with undefined local values each time.

You are not checking at all, whether the input given by the user is a valid one.

Maybe you can check out this alternative way of doing the game: rock,paper,scissors?

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Rock Paper Scissors</title>
</head>

<body>
    <script>
        const choices = ['Rock', 'Paper', 'Scissors'];
        let playerScore = 0;
        let compScore = 0;

        function computerPlay() {
            return choices[Math.floor(Math.random() * choices.length)];
        }

        function playRound() {  
            computerSelection = computerPlay(); 
            playerSelection = prompt("Rock, Paper, or Scissors? ");

            if (playerSelection === 'Rock' && computerSelection === 'Scissors') {
                playerScore += 1;
                return "You win! Rock beats Scissors!";
            } else if (playerSelection === 'Scissors' && computerSelection === 'Paper') {
                playerScore += 1;
                return "You win! Scissors beats Paper!";
            } else if (playerSelection === 'Paper' && computerSelection === 'Rock') {
                playerScore += 1;
                return "You win! Paper beats Rock!";
            } else if (playerSelection === 'Scissors' && computerSelection === 'Rock') {
                compScore += 1;
                return "You lose! Rock beats Scissors!";
            } else if (playerSelection === 'Paper' && computerSelection === 'Scissors') {
                compScore += 1;
                return "You lose! Scissors beats Paper!";
            } else if (playerSelection === 'Rock' && computerSelection === 'Paper') {
                compScore += 1;
                return "You lose! Paper beats Rock!";
            } else {
                playerScore += 1;
                compScore += 1;
                return "Tie!"
            }
        }

        function game() {
            for (let i = 0; i < 5; i++) {
                console.log(playRound());
                console.log(`Your score: ${playerScore}`);
                console.log(`Computer score: ${compScore}`);
            }
            winner();
        }

        function winner() {
            if (compScore > playerScore) {
                console.log("nThe computer dominated your ass! Better luck next time!")
            } else if (compScore < playerScore) {
                console.log("nWay to crush it! You win!")
            } else {
                console.log("nHoly shizzers! It's a tie!")
            }
        }
        game();
    </script>
</body>
</html>

Advertisement

Answer