JS猜拳游戏分数未稳定停在5的原因及修复方案

1. 胜负判断条件不统一：玩家获胜的三个条件中，仅rock胜scissors的分支添加了(computerScore <=5 && playerScore <=5)的分数限制，另外两个获胜分支没有该限制。这导致当某一方分数已达5时，若触发无限制的获胜分支，分数仍会继续累加。
2. 胜负判定顺序错误：当前逻辑是先执行本次胜负的加分操作，再检查是否达到5分。若玩家当前分数为4，赢下本局后分数变为5，此时会触发结束逻辑；但如果玩家已经因之前的局数达到5分，后续点击仍会先执行加分，导致分数超过5。
3. 语法错误：代码最后一行else (computer == player)是无效语法，正确写法应为else if (computer == player)，该错误可能导致逻辑执行异常。

步骤1：在处理点击事件前先检查游戏是否已结束 #

在点击事件的回调函数最开头，添加游戏结束的判断，若已有一方分数达到5，则直接返回，不执行后续逻辑：

choiceBtns.forEach(button => button.addEventListener("click", () => {
    // 先检查是否已有一方达到5分，若已结束则不处理本次点击
    if (playerScore >=5 || computerScore >=5) return;
    
    player = button.textContent;
    computerSelection();
    playerText.textContent = "Player: " + player;
    computerText.textContent = "Computer: " + computer;
    resultText.textContent = "Result: " + result();
}));

步骤2：统一胜负判断逻辑，移除冗余的分数限制 #

删除胜负判断分支中零散的分数限制，因为已经在点击事件中做了前置检查。同时修正语法错误：

function result() {
    // 玩家获胜逻辑
    if ((player === "paper" && computer === "rock") || 
        (player === "scissors" && computer === "paper") || 
        (player === "rock" && computer === "scissors")) {
       
        playerScore += 1;
        // 检查是否达到胜利条件
        if (playerScore === 5) {
            resultText.textContent = "Winner winner chicken dinner! You won the game! Player score: " + playerScore + " Computer score: " + computerScore;
            disable();
        } else {
            resultText.textContent = "You win! Player score: " + playerScore + " Computer score: " + computerScore;
        }
        return resultText.textContent;
    }
    // 电脑获胜逻辑
    else if ((player === "rock" && computer === "paper") || 
             (player === "paper" && computer === "scissors") || 
             (player === "scissors" && computer === "rock")) {

        computerScore += 1;
        // 检查是否达到胜利条件
        if (computerScore === 5) {
            resultText.textContent = "You lost the game!!!!! Player score: " + playerScore + " Computer score: " + computerScore;
            disable();
        } else {
            resultText.textContent = "You lose! Player score: " + playerScore + " Computer score: " + computerScore;
        }
        return resultText.textContent;
    }
    // 平局逻辑
    else if (computer === player) {
        resultText.textContent = "Draw! Player score: " + playerScore + " Computer score: " + computerScore;
        return resultText.textContent;
    }
}

步骤3：优化重置逻辑（可选） #

原代码中在游戏结束后直接重置分数为0，若希望保留最终得分展示，可以移除分数重置的代码，改为添加重新开始按钮来触发重置操作。如果需要保持原逻辑，也可以保留，但建议在disable函数后添加提示，告知玩家游戏已结束。

const playerText = document.querySelector("#playerText");
const computerText = document.querySelector("#computerText");
const resultText = document.querySelector("#resultText");
const choiceBtns = document.querySelectorAll(".choiceBtn");

let player;
let computer;

let playerScore = 0;
let computerScore = 0;

choiceBtns.forEach(button => button.addEventListener("click", () => {
    // 前置检查：游戏已结束则不处理
    if (playerScore >=5 || computerScore >=5) return;
    
    player = button.textContent;
    computerSelection();
    playerText.textContent = "Player: " + player;
    computerText.textContent = "Computer: " + computer;
    resultText.textContent = "Result: " + result();
}));

function computerSelection(){
    const randNum = Math.floor(Math.random() * 3) + 1;
    switch(randNum){
        case 1:
            computer = "rock";
            break;
        case 2:
            computer = "paper";
            break;
        case 3:
            computer = "scissors";
            break;
    }
}

function disable() {
    document.getElementById("rock").disabled = true;
    document.getElementById("paper").disabled = true;
    document.getElementById("scissors").disabled = true;
}

function result() {
    // 玩家获胜
    if ((player === "paper" && computer === "rock") || 
        (player === "scissors" && computer === "paper") || 
        (player === "rock" && computer === "scissors")) {
       
        playerScore += 1;
        if (playerScore === 5) {
            resultText.textContent = "Winner winner chicken dinner! You won the game! Player score: " + playerScore + " Computer score: " + computerScore;
            disable();
        } else {
            resultText.textContent = "You win! Player score: " + playerScore + " Computer score: " + computerScore;
        }
        return resultText.textContent;
    }
    // 电脑获胜
    else if ((player === "rock" && computer === "paper") || 
             (player === "paper" && computer === "scissors") || 
             (player === "scissors" && computer === "rock")) {

        computerScore += 1;
        if (computerScore === 5) {
            resultText.textContent = "You lost the game!!!!! Player score: " + playerScore + " Computer score: " + computerScore;
            disable();
        } else {
            resultText.textContent = "You lose! Player score: " + playerScore + " Computer score: " + computerScore;
        }
        return resultText.textContent;
    }
    // 平局
    else if (computer === player) {
        resultText.textContent = "Draw! Player score: " + playerScore + " Computer score: " + computerScore;
        return resultText.textContent;
    }
}

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