骰子游戏的重置功能

Reset Function for dice rolling game

本文关键字：功能游戏更新时间：2023-09-26

为了学习，我已经为这段代码工作了一段时间。我终于让程序工作了，然而当你"掷骰子"时，它只允许掷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链接=https://jsfiddle.net/kkc6tpxs/

我重写并做了您试图做的事情：

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); }