javascript - 如何将分数插入数组，然后显示

Question

我正在尝试制作一个骰子游戏，每个参与者的目标是尽快收集分数以超过 100。每个参与者可以根据需要多次 throw 骰子并添加分数，但达到了如果掷出一个，则特定游戏中的分数就会减少。例如，如果您在一场比赛中获得 15 分并及时停止，则可以将这些分数进一步带到第二轮。这些分数不会在后面的回合中丢失，因此会包含在摘要中。

我已经成功:

• 编写显示骰子图像并对当前分数求和的代码(图像 = 1.png、2.png 等)。
• 当玩家掷出 1 分时，将当前得分重置为 0。

我需要帮助的是如何编写代码来激活“现在完成”按钮并获取该值并将其插入数组(？？？)，然后清除下一轮的分数 -> 然后在网站上显示分数，而其他回合继续进行。它还应该总结每轮的得分和 throw 次数(从第一轮到 100)。

这是我的代码:

var points = 0;

var start, dice, print;

window.onload = run;

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

function run() {
  start = $("throwDice");
  dice = $("dice");
  print = $("print");
  start.onclick = throwDice;
}

function throwDice() {
  var throwD = Math.floor(Math.random() * 6) + 1;
  throwD.innerHTML = '<img width="20%" src="' + throwD + '.jpg">';

  add(throwD);
}

function add(value) {

  points += value;

  if (value == 1) {
    points = 0;
    $("print2").innerHTML = "GAME OVER"
  } else {
    $("print2").innerHTML = "";
    $("print").innerHTML = points;
  }
}

<div class="round">
  <h1>The endless road</h1>
  <button id="throwDice">Throw Dice</button> <button>Done for now</button>
  <div id="dice" class="dice"></div>
  <h2 id="print"></h2>
  <p id="print2"></p>
</div>

Answer 1

基本上，您只需向其回调函数的“立即完成”按钮添加另一个点击事件监听器

• 将当前点推送到数组
• 将点数重置为 0
• 更新屏幕上的文本元素

类似于:

var points = 0;
var pointsArray = new Array();
var start, dice, print;


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

function run() {
  start = $("throwDice");
  dice = $("dice");
  print = $("print");
  start.onclick = throwDice;
  done = $("done");
  done.onclick = stopRound;
}

function stopRound() {
  pointsArray.push(points);
  points = 0;
  $("print").innerHTML = points;
  $("print3").innerHTML = pointsArray;
}

function throwDice() {
  var throwD = Math.floor(Math.random() * 6) + 1;
  throwD.innerHTML = '<img width="20%" src="' + throwD + '.jpg">';

  add(throwD);
}

function add(value) {

  points += value;

  if (value == 1) {
    points = 0;
    $("print2").innerHTML = "GAME OVER"
  } else {
    $("print2").innerHTML = "";
    $("print").innerHTML = points;
  }
}
run();

<div class="round">
  <h1>The endless road</h1>
  <button id="throwDice">Throw Dice</button> <button id="done">Done for now</button>
  <div id="dice" class="dice"></div>
  <p id="print3" style="float:right;"></p>
  <h2 id="print"></h2>
  <p id="print2"></p>

</div>