如何无需刷新页面持续更新代码中电脑的随机选择

编程新手编写剪刀石头布游戏时遇到问题：多次点击操作按钮后，电脑的随机选择值始终未发生变化，希望修改代码实现无需刷新页面即可持续更新电脑的随机选择值。以下是原代码：

原JavaScript代码 #

const pointH = document.getElementById('human');
const pointC = document.getElementById('comp');
const win = document.getElementById('winner');
const array = ['paper', 'rock', 'scissor']; 
const result = randomChoice(array);
let playerChoice;
let compChoice;
let playerScore = 0;
let compScore = 0;
function randomChoice(arr) {
    const randomIndex = Math.floor(Math.random() * arr.length);
    const item = arr[randomIndex];
    return item;
  }
   
  function playGame(playerChoice, compChoice){
    if (playerChoice === 'rock' && compChoice === 'paper'){
        compScore++;
        pointC.textContent = `Comp: ${compScore}`;
        win.textContent = 'You lost!';
    }
    else if(playerChoice === 'rock' && compChoice === 'scissor'){
        playerScore++;
        pointH.textContent = `Player: ${playerScore}`;
      win.textContent = 'You won!';
    }
    else if(playerChoice === 'paper' && compChoice === 'rock'){
        playerScore++;
        pointH.textContent = `Player: ${playerScore}`;
        win.textContent = 'You won!';
    }
    else if(playerChoice === 'paper' && compChoice === 'scissor'){
        compScore++;
        pointC.textContent = `Comp: ${compScore}`;
        win.textContent = 'You lost!';
    }
    else if (playerChoice === 'scissor' && compChoice === 'paper'){
        playerScore++;
        pointH.textContent = `Player: ${playerScore}`;
      win.textContent = 'You won!';
    }
    else if (playerChoice === 'scissor' && compChoice === 'rock'){
        compScore++;
        pointC.textContent = `Comp: ${compScore}`;
        win.textContent = 'You lost!';
    }
    else {
        return win.textContent = 'Its a tie'
    }
    return gameOver();
  }


 function gameOver(){
    if(playerScore === 5 || compScore === 5){
        document.getElementById('btn1').disabled = true;
        document.getElementById('btn2').disabled = true;
        document.getElementById('btn3').disabled = true;
       if (playerScore > compScore){
        alert('Game over! You won!');
       }
       else{
        alert('Game over! You lost!');
       }
    }
 }

原HTML代码 #

<!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">
    <title>Rock - Paper - Scissor</title>
</head>
<body>
     
     <div class="container">
        <button id="btn1"  onclick="playGame('rock', result)">Rock</button>
        <button id="btn2"  onclick="playGame('paper', result)">Paper</button>
        <button id="btn3"  onclick="playGame('scissor', result)">Scissor</button>
     </div>
     <div class="points">
        <p id="human">Player: 0</p>
        <p id="comp">Comp: 0</p>
     </div>
     <p id="winner"></p>
     
     <script src="janken.js"></script>
</body>
</html>

问题根源 #

你在全局作用域中执行了const result = randomChoice(array)，这行代码只会在页面加载时运行一次，生成一个固定的电脑选择值。之后每次点击按钮，都是把这个固定值传给playGame函数，所以电脑的选择不会变化。

修改步骤 #

1. 移除全局固定值：删除全局的const result = randomChoice(array)语句，不需要提前生成电脑选择。
2. 修改playGame函数：不再接收compChoice参数，而是在函数内部每次调用时生成新的随机选择：

   function playGame(playerChoice){
       const compChoice = randomChoice(array); // 每次调用都生成新的电脑选择
       // 原有的胜负判断逻辑保持不变
       if (playerChoice === 'rock' && compChoice === 'paper'){
           compScore++;
           pointC.textContent = `Comp: ${compScore}`;
           win.textContent = 'You lost!';
       }
       // ... 其余判断逻辑省略
   }
   

3. 更新按钮点击事件：修改HTML中按钮的onclick属性，只传递玩家的选择，不需要传result：

   <button id="btn1" onclick="playGame('rock')">Rock</button>
   <button id="btn2" onclick="playGame('paper')">Paper</button>
   <button id="btn3" onclick="playGame('scissor')">Scissor</button>
   

修改后完整代码 #

JavaScript代码

const pointH = document.getElementById('human');
const pointC = document.getElementById('comp');
const win = document.getElementById('winner');
const array = ['paper', 'rock', 'scissor']; 
let playerScore = 0;
let compScore = 0;

function randomChoice(arr) {
    const randomIndex = Math.floor(Math.random() * arr.length);
    return arr[randomIndex];
}

function playGame(playerChoice){
    const compChoice = randomChoice(array); // 每次生成新的随机选择
    if (playerChoice === 'rock' && compChoice === 'paper'){
        compScore++;
        pointC.textContent = `Comp: ${compScore}`;
        win.textContent = 'You lost!';
    }
    else if(playerChoice === 'rock' && compChoice === 'scissor'){
        playerScore++;
        pointH.textContent = `Player: ${playerScore}`;
        win.textContent = 'You won!';
    }
    else if(playerChoice === 'paper' && compChoice === 'rock'){
        playerScore++;
        pointH.textContent = `Player: ${playerScore}`;
        win.textContent = 'You won!';
    }
    else if(playerChoice === 'paper' && compChoice === 'scissor'){
        compScore++;
        pointC.textContent = `Comp: ${compScore}`;
        win.textContent = 'You lost!';
    }
    else if (playerChoice === 'scissor' && compChoice === 'paper'){
        playerScore++;
        pointH.textContent = `Player: ${playerScore}`;
        win.textContent = 'You won!';
    }
    else if (playerChoice === 'scissor' && compChoice === 'rock'){
        compScore++;
        pointC.textContent = `Comp: ${compScore}`;
        win.textContent = 'You lost!';
    }
    else {
        win.textContent = 'Its a tie';
        return;
    }
    gameOver();
}

function gameOver(){
    if(playerScore === 5 || compScore === 5){
        document.getElementById('btn1').disabled = true;
        document.getElementById('btn2').disabled = true;
        document.getElementById('btn3').disabled = true;
        alert(playerScore > compScore ? 'Game over! You won!' : 'Game over! You lost!');
    }
}

HTML代码

<!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">
    <title>Rock - Paper - Scissor</title>
</head>
<body>
     
     <div class="container">
        <button id="btn1" onclick="playGame('rock')">Rock</button>
        <button id="btn2" onclick="playGame('paper')">Paper</button>
        <button id="btn3" onclick="playGame('scissor')">Scissor</button>
     </div>
     <div class="points">
        <p id="human">Player: 0</p>
        <p id="comp">Comp: 0</p>
     </div>
     <p id="winner"></p>
     
     <script src="janken.js"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者newDev