Rock-Paper-Scissors game Oding Project - Question

Question

I am doing the Rock-Paper-Scissors project in The Odin Project. I've created my script, everything works fine:

• Computer picks a random choice
• Player inputs his own
• In the console every result is being tracked and also types the current score
• In the HTML file i created an empty div with id=choice and also shows the results there.

What i want: Unfortunately i get the results of all 5 rounds simultaneously, at the end of the 5 rounds. Is there any way that i could do it like this:

1. player inputs the choice.
2. HTML shows the result of the round + current score.
3. Maybe after pressing a button (?) the game go to the next round.
4. Do the whole process again, until we reach the 5 rounds?

if you run the game once you will understand what i mean (in case i didn't phrased it correctly.)

If yes, how can this be done? I am pretty new to JavaScript so if thats an advanced thing to do, then i pass!

Thanks a lot in advance!

Javascript code:

let choice = document.getElementById('choice');

//Determines Computer's choice and randomizes the selection
function getComputerChoice() {
    let randomNumber = Math.floor(Math.random()*3)
    switch (randomNumber) {
        case 0:
            return "Rock";
        case 1:
            return "Paper";
        case 2:
            return "Scissors";
    }
}

//Runs the game
function game() {
  let roundsPlayed = 0;
  let playerScore = 0;
  let computerScore = 0;

//Loops the game for 5 rounds. Tracks score
for (i=0; i < 5; i++){
const computerSelection = getComputerChoice().toLowerCase();
const playerSelection = prompt("Choose between Rock, Paper or Scissors").toLowerCase();

console.log("Player chose", playerSelection);
console.log("Computer chose", computerSelection);

//Plays the Round to determine the winner
function playRound(playerSelection, computerSelection) {
        if (playerSelection == computerSelection) {
        choice.innerText += "Its a tie this round! \r\n"
        return "Its a tie this round!"
    }
    else if (playerSelection == "rock"){
        if (computerSelection == "paper") {
            choice.innerText += "Unfortunately you lost this round!! \r\n"
            computerScore++
            return "You lost this round!"
        }
        else {
            choice.innerText += "You won this round!!! \r\n"
            playerScore++
            return "You won this round!"
        }
    }
    else if (playerSelection == "scissors"){
        if (computerSelection == "rock") {
            choice.innerText += "Unfortunately you lost this round!! \r\n"
            computerScore++
            return "You lost this round!"
        }
        else {
            choice.innerText += "You won this round!! \r\n"
            playerScore++
            return "You won this round!"
        }
    }
    else if (playerSelection == "paper"){
        if (computerSelection == "scissors") {
            choice.innerText += "Unfortunately you lost this round!! \r\n"
            computerScore++
            return "You lost this round!"
        }
        else if (computerSelection == "paper"){
          choice.innerText += "It's a tie this round! \r\n"
          return "It's a tie this round!"
        }
        else {
            choice.innerText += "You won this round!! \r\n"
            playerScore++
            return "You won this round!"
        }
    }
  }

  console.log(playRound(playerSelection, computerSelection));
  console.log("Player's score " + playerScore + " and computer's score " + computerScore);

//Shows each's round result
  choice.innerText += "\r\n Score so far is, player's score " + playerScore + " and computer's score is " + computerScore + "\r\n \n \n"
}
//Determines the winner of the 5-rounds game
if (playerScore > computerScore){
      choice.innerText += "Winner! After a 5-rounds game, you beat the Computer"
}
else if (playerScore == computerScore){
      choice.innerText += "Final result after a 5-rounds games: It's a tie!"
}
else {
      choice.innerText += "Loser! After a 5-rounds game, you lost to the Computer"
 }
}

//Starts the game
game();

HTML Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
<div id="choice">
</div>

<script src="app.js"></script>

</body>

</html>

Answer 1

One way to achieve what you want, is to make the script sleep a little bit after each iteration, so it gives the browser the chance to show you the output.

All you need to do is make the function async, and sleep for a second after each iteration.

let choice = document.getElementById('choice');

//Determines Computer's choice and randomizes the selection
function getComputerChoice() {
    let randomNumber = Math.floor(Math.random()*3)
    switch (randomNumber) {
        case 0:
            return "Rock";
        case 1:
            return "Paper";
        case 2:
            return "Scissors";
    }
}

//Runs the game
// Async function
async function game() {
  let roundsPlayed = 0;
  let playerScore = 0;
  let computerScore = 0;

//Loops the game for 5 rounds. Tracks score
for (i=0; i < 5; i++){
const computerSelection = getComputerChoice().toLowerCase();
const playerSelection = prompt("Choose between Rock, Paper or Scissors").toLowerCase();

console.log("Player chose", playerSelection);
console.log("Computer chose", computerSelection);

//Plays the Round to determine the winner
function playRound(playerSelection, computerSelection) {
        if (playerSelection == computerSelection) {
        choice.innerText += "Its a tie this round! \r\n"
        return "Its a tie this round!"
    }
    else if (playerSelection == "rock"){
        if (computerSelection == "paper") {
            choice.innerText += "Unfortunately you lost this round!! \r\n"
            computerScore++
            return "You lost this round!"
        }
        else {
            choice.innerText += "You won this round!!! \r\n"
            playerScore++
            return "You won this round!"
        }
    }
    else if (playerSelection == "scissors"){
        if (computerSelection == "rock") {
            choice.innerText += "Unfortunately you lost this round!! \r\n"
            computerScore++
            return "You lost this round!"
        }
        else {
            choice.innerText += "You won this round!! \r\n"
            playerScore++
            return "You won this round!"
        }
    }
    else if (playerSelection == "paper"){
        if (computerSelection == "scissors") {
            choice.innerText += "Unfortunately you lost this round!! \r\n"
            computerScore++
            return "You lost this round!"
        }
        else if (computerSelection == "paper"){
          choice.innerText += "It's a tie this round! \r\n"
          return "It's a tie this round!"
        }
        else {
            choice.innerText += "You won this round!! \r\n"
            playerScore++
            return "You won this round!"
        }
    }
  }

  console.log(playRound(playerSelection, computerSelection));
  console.log("Player's score " + playerScore + " and computer's score " + computerScore);

//Shows each's round result
  choice.innerText += "\r\n Score so far is, player's score " + playerScore + " and computer's score is " + computerScore + "\r\n \n \n"
 
  // Sleep for 1 second
  await new Promise(r => setTimeout(r, 1000));
}

//Determines the winner of the 5-rounds game
if (playerScore > computerScore){
      choice.innerText += "Winner! After a 5-rounds game, you beat the Computer"
}
else if (playerScore == computerScore){
      choice.innerText += "Final result after a 5-rounds games: It's a tie!"
}
else {
      choice.innerText += "Loser! After a 5-rounds game, you lost to the Computer"
 }
}

//Starts the game
game();

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
<div id="choice">
</div>

<script src="app.js"></script>

</body>

</html>

If you're not familiar yet with async/await, you can read about it from here.