如何讓我的 function 在石頭、胡椒、剪刀游戲中等待 Javascript 中的按鈕按下？

Question

所以我有這個代碼（我添加了整個 JS 代碼，但我需要幫助的部分在 function 游戲中）只需在我的 html 文件中按一個按鈕即可運行 5 輪搖滾、紙、剪刀游戲。

問題是每一輪我都希望 function 等待三個按鈕（石頭、紙或剪刀）中的任何一個按鈕點擊

我會給予任何幫助，謝謝你，祝你有美好的一天！

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 並沒有真正獲得玩家的選擇——它添加了事件監聽器。 運行 5 次，你會得到 5 個監聽器連接到同一個事件。 我認為您不能像當前嘗試的那樣等待事件在循環中觸發。 當您需要用戶的一些輸入時，這在控制台應用程序中將是一個非常好的設計，但在 JS 中處理事件時，您必須利用事件來執行游戲的邏輯。

換句話說，您可能想要擺脫 for 循環並考慮將該邏輯移動到事件鏈，並使用一個偵聽器，該偵聽器首先將用戶的輸入添加到板，然后執行后續邏輯 - 例如獲取計算機選擇或確定是否游戲結束與否。