如何修复JavaScript猜拳游戏9局后无法正确结束重置的问题

问题根源 #

1. 回合计数不完整：原代码仅在有胜负的回合调用completeRound()，平局时不计数，导致总回合数统计错误，无法触发9局结束逻辑。
2. 结束条件错误：判断completedRounds ==10才触发结束，而"best out of 9"要求9局后结束。
3. 未重置回合计数器：游戏结束后completedRounds未重置，导致下次开局直接触发结束逻辑。

修复步骤 #

1. 全局统计回合数：在getResult()函数末尾，无论胜负平局，都调用completeRound()，确保每一局都被计数。
2. 修正结束条件：将completeRound()中的判断改为completedRounds ===9，符合9局制要求。
3. 重置回合计数器：在limitGameToBestOutOfNine()函数末尾添加completedRounds =0，确保下一轮游戏从0开始计数。
4. 可选优化：游戏结束时禁用操作按钮，防止继续点击；重置时恢复按钮可用。

完整修复代码 #

/*variable statements follow*/
const computerChoiceDisplay = document.getElementById('computer-choice');
const buttons = document.getElementsByClassName('control');
const userChoiceDisplay = document.getElementById('player-choice');
const resultDisplay = document.getElementById('result');
const possibleChoices = document.getElementsByClassName('control');
const resultOutput = document.getElementById('result-output');
const playerImage = document.getElementById('player-image');
const computerImage = document.getElementById('computer-image');
const choices = ["rock", "paper", "scissors"];
let userChoice;
let computerChoice;
let result;
let playerChoice;
let score = 0;
let mistakes = 0;
let scoreContainer;
let userSpan;
let computerSpan;
let playerScore = document.getElementById("userScore");
let compScore = document.getElementById("compScore");
let resetButton = document.getElementById("resetScore");
let compChoice;
let completedRounds = 0;

/**
 * 为操作按钮添加点击事件监听
 */
Array.from(possibleChoices).forEach(possibleChoice => possibleChoice.addEventListener('click', (e) => {
    userChoice = e.target.id;
    resultDisplay.innerHTML = userChoice;
    compChoice = generateComputerChoice();
    gameImages(userChoice, computerChoice);
    getResult();
}));

/**
 * 重置按钮事件监听
 */
document.getElementById("resetScore").addEventListener("click", resetScore);

/**
 * 生成电脑选择
 */
function generateComputerChoice() {
    const randomNumber = Math.floor(Math.random() * 3) + 1;
    
    if (randomNumber === 1) {
        computerChoice = 'rock';
    } else if (randomNumber === 2) {
        computerChoice = 'paper';
    } else {
        computerChoice = 'scissors';
    }
    computerChoiceDisplay.innerHTML = computerChoice;
}

/**
 * 判断对局结果
 */
function getResult () {
    if (computerChoice === userChoice) {
        result = "It's a draw!";
    } else if (computerChoice === 'rock'  && userChoice === 'paper') {
        result = "You Win!";
        incrementUserScore();
    } else if (computerChoice === 'rock'  && userChoice === 'scissors') {
        result = "You lost!";
        incrementComputerScore();
    } else if (computerChoice === 'paper'  && userChoice === 'scissors') {
        result = "You Win!";
        incrementUserScore();
    } else if (computerChoice === 'paper'  && userChoice === 'rock') {
        result = "You lost!";
        incrementComputerScore();
    } else if (computerChoice === 'scissors'  && userChoice === 'rock') {
        result = "You win!";
        incrementUserScore();
    } else if (computerChoice === 'scissors'  && userChoice === 'paper') {
        result = "You lost!";
        incrementComputerScore();
    }
    resultOutput.innerHTML = result;
    toggleBackgroundColor();
    // 每局结束都统计回合数，包括平局
    completeRound();
}
    
/**
 * 更新对局图片
 */
function gameImages(playerChoice, computerChoice) {
    playerImage.src = `assets/images/${playerChoice}.jpg`;
    playerImage.alt = playerChoice;

    computerImage.src = `assets/images/${computerChoice}.jpg`;
    computerImage.alt = computerChoice;
}

/**
 * 增加玩家得分
 */
function incrementUserScore() {
    score++;
    playerScore.innerHTML = score;
}

/**
 * 增加电脑得分
 */
function incrementComputerScore() {
    mistakes++;
    compScore.innerHTML = mistakes;
}

/**
 * 重置得分
 */
function resetScore() {
    score = 0;
    mistakes = 0;
    completedRounds = 0;
    playerScore.innerHTML = score;
    compScore.innerHTML = mistakes;
    // 恢复按钮可用
    Array.from(possibleChoices).forEach(btn => btn.disabled = false);
}

/**
 * 9局结束后结算并重置
 */
function limitGameToBestOutOfNine () { 
    // 判断最终胜者
    let finalResult;
    if (score > mistakes) {
        finalResult = 'Player has won the game!';
    } else if (mistakes > score) {
        finalResult = 'Computer has won the game!';
    } else {
        finalResult = 'It\'s a tie!';
    }
    console.log(finalResult);
    alert(finalResult);
  
    // 重置所有数据
    score = 0;
    mistakes = 0;
    completedRounds = 0;
    playerScore.innerHTML = score;
    compScore.innerHTML = mistakes;
    // 禁用按钮防止继续点击
    Array.from(possibleChoices).forEach(btn => btn.disabled = true);
}

/**
 * 统计回合数并判断是否结束游戏
 */
function completeRound() {
    completedRounds++;
    console.log("Completed Rounds: " + completedRounds);
    if (completedRounds === 9) {
        limitGameToBestOutOfNine();
    }
}

/**
 * 根据结果切换背景色
 */
function toggleBackgroundColor() {
    const player = document.getElementById('player');
    const computer = document.getElementById('computer');
    const winner = resultOutput.innerHTML.toLowerCase();

    if (winner.includes('you win')) {
        player.style.backgroundColor = "#00FF00"; 
        computer.style.backgroundColor = "#FF0000"; 
    } else if (winner.includes('you lost')) {
        player.style.backgroundColor = "#FF0000"; 
        computer.style.backgroundColor = "#00FF00";
    } else {
        player.style.backgroundColor = "#00FF00"; 
        computer.style.backgroundColor = "#00FF00";
    } 
}

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