石头剪刀布Web游戏playerSelection函数异常及逻辑适配求助

核心问题与修复方案 #

1. playerSelection函数执行上下文错误

   • 全局直接调用playerSelection()时，this指向window而非按钮，无法获取按钮ID；且原代码页面加载时自动执行game()，提前触发回合逻辑，此时玩家未做出选择。
   • 修复：移除全局的console.log(playerSelection())，将回合逻辑绑定到按钮点击事件，而非自动执行。

2. 大小写不匹配导致判断失效

   • 按钮ID为全大写（ROCK/PAPER/SCISSORS），但getComputerChoice返回首字母大写格式（Rock/Paper/Scissors），playRound中的条件永远无法匹配。
   • 修复：统一格式，将电脑选择转为全大写，保证两边判断基准一致。

3. 分数未同步到页面DOM

   • 原代码仅在变量中存储分数，页面上的分数显示不会更新。
   • 修复：每次回合结束后，将分数变量同步到对应的DOM元素。

4. 游戏触发逻辑错误

   • 原代码页面加载时自动执行playRound，未等待玩家点击按钮。
   • 修复：将回合触发逻辑绑定到按钮点击事件，玩家选择后才启动回合。

完整修复后的代码 #

HTML（无需修改）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script defer src="script.js" type="text/javascript"></script>
    <title>Rock, Paper, Scissors</title>
</head>
<body>
    <h1>Rock, Paper, Scissors</h1>
    <p>Play against the computer. First to 5 points wins the game!</p>
    <h2>Select a Move:</h2>

    <div id="Buttons">
        <button id="ROCK">ROCK</button>
        <button id="PAPER">PAPER</button>
        <button id="SCISSORS">SCISSORS</button>
    </div>
    
    <p id="roundTxt"></p>

    <h2>Scores:</h2>

    <ul id="scoresBox">
        <h3>Player: </h3>
        <div id="SCORES_HUMAN">0</div>
        <h3>Computer: </h3> 
        <div id="SCORES_COMPUTER">0</div>
    </ul>
</body>
</html>

CSS（修正类名拼写错误）

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin-left: 50px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

p {
    font-size: 18px;
  }

button {
    border: .3rem solid rgb(255, 0, 0);
    border-radius: .5rem;
    margin: .75rem;
    font-size: 1rem;
    font-weight: bold;
    padding: .75rem .5rem;
    width: 6rem;
    text-align: center;
    color: white;
    background: rgb(89, 89, 89);
    text-shadow: 0 0 .5rem rgb(229, 229, 229);
}

button:hover {
    cursor: pointer;
}

button:active {
    background-color: rgba(92, 92, 92, 0.208);
}

/* 修正原类名拼写错误：Buttones → #Buttons */
#Buttons {
    display: flex;
    align-self: center;
}

JavaScript（核心逻辑重构）

// 持久化存储分数变量
let humanScore = 0;
let computerScore = 0;

// 绑定按钮点击事件，直接传递选择值
document.getElementById("ROCK").onclick = () => startRound("ROCK");
document.getElementById("PAPER").onclick = () => startRound("PAPER");
document.getElementById("SCISSORS").onclick = () => startRound("SCISSORS");

function getComputerChoice() {
    const PICK = ["Rock", "Paper", "Scissors"];
    const random = Math.floor(Math.random() * PICK.length);
    return PICK[random].toUpperCase(); // 转为全大写，统一判断格式
}

function startRound(playerChoice) {
    const computerChoice = getComputerChoice();
    const roundResult = playRound(playerChoice, computerChoice);
    
    // 更新回合信息到页面
    document.getElementById("roundTxt").textContent = roundResult;
    
    // 更新分数到页面DOM
    document.getElementById("SCORES_HUMAN").textContent = humanScore;
    document.getElementById("SCORES_COMPUTER").textContent = computerScore;
    
    // 检查是否达到获胜条件（先到5分）
    checkGameOver();
}

function playRound(playerSelection, computerSelection) {
    if (playerSelection === computerSelection) {
        return "It's a tie!";
    }
    
    // 简化胜负判断逻辑
    const winMap = {
        ROCK: "SCISSORS",
        PAPER: "ROCK",
        SCISSORS: "PAPER"
    };
    
    if (winMap[playerSelection] === computerSelection) {
        humanScore++;
        return `You Win! ${playerSelection} beats ${computerSelection}`;
    } else {
        computerScore++;
        return `You Lose! ${computerSelection} beats ${playerSelection}`;
    }
}

function checkGameOver() {
    if (humanScore === 5 || computerScore === 5) {
        const finalMsg = humanScore === 5 ? "You Win the Game!" : "You Lose the Game!";
        alert(finalMsg);
        // 重置游戏状态
        humanScore = 0;
        computerScore = 0;
        document.getElementById("SCORES_HUMAN").textContent = "0";
        document.getElementById("SCORES_COMPUTER").textContent = "0";
        document.getElementById("roundTxt").textContent = "";
    }
}

修复说明 #

• 直接通过按钮点击事件传递玩家选择，避免this指向问题；
• 统一玩家与电脑选择的大小写格式，确保判断逻辑正常触发；
• 将回合逻辑绑定到按钮点击，玩家操作后才启动游戏；
• 添加分数同步到DOM的逻辑，以及先到5分的游戏结束判断与重置功能；
• 修正了CSS中类名拼写错误，保证布局生效。

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