如何将随机计算机选择添加到石头剪刀布中的按钮

Question

我有变量来生成 1-3 之间的随机数，并返回“石头”、“布”或“剪刀”，但是，我无法弄清楚如何将该函数添加到已按下的单个按钮的事件侦听器中. 并让它返回“计算机选择---”。此外，目前按下按钮时图像发生变化，但实际上没有选择“石头”“布”“剪刀”，我可以在playerChoice()图像变化的同时添加它onclick还是应该是它自己的功能？ <section>        <div class="player1">            <h2>Player One</h2>            <p>0</p>        </div>        <div class="computer">            <h2>Computer</h2>            <p>0</p>        </div>        <div class="game-board">            <img id="player-choice" src="images/rock.png" alt="" />            <img id="computer-choice" src="images/rock.png" alt="" />        </div>        <div class="options-btn">            <input type="button" id="rock-btn" value="Rock" />            <input type="button" id="paper-btn" value="Paper" />            <input type="button" id="scissors-btn" value="Scissors" />        </div>    </section>let playerScore = 0;let computerScore = 0;function playerChoice() {  const playerChoice = document.getElementById('player-choice');  const rock = document.getElementById('rock-btn');  const paper = document.getElementById('paper-btn');  const scissors = document.getElementById('scissors-btn');  rock.addEventListener('click', () => {    playerChoice.src = 'images/rock.png';  });  paper.addEventListener('click', () => {    playerChoice.src = 'images/paper.png';  });  scissors.addEventListener('click', () => {    playerChoice.src = 'images/scissors.png';  });}function computerChoice() {  const options = document.querySelectorAll('.options-btn button');  const randomPick = ['rock', 'paper', 'scissors'];  const randomNumber = Math.floor(Math.random() * 3);  return (choice = randomPick[randomNumber]);}playerChoice();

Answer 1

您可以使用 eventListener 获取 playerChoice 并将选择与 game() 函数进行比较

function game(userChoice) {

  const computerChoice = computerChoice();

  switch (userChoice + computerChoice) {

    case "rockscissors":

    case "paperrock":

    case "scissorspaper":

      win(userChoice, computerChoice);

      break;

    case "rockpaper":

    case "paperscissors":

    case "scissorsrock":

      lose(userChoice, computerChoice);

      break;

    case "rockrock":

    case "paperpaper":

    case "scissorscissors":

      draw(userChoice, computerChoice);

      break;

  }

}

function main() {

rock.addEventListener("click",function() {

  game("rock");

})

paper.addEventListener("click",function() {

  game("paper");

})

scissors.addEventListener("click",function() {

  game("scissors");

})

}

main();  

Answer 2

您在这里不需要事件侦听器。好像你把它复杂化了。

由于我不知道您的 HTML 是什么样子，因此我假设玩家可以选择三个按钮：

HTML:

<img src="images/rock.png" onClick="playerChoice('rock');">

<img src="images/paper.png" onClick="playerChoice('paper');">

<img src="images/scissors.png" onClick="playerChoice('scissors');">

记者：

let playerScore = 0;

let computerScore = 0;

function playerChoice(pChoice) {

    const playerChoice = document.getElementById('player-choice');

    const rock = document.getElementById('rock-btn');

    const paper = document.getElementById('paper-btn');

    const scissors = document.getElementById('scissors-btn');

    if (pChoice== "rock") {

        playerChoice.src = 'images/rock.png';

    } else if (pChoice == "paper") {

        playerChoice.src = 'images/paper.png';

    } else if (pChoice == "scissors") {

        playerChoice.src = 'images/scissors.png';

    }

    var cChoice = computerChoice() ;

    

    // do your pChoice vs cChoice comparison:

    // increment playerScore/computerScore

}

function computerChoice() {

    const options = document.querySelectorAll('.options-btn button');

    const randomPick = ['rock', 'paper', 'scissors'];

    const randomNumber = Math.floor(Math.random() * 3);

    return randomPick[randomNumber];

}