掷骰子游戏的重置功能

Question

出于学习目的，我在这段代码上工作了一段时间。我终于让程序运行了，但是当你 "roll the dice" 时，它只允许掷骰子 1 次；如果您想第二次掷骰子，您必须刷新屏幕。

我正在尝试为该程序构建一个重置功能，这样我就可以在不刷新屏幕的情况下随意掷骰子。

我已经构建了重置功能，但它不起作用...它清除了 DIV 的，但不允许程序再次执行。

有人可以帮帮我吗？

*我是Javascript的半菜鸟，我正在制作这样的程序来练习我的技能。

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Dice Rolling</title>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <header>
    <h1>Roll the Dice!</h1>
    <h2>By: Jeff Ward</h2>
  </header>
  <h3>Setup your Dice!</h3>
  <div id="left">
    <form id="numberOfDiceSelection">
      Number Of Dice Used:
      <br>
      <input id="numberOfDice" type="text" name="numberOfDice">
    </form>
  </div>
  <div id="right">
    <form id="diceSidesSelection">
      Number of sides on each dice:
      <br>
      <input id="diceSides" type="text" name="diceSides">
    </form>
  </div>
  <button type="button" onclick="roll()">Roll the Dice!</button>
  <button type="button" onclick="reset()">Reset Roll</button>


  <div id="output">

  </div>
  <div id="output1">

  </div>
  <script src="js/script.js"></script>

</body>

</html>

JavaScript:

function roll() {
  var text = "";
  var sides = +document.getElementById("diceSides").value;
  var dice = +document.getElementById("numberOfDice").value;
  var rolls = [];

  //  --------Ensures both Numbers are Intergers-----------

  if (isNaN(sides) || isNaN(dice)) {
    alert("Both arguments must be numbers.");
  }
  //  --------Loop to Print out Rolls-----------
  var counter = 1;
  do {
    roll = Math.floor(Math.random() * sides) + 1;
    text += "<h4>You rolled a " + roll + "! ----- with dice number " + counter + "</h4>";
    counter++;
    rolls.push(roll);

  }
  while (counter <= dice)
  document.getElementById("output").innerHTML = text;

  //  --------Double Determination-----------
  var cache = {};
  var results = [];
  for (var i = 0, len = rolls.length; i < len; i++) {
    if (cache[rolls[i]] === true) {
      results.push(rolls[i]);
    } else {
      cache[rolls[i]] = true;
    }
    //  --------Print amount of Doubles to Document-----------
  }
  if (results.length === 0) {} else {
    document.getElementById("output1").innerHTML = "<h5> You rolled " + results.length + " doubles</h5>";
  }
}

//  --------RESET FUNCTION-----------
function reset() {
  document.getElementById("output1").innerHTML = "";
  document.getElementById("output").innerHTML = "";
  document.getElementById("diceSides").value = "";
  document.getElementById("numberOfDice").value = "";
  text = "";
  rolls = [];
}

谢谢！！

JSFiddle Link = https://jsfiddle.net/kkc6tpxs/

Answer 1

我重写并做了你想做的事情：

https://jsfiddle.net/n8oesvoo/

var log = logger('output'),
    rollBtn = getById('roll'),
    resetBtn = getById('reset'),
    nDices = getById('numofdices'),
    nSides = getById('numofsides'),
    dices = null,
    sides = null,
    rolls = [],
    doubles=0;

rollBtn.addEventListener('click',rollHandler);
resetBtn.addEventListener('click', resetHandler);


function rollHandler() {
    resetView();
    sides = nSides.value;
    dices = nDices.value;
    doubles=0;
    rolls=[];

    if(validateInput()) {
        log('invalid input');
        return;
    }
    //rolling simulation
    var rolled;
    while (dices--) {
        rolled = Math.ceil(Math.random()*sides);
        log('For Dice #'+(dices+1)+' Your Rolled: '+ rolled  +'!');
        rolls.push(rolled);
    }

    //finding doubles
    //first sort: you can use any way to sort doesnt matter
    rolls.sort(function(a,b){
      return (a>b?1:(a<b)?0:-1);
    });

    for (var i =0; i < rolls.length; i++) {
        if (rolls[i] == rolls[i+1]) {
            doubles++;
            i++;
        }
    }
    if (doubles>0) log("You rolled " + doubles + " doubles");

}

function resetHandler(){
    resetView();
    nDices.value = nSides.value = '';
}


function resetView() {
    getById('output').innerText = '';
}


function validateInput(){
    return (isNaN(sides) || sides == '' || isNaN(dices) || dices == '');
}


function logger(x) { var output = getById(x); 
    return function(text){
        output.innerText += text + '\n';
};}

function getById(x){ return document.getElementById(x); }

掷骰子游戏的重置功能

Reset Function for dice rolling game

javascript

html

arrays

reset

dice