石头剪刀布游戏：第5轮结束后自动触发endGame函数问题

问题根源 #

你的代码逻辑中，round变量的更新时机导致第5轮结束后不会立刻触发endGame：

• 初始round=0，每次点击按钮先判断round < 5，执行当前回合后才执行round++
• 第5次点击时，round从4变为5，此时已经走出了if(round <5)的分支，不会执行else里的endGame
• 只有第6次点击时，round=5才会进入else触发结束逻辑

修复方案 #

调整playGame函数的逻辑：执行完当前回合后，检查round是否已经达到5，若是则立刻调用endGame。同时修复endGame里的文字错误（玩家胜利时误显示电脑获胜），以及playRound中的胜负判断逻辑漏洞。

修改后的完整代码 #

const choices = ["Rock","Paper","Scissor"];
const buttons = document.querySelectorAll("button");
let playerid = document.getElementById("playerid"); 
let computerid = document.getElementById("computerid");
const playermarks = document.getElementById("playerscore");
const computermarks = document.getElementById("computerscore");
const res = document.getElementById("res");
let computerSelection;
let playerSelection;

// 电脑选择逻辑
function computerChoice(){
    computerSelection = choices[Math.floor(Math.random()*choices.length)];
    computerid.innerHTML = computerSelection;
    console.log("computerSelection", computerSelection);
}

buttons.forEach((btn) => {
    btn.addEventListener("click", playerChoice);
})

// 玩家选择逻辑
function playerChoice(e){
   playerSelection = e.target.innerHTML;
   playerid.innerHTML = playerSelection;
   console.log("playerSelection", playerSelection);
   computerChoice();
   playGame();
}

// 单轮胜负判断
function playRound(computerSel, playerSel){
    return (playerSel == computerSel) ? "Its a Tie" :
    ((computerSel == "Rock" && playerSel == "Paper") ||
    (computerSel == "Paper" && playerSel == "Scissor") ||
    (computerSel == "Scissor" && playerSel == "Rock")) ? "player won" : "computer won";
}

let playerScore = 0;
let computerScore = 0;
let round = 0;

function playGame(){
    if(round < 5){
        let result = playRound(computerSelection, playerSelection);
        console.log("result", result);
        
        if(result == "computer won"){
            computerScore++;
            computermarks.innerHTML = computerScore;
        }else if(result == "player won"){
             playerScore++;
             playermarks.innerHTML = playerScore;
        }
        
        round++;
        
        // 完成当前回合后，检查是否已达5轮，触发结束逻辑
        if(round === 5){
            endGame(computerScore, playerScore);
        }
    }
}

function endGame(cs, ps){
    if(cs > ps){
        res.innerHTML = "The Winner is Computer";
        console.log("The Winner is Computer");
    }else if (cs < ps){
        res.innerHTML = "The Winner is Player";
        console.log("The Winner is Player");
    }else{
        res.innerHTML = "Its a tie";
        console.log("Its a tie");
    }
}

额外修复说明 #

• 修正了playRound函数中的胜负判断逻辑（原代码中存在玩家选择剪刀 vs 电脑选择纸张时的判断错误）
• 修复了endGame函数中玩家胜利时的文字错误
• 移除了未使用的冗余变量computer

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