如何在函数间传递参数以实现双人按钮式石头剪刀布游戏？

要在不同函数间共享参数（玩家选择），最直接的方式是用全局变量存储状态，或者把状态封装在一个对象里。当玩家1选择后，把选择保存到全局变量；玩家2选择后，再读取两个变量的值进行胜负判断。

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>双人石头剪刀布</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
    <link rel="apple-touch-icon" href="favicon.png">
</head>
<body>
  <p id="player1">player 1 turn</p>
    <button onclick="lockInP1('rock')" class="1" id="rock1">Rock</button>
    <button onclick="lockInP1('paper')" class="1" id="paper1">Paper</button>
    <button onclick="lockInP1('scissors')" class="1" id="scissors1">Scissor</button>
    <p>your answer: <span id="choiceP1"></span></p>
  <p id="player2">player 2 turn</p>
    <button onclick="lockInP2('rock')" class="2" id="rock2">Rock</button>
    <button onclick="lockInP2('paper')" class="2" id="paper2">Paper</button>
    <button onclick="lockInP2('scissors')" class="2" id="scissors2">Scissor</button>
    <p>your answer: <span id="choiceP2"></span></p>
    <p id="result">result: </p>
    <a href="index.html"><button>solo mode</button></a>
    <br>
    <br>
    <a href="duel.html"><button>refresh</button></a>
    <script src="script.js"></script>
</body>
</html>

JavaScript部分 #

// 全局变量存储两个玩家的选择
let player1Choice = null;
let player2Choice = null;

document.addEventListener('DOMContentLoaded', function(event) {
    document.getElementById('rock2').disabled = true;
    document.getElementById('paper2').disabled = true;
    document.getElementById('scissors2').disabled = true;
    document.getElementById('player2').hidden = true;
})

// 玩家1选择完成后的逻辑
function lockInP1(choice){
    player1Choice = choice;
    // 更新显示玩家1的选择
    document.getElementById('choiceP1').textContent = choice;
    // 禁用玩家1的按钮，显示玩家2的操作区
    document.getElementById('rock1').disabled = true;
    document.getElementById('paper1').disabled = true;
    document.getElementById('scissors1').disabled = true;
    document.getElementById('player1').hidden = true;
    document.getElementById('rock2').disabled = false;
    document.getElementById('paper2').disabled = false;
    document.getElementById('scissors2').disabled = false;
    document.getElementById('player2').hidden = false;
}

// 玩家2选择完成后的逻辑，同时判断结果
function lockInP2(choice){
    player2Choice = choice;
    // 更新显示玩家2的选择
    document.getElementById('choiceP2').textContent = choice;
    // 禁用玩家2的按钮
    document.getElementById('rock2').disabled = true;
    document.getElementById('paper2').disabled = true;
    document.getElementById('scissors2').disabled = true;
    document.getElementById('player2').hidden = true;
    
    // 两个玩家都选完了，判断结果
    determineResult();
}

// 单独的胜负判断函数
function determineResult(){
    const resultElement = document.getElementById('result');
    // 先清空之前的结果
    resultElement.textContent = 'result: ';
    
    // 平局情况
    if(player1Choice === player2Choice){
        resultElement.textContent += 'tie';
        return;
    }
    
    // 用对象映射胜负规则，简化判断逻辑
    const winConditions = {
        rock: 'scissors',
        paper: 'rock',
        scissors: 'paper'
    };
    
    // 判断玩家1是否获胜
    if(winConditions[player1Choice] === player2Choice){
        resultElement.textContent += 'p1 win';
    } else {
        resultElement.textContent += 'p2 win';
    }
}

// 保留单人模式的函数（如果需要）
function lockInUser(answer){
    document.getElementById('choiceUser').textContent = answer;
    document.getElementById('rock').disabled = true;
    document.getElementById('paper').disabled = true;
    document.getElementById('scissors').disabled = true;
    const random = Math.floor(Math.random()*3);
    let compChoice = '';
    if(random == 0){
        compChoice = 'rock';
    } else if(random == 1){
        compChoice = 'paper';
    } else if(random == 2){
        compChoice = 'scissors';
    }
    document.getElementById('choiceComp').textContent = compChoice;
    
    const resultElement = document.getElementById('result');
    resultElement.textContent = 'result: ';
    if(answer === compChoice){
        resultElement.textContent += 'tie';
    } else if(winConditions[answer] === compChoice){
        resultElement.textContent += 'you win';
    } else {
        resultElement.textContent += 'you lost';
    }
}

• 全局变量存储选择：用player1Choice和player2Choice保存两个玩家的选择，这样不管哪个函数都能访问到这些值。
• 简化按钮点击逻辑：每个按钮直接调用对应的lockInP1/lockInP2并传入选择，不需要同时调用userInputs。
• 分离胜负判断逻辑：把结果判断单独放在determineResult函数里，等玩家2选择完成后自动调用，代码更清晰。
• 优化显示逻辑：不再显示?????，而是直接展示玩家的实际选择，提升用户体验。
• 简化胜负判断：用对象映射获胜规则，减少大量的if-else语句，代码更易维护。

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