骰子游戏开发求助：如何将回合分数存入数组并实现分数展示与汇总

Let's walk through adding the "Done for now" functionality, round score tracking, and total score calculation step by step:

1. Update Your HTML First #

First, we need to add an ID to the "Done for now" button so we can hook up its click event, plus add elements to display round scores and the total score:

<div class="round">
  <h1>The endless road</h1>
  <button id="throwDice">Throw Dice</button>
  <button id="doneTurn">Done for now</button> <!-- Added ID for event binding -->
  <div id="dice" class="dice"></div>
  <h2>Current Round Score: <span id="print">0</span></h2> <!-- Clarified label for clarity -->
  <h2>Total Score: <span id="totalScore">0</span></h2> <!-- New element for total score -->
  <p id="print2"></p>
  <div id="roundHistory">
    <h3>Round Scores:</h3>
    <ul id="roundList"></ul> <!-- List to display each completed round's score -->
  </div>
</div>

2. Modify Your JavaScript #

We'll add new variables to track round scores and total score, implement the "Done for now" click handler, and tweak existing functions to fit the updated logic:

var currentPoints = 0; // Renamed for clarity (avoids confusion with total score)
var roundScores = [];
var totalScore = 0;
var startBtn, doneBtn, diceEl, currentScoreEl, totalScoreEl, messageEl, roundListEl;

window.onload = run;

function $(id) { 
  return document.getElementById(id); 
}

function run() {
  // Initialize all DOM elements we need
  startBtn = $("throwDice");
  doneBtn = $("doneTurn");
  diceEl = $("dice");
  currentScoreEl = $("print");
  totalScoreEl = $("totalScore");
  messageEl = $("print2");
  roundListEl = $("roundList");

  // Attach click events to buttons
  startBtn.onclick = throwDice;
  doneBtn.onclick = endCurrentRound;
  
  // Set initial score displays
  updateScoreDisplays();
}

function throwDice() {
  var diceRoll = Math.floor(Math.random() * 6) + 1;
  // Fixed your original typo: updated dice element instead of the roll number variable
  diceEl.innerHTML = '<img width="20%" src="' + diceRoll + '.jpg">';
  updateCurrentScore(diceRoll);
}

function updateCurrentScore(value) {
  if (value === 1) {
    // Rolled a 1: reset current round score and show feedback
    currentPoints = 0;
    messageEl.innerHTML = "Oops! You rolled a 1 — this round's score is lost!";
  } else {
    // Add roll value to current round score
    currentPoints += value;
    messageEl.innerHTML = "";
  }
  updateScoreDisplays();
}

function endCurrentRound() {
  if (currentPoints === 0) {
    messageEl.innerHTML = "No score to save this round!";
    return;
  }

  // Save current round score to history
  roundScores.push(currentPoints);
  // Add to total score
  totalScore += currentPoints;
  // Reset current round score for next turn
  currentPoints = 0;

  // Update the round history list
  var listItem = document.createElement("li");
  listItem.textContent = `Round ${roundScores.length}: ${roundScores[roundScores.length - 1]} points`;
  roundListEl.appendChild(listItem);

  // Check if total score reached 100 (game win condition)
  if (totalScore >= 100) {
    messageEl.innerHTML = `🎉 Congratulations! You reached ${totalScore} points and won the game!`;
    // Disable buttons once game is over
    startBtn.disabled = true;
    doneBtn.disabled = true;
  } else {
    messageEl.innerHTML = `Round saved! Total score is now ${totalScore}`;
  }

  updateScoreDisplays();
}

function updateScoreDisplays() {
  currentScoreEl.textContent = currentPoints;
  totalScoreEl.textContent = totalScore;
}

Key Changes Explained #

• Clarified Variable Names: Renamed points to currentPoints to avoid mixing up round-specific and total scores
• Added State Tracking: roundScores array stores each completed round's score, totalScore tracks the running total
• Fixed Dice Image Bug: Your original code tried to set HTML on the roll number variable instead of the dice element
• End Round Logic: The endCurrentRound function saves valid scores, updates totals, checks for a win, and resets the current round
• User Feedback: Added clear messages for rolling a 1, saving a round, winning, or trying to save a 0-point round
• Game End Handling: Disables buttons once the player reaches 100 points to prevent further actions

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