石头剪刀布游戏Bug修复求助：得分达5后无法终止游戏并重复生成重启按钮

Great job getting your Rock-Paper-Scissors game up and running with DOM interactions! The core issue here is that your game doesn't have a way to track whether it's already ended—so every time you click a choice button after someone hits 5 points, it keeps updating scores and spawning new "Play again!" buttons. Let's fix this with a simple state flag and some logic tweaks.

The Root Causes #

• No game-over state marker to stop score updates once someone wins
• The "Play again!" button is created every time you click a choice after a win, leading to duplicates
• The game logic still runs even after a player reaches 5 points

Step-by-Step Fixes #

1. Add a game-over state variable: This will let us check if the game should still accept input
2. Guard the click handler: Stop executing game logic if the game is already over
3. Only create the reset button once: Check if it exists before creating it, or use the state flag to prevent duplicates
4. Reset the game-over state when restarting: Make sure the game accepts input again after clicking "Play again!"

Modified Code #

Let's update your JavaScript first—here's the fixed version with comments highlighting changes:

// Global DOM variables
const $selectBtn = document.querySelectorAll("[data-selector]");
const $displayUserScore = document.querySelector("#user-score");
const $displayComputerScore = document.querySelector("#computer-score")
const $showScore = document.querySelector("h5");
const $theWinnerIs = document.querySelector('#result-winner');
const $refreshBtnContainer = document.querySelector('#refresh-button-container');
const $icons = ["直", "炙", "✂️"];
// Score vaiables
const choices = ["rock", "paper", "scissors"];
let userScore = 0;
let computerScore = 0;
// ✅ Add game-over state flag
let isGameOver = false;

// For each button of buttons...
$selectBtn.forEach(function(button){
 button.addEventListener("click", function() {
  // ✅ Guard clause: exit if game is already over
  if (isGameOver) return;

  let computerOption = computerRandom() // Store random computer play on var
  const userOption = button.dataset.selector; // userOption is equal to data-selector attribute
  // Invoke functions plays the game and shows final winner.
  playGame(userOption, computerOption);
  theWinner();

  // Add function with results
  function playGame(userOption, computerOption) {
   if (userOption === "rock") {
    if (computerOption === "scissors") {
     userScore++;
     $displayUserScore.innerHTML = userScore;
     $showScore.innerHTML = "The machine chooses " +"<span class=\"icon\">" + $icons[2] + "</span>" + ", you BEAT him!";
    } else if (computerOption === "paper") {
     computerScore++;
     $displayComputerScore.innerHTML = computerScore;
     $showScore.innerHTML = "The machine chooses " +"<span class=\"icon\">" + $icons[1] + "</span>" + ", you LOSE!";
    } else if (userOption === computerOption) {
     $showScore.innerHTML = "Draw!";
    }
   }
   if (userOption === "paper") {
    if (computerOption === "rock") {
     userScore++;
     $displayUserScore.innerHTML = userScore;
     $showScore.innerHTML = "The machine chooses " +"<span class=\"icon\">" + $icons[0] + "</span>" + ", you BEAT him!";
    } else if (computerOption === "scissors") {
     computerScore++;
     $displayComputerScore.innerHTML = computerScore;
     $showScore.innerHTML = "The machine chooses " +"<span class=\"icon\">" + $icons[2] + "</span>" + ", you LOSE!";
    } else if (userOption === computerOption) {
     $showScore.innerHTML = "Draw!";
    }
   }
   if (userOption === "scissors") {
    if (computerOption === "paper") {
     userScore++;
     $displayUserScore.innerHTML = userScore;
     $showScore.innerHTML = "The machine chooses " +"<span class=\"icon\">" + $icons[1] + "</span>" + ", you BEAT him!";
    } else if (computerOption === "rock") {
     computerScore++;
     $displayComputerScore.innerHTML = computerScore;
     $showScore.innerHTML = "The machine chooses " +"<span class=\"icon\">" + $icons[0] + "</span>" + ", you LOSE!";
    } else if (userOption === computerOption) {
     $showScore.innerHTML = "Draw!";
    }
   }
  }

  // Add a winners text function
  function theWinner() {
   if (userScore === 5) {
    $theWinnerIs.innerHTML = "You!";
    // ✅ Mark game as over
    isGameOver = true;
    createResetButton();
   } else if (computerScore === 5) {
    $theWinnerIs.innerHTML = "The machine!";
    // ✅ Mark game as over
    isGameOver = true;
    createResetButton();
   }
  }

  // ✅ Move reset button creation to a separate function to avoid duplicates
  function createResetButton() {
   // Check if button already exists to prevent duplicates
   if ($refreshBtnContainer.querySelector('.refresh-btn')) return;

   const $refreshBtn = document.createElement('button');
   $refreshBtn.appendChild(document.createTextNode("Play again!"));
   $refreshBtn.className = "refresh-btn";
   $refreshBtnContainer.appendChild($refreshBtn);
   $refreshBtn.addEventListener('click', () => {
    userScore = 0;
    computerScore = 0;
    $displayUserScore.innerHTML = userScore;
    $displayComputerScore.innerHTML = computerScore;
    $showScore.innerHTML = "";
    $theWinnerIs.innerHTML = "";
    $refreshBtnContainer.innerHTML= "";
    // ✅ Reset game-over state
    isGameOver = false;
   })
  }
 })
})

// Random computer choice
function computerRandom () {
 const randomNumber = Math.floor(Math.random() * choices.length);
 return choices[randomNumber];
}

Your CSS and HTML can stay the same—no changes needed there!

How This Works #

• The isGameOver flag acts as a gate: when it's true, clicking choice buttons does nothing
• We only create the reset button once per game (by checking if it already exists in the container)
• When you click "Play again!", we reset isGameOver to false so the game accepts input again

This should resolve both the score-keeping issue and the duplicate button problem. Enjoy your fully functional game!

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