如何让我的 function 在石头、胡椒、剪刀游戏中等待 Javascript 中的按钮按下？

Question

So I have this code(I added the whole JS code but the part I want help is in the function game) that simply runs 5 rounds of a game of rock, papper, scissors with a press of a button in my html file.

The thing is that each round I want the function to wait for a button click of any of the three buttons (rock, papper or scissors)

I will appriciate any help, thank you and have a nice day!

let rock = "Rock";
let papper = "Papper";
let scissors = "Scissors";
let wins = 0;
let playerSelection;

const btnrock = document.getElementById('btn1');
const btnpapper = document.getElementById('btn2');
const btnscissors = document.getElementById('btn3');
const btnplay = document.getElementById('game')

function getPlayerChoice() {
  
  btnrock.addEventListener('click', () => {
  
    playerSelection = rock;
    return playerSelection;

  });
  
  btnpapper.addEventListener('click', () => {
  
    playerSelection = papper;
    return playerSelection;
  
  });
  
  btnscissors.addEventListener('click', () => {
  
    playerSelection = scissors;
    return playerSelection;

  });

}


btnplay.addEventListener('click', game)



function getComputerChoice() {

  let min = Math.ceil(0);
  let max = Math.floor(2);
  let random = Math.floor(Math.random() * (max - min + 1) + min); 

  if (random == 0)
  {
    return rock;
  }
  if (random == 1){
    return papper;
  }
  if (random == 2){
    return scissors;
  }
}




function playRound(playerSelection,pcChoice) {


  if(pcChoice == rock && playerSelection == papper) {
    wins++;
    return "Player Wins!";
  }

  else if (pcChoice == rock && playerSelection == scissors) {
    return "Player Loses!"
  }

  else if (pcChoice == scissors && playerSelection == rock){ wins++; return "Player Wins!"}

  else if (pcChoice == scissors && playerSelection == papper){return "Player Loses!"}

  else if (pcChoice == papper && playerSelection == rock){return "Player Loses!"}

  else if (pcChoice == papper && playerSelection == scissors){wins++; return "Player Wins!"}

  else {return "It's a Draw!"}
}


function game() {

  for(let i = 0; i < 5; i++){
    
    const pcChoice = getComputerChoice();

    playerSelection = getPlayerChoice(); // I want this to wait
    console.log("PC "+ pcChoice );
    console.log('Player '+playerSelection);
    let roundwinner = playRound(playerSelection,pcChoice);
    console.log(roundwinner);

    if(i === 2 && wins == 0){
      break;
    }

    if(i === 3 && wins <= 1) {
      break;
    }

    if(wins==3){
      break;
    }

  }

  if(wins >= 3) {
    console.log("You are the winner of this match")
  }
  else {console.log('You lost the game');}
}

Answer 1

getPlayerChoice doesn't really get the player's choice - it adds event listeners. Run it 5 times and you get 5 listeners hooked up to the same event. I don't think you can wait for an event to fire in a loop like you're currently trying to. This would be a perfectly fine design in a console app when you want some input from the user, but in JS when working with events you have to leverage the events to execute your game's logic.

In other words, you might want to get rid of the for loop and consider moving that logic to event chain with a listener that first adds the user's input to the board and then executes the follow logic - eg gets the computer choice or determines whether the game is finished or not.