Im having a difficult time trying to get my function to loop using javascript

user_16597057 0
Viewed 98

Hi I am new to JavaScript and I'm trying to make a simple game of rock, paper, scissors that loops five times before declaring a winner. Im not understanding why my loop is not working, I've tried a do while loop, while loop, and finally settled with a for loop yet the function does not seem to loop five times like i would want. Im also having a problem with why the game is return a win or loss of 3 instead of one for just one round. I was hoping that someone could help me out with this it would be greatly appreciated.

  let computerSelection = computerPlay();
    let playerSelection = prompt("Enter your Move");
    let roundWinner;
    let playerWins = 0;
    let computerWins = 0;
    let gameWinner;

function computerPlay(computerSelection =3){
    let choice = Math.floor(Math.random()*computerSelection) +1;
    let answer = "";
    if (choice === 1){ answer = "ROCK"} else if (choice === 2){answer ="PAPER"} else {answer = "SCISSORS"}
    return answer;}
  

function round(playerSelection , computerSelection){
    if (playerSelection.toUpperCase() === "ROCK" && computerSelection === "SCISSORS") {playerWins += 1}
    else if( playerSelection.toUpperCase() === "ROCK" && computerSelection === "PAPER"){computerWins += 1} 
    else if(playerSelection.toUpperCase() === "SCISSORS" && computerSelection === "PAPER") {playerWins += 1}
    else if( playerSelection.toUpperCase() === "SCISSORS" && computerSelection === "ROCK"){computerWins += 1} 
    else if (playerSelection.toUpperCase() === "PAPER" && computerSelection === "ROCK") {playerWins += 1}
    else if( playerSelection.toUpperCase() === "PAPER" && computerSelection === "SCISSORS"){computerWins += 1}
    else if( playerSelection !== computerSelection) {roundWinner = "You entered an invalid input, please try again!"}
    return (playerWins && computerWins)|| roundWinner;}

 


function game(){   
    for ( i = 0; i < 6; i++)  {round(playerSelection,computerSelection); if(playerSelection === computerSelection) {i += 0} else {i++};} 
  

if (playerWins > computerWins) {gameWinner =`You win! You won ${playerWins} to  ${computerWins}`}
else if (computerWins > playerWins) {gameWinner = `You Lose! You loss ${playerWins} to  ${computerWins}`}
else {gameWinner = roundWinner}

return gameWinner;
}


game();


let message = document.querySelector('main');

message.innerHTML = `<h1>${gameWinner} </h1>`;
* {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

h1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 500px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Rock, Paper, Scissors</title>
</head>
<body>
  <main></main>
<script src="game.js"></script>
</body>
</html>

Thanks

function loops javascript
2 Answers

I would suggest few changes:

  • If you want it to loop for 5 times, it is

    for(i=0;i<5;i++)

    (loops for i=0,1,2,3,4 -> 5 times)

  • for computer selection would be better to choose by Math.round instead of Math.floor in my opinion (floor of 1.9 is still 1, round is 2)

    let choice=Math.round(Math.random()*2)+1;

    and you can delete parameter of that function.

  • When you enter players selection and it is the same as computer, it should not return "invalid input" as in your code. I guess it is because of playerSelection === computerSelection, when I changed to playerSelection.toUpperCase() instead, this error disappeared.

  • Because of the same problem as in previous point, at this part

    for (i=0;i<6;i++)  
{
  round(playerSelection,computerSelection);
  if(playerSelection === computerSelection)
    {i += 0}
  else
    {i++} 
}

    your IF is always false, so you add 1 to 'i', but you loop added one as well, so in the end you added 2. I would use

      if(playerSelection.toUpperCase() === computerSelection) {i -= 1;} else {}

    in case you don't want draw to be counted. Otherwise this part can be completely missing and the game works well.

  • When the game ends with a draw, else {gameWinner = roundWinner} can be rewritten to else {gameWinner="It's a draw."}, you solution didn't work for me.

  • When player enters invalid value and you fixed the loop as @Gil suggested, you run to a problem with undefined result at the end. You can change that line to

      else if( playerSelection.toUpperCase() != computerSelection) 
  {
    alert("You entered an invalid input, please try again!"); 
    round(playerSelection,computerSelection);
  }

    which fixes the incorrect input and there is no need to rerun whole loop.

  • And I think it would be easier to use this line

      playerSelection=playerSelection.toUpperCase();

    when you get the user's input, so that you don't need to rewrite it in every IF statment.

user_169514270

The main issue here is the input values.

Your player input and computer input should be invoked every loop, but you used them only once instead of re-declaring them every time. Change this

let computerSelection = computerPlay();
let playerSelection = prompt("Enter your Move");

To this

let computerSelection;
let playerSelection;

Now change the loop to fill the inputs every time

for (let i = 0; i < 6; i++) {
    // Fill the inputs every loop.
    playerSelection = prompt("Enter your Move");
    computerSelection = computerPlay();
    round(playerSelection,computerSelection);
    if(playerSelection !== computerSelection) {
        i++;
    }
}
user_33470250
Related