JavaScript猜拳游戏开发问题：留存轮次信息与全局胜负提示

Hey there! Let's tackle those two issues you're facing to wrap up your game nicely. I'll break down each fix with clear code changes and explanations so you can follow along easily.

1. Keeping the Required Wins Visible Throughout the Game #

Right now, when you click a game button (Paper/Scissors/Stone), you're overwriting the output element's HTML entirely, which makes the required wins message disappear. Here's how to fix that:

First, add a global variable to store the number of required wins—this lets us reference it anywhere in the code:

var output = document.getElementById("output");
var result = document.getElementById("result");
var countUser = 0;
var countComputer = 0;
var requiredWins; // Add this global variable to track required wins
var button = document.getElementById("newgame");

Update your NewGame button click handler to set this variable and reset the game state properly:

button.addEventListener("click", function() {
  requiredWins = parseInt(window.prompt("How many games you want to play?"));
  // Reset scores and re-enable game buttons for a new game
  countUser = 0;
  countComputer = 0;
  document.querySelectorAll(".game header").forEach(el => {
    el.classList.remove("header-special");
    el.style.pointerEvents = "auto"; // Re-enable clicks on game buttons
  });
  output.innerHTML = `You must win ${requiredWins} rounds to win the game! Choose a button to start the game!`;
  result.innerHTML = `User: ${countUser} | Computer: ${countComputer}`;
});

Now, modify each game button click handler to prepend the required wins message instead of overwriting it. For example, the Paper button:

var paper = document.querySelector("#paper header");
paper.addEventListener("click", function() {
  paper.classList.toggle("header-special");
  userChoice = "paper";
  // Start with the required wins message, then add the current choice
  output.innerHTML = `You must win ${requiredWins} rounds to win the game!<br>`;
  output.innerHTML += "You Chose Paper";
  compareWithComputer("paper");
});

Repeat this pattern for the Scissors and Stone buttons—just copy that first line of output update into each handler.

2. Displaying the Global Win/Lose Message When the Game Ends #

We need to check after each round if either the user or computer has hit the required number of wins. Here's how to add that logic:

First, update the compareWithComputer function to call a new check after updating scores:

function compareWithComputer(userChoice) {
  var computerChoice = Math.floor(Math.random() * 3 + 1);
  if (computerChoice == 1) {
    computerChoice = "stone";
  } else if (computerChoice == 2) {
    computerChoice = "paper";
  } else {
    computerChoice = "scissors";
  }
  // Get round result and update display
  var results = compare(userChoice, computerChoice);
  output.innerHTML += `. Computer Chose ${computerChoice} ${results}`;
  result.innerHTML = `User: ${countUser} | Computer: ${countComputer}`;

  // Check if the game has ended
  checkGameEnd();
}

Add two new functions: one to check for game end conditions, and another to disable game buttons once the game is over:

// Check if either player has reached required wins
function checkGameEnd() {
  if (countUser === requiredWins) {
    output.innerHTML += `<br><strong>YOU WON THE ENTIRE GAME!!!</strong>`;
    disableGameButtons();
  } else if (countComputer === requiredWins) {
    output.innerHTML += `<br><strong>COMPUTER WON THE ENTIRE GAME!!!</strong>`;
    disableGameButtons();
  }
}

// Disable game buttons to prevent further play after game ends
function disableGameButtons() {
  document.querySelectorAll(".game header").forEach(el => {
    el.style.pointerEvents = "none";
  });
}

Full Modified JavaScript Code #

Here's the complete updated JS code with all fixes included:

// User choice
var output = document.getElementById("output");
var result = document.getElementById("result");
var countUser = 0;
var countComputer = 0;
var requiredWins; // Track required wins globally
var button = document.getElementById("newgame");

button.addEventListener("click", function() {
  requiredWins = parseInt(window.prompt("How many games you want to play?"));
  // Reset game state for new game
  countUser = 0;
  countComputer = 0;
  document.querySelectorAll(".game header").forEach(el => {
    el.classList.remove("header-special");
    el.style.pointerEvents = "auto";
  });
  output.innerHTML = `You must win ${requiredWins} rounds to win the game! Choose a button to start the game!`;
  result.innerHTML = `User: ${countUser} | Computer: ${countComputer}`;
});

var paper = document.querySelector("#paper header");
paper.addEventListener("click", function() {
  paper.classList.toggle("header-special");
  userChoice = "paper";
  output.innerHTML = `You must win ${requiredWins} rounds to win the game!<br>`;
  output.innerHTML += "You Chose Paper";
  compareWithComputer("paper");
});

var scissors = document.querySelector("#scissors header");
scissors.addEventListener("click", function() {
  scissors.classList.toggle("header-special");
  userChoice = "scissors";
  output.innerHTML = `You must win ${requiredWins} rounds to win the game!<br>`;
  output.innerHTML += "You Chose Scissors";
  compareWithComputer("scissors");
});

var stone = document.querySelector("#stone header");
stone.addEventListener("click", function() {
  stone.classList.toggle("header-special");
  userChoice = "stone";
  output.innerHTML = `You must win ${requiredWins} rounds to win the game!<br>`;
  output.innerHTML += "You Chose Stone";
  compareWithComputer("stone");
});

// Computer choice
function compareWithComputer(userChoice) {
  var computerChoice = Math.floor(Math.random() * 3 + 1);
  if (computerChoice == 1) {
    computerChoice = "stone";
  } else if (computerChoice == 2) {
    computerChoice = "paper";
  } else {
    computerChoice = "scissors";
  }
  // Compare choices and get result
  var results = compare(userChoice, computerChoice);
  output.innerHTML += `. Computer Chose ${computerChoice} ${results}`;
  result.innerHTML = `User: ${countUser} | Computer: ${countComputer}`;

  // Check if game has ended
  checkGameEnd();
}

// Compare userChoice and computerChoice
var compare = function(choice1, choice2) {
  if (choice1 === choice2) {
    return "It's a tie!";
  }
  if (choice1 === "stone") {
    if (choice2 === "scissors") {
      // stone wins
      countUser++;
      return "You win!";
    } else {
      // paper wins
      countComputer++;
      return "You lose! Try again.";
    }
  }
  if (choice1 === "paper") {
    if (choice2 === "stone") {
      // paper wins
      countUser++;
      return "You win!";
    } else {
      // scissors wins
      countComputer++;
      return "You lose! Try again.";
    }
  }
  if (choice1 === "scissors") {
    if (choice2 === "stone") {
      // stone wins
      countComputer++;
      return "You lose! Try again.";
    } else {
      // scissors wins
      countUser++;
      return "You win!";
    }
  }
};

// Check if game is over and display global message
function checkGameEnd() {
  if (countUser === requiredWins) {
    output.innerHTML += `<br><strong>YOU WON THE ENTIRE GAME!!!</strong>`;
    disableGameButtons();
  } else if (countComputer === requiredWins) {
    output.innerHTML += `<br><strong>COMPUTER WON THE ENTIRE GAME!!!</strong>`;
    disableGameButtons();
  }
}

// Disable game buttons when game ends
function disableGameButtons() {
  document.querySelectorAll(".game header").forEach(el => {
    el.style.pointerEvents = "none";
  });
}

Quick Extra Touches #

• I cleaned up the score display in result to make it more readable (added labels and a separator).
• When starting a new game, we reset scores and re-enable game buttons so users can play again without refreshing.
• The global win/lose message uses <strong> to stand out—you can add CSS styles to make it even more prominent if you want!

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