简化 JavaScript 个变量

Question

以下代码非常适合我正在做的事情，但我想知道是否有办法使用数组截断它。

function rollDice() {
   var d1 = Math.floor(Math.random() * 6) + 1;
   var d2 = Math.floor(Math.random() * 6) + 1;
   var d3 = Math.floor(Math.random() * 6) + 1;
   var d4 = Math.floor(Math.random() * 6) + 1;
   var diceTotal = d1 + d2 + d3 + d4 - Math.min(d1, d2, d3, d4);
   var strengthTotal = diceTotal;
   document.getElementById("strengthTotal").innerHTML = diceTotal;
}

我试过将所有变量放入一个数组中，但终究无法触发函数。任何能够截断此代码的帮助将不胜感激，因为将有 7 个不同的块，所有块都有 4 个变量，这些块将同时被触发。我可以像 7 种不同的统计数据（即 strengthTotal”）一样继续这个功能，但是对于应该非常简单的东西来说，这个块会很大。

我不知道我是否真的清楚我正在尝试做的事情。我发布了完整的 HTML、JavaScript 和 CSS 代码，以便你们都可以看到我到目前为止的内容。（当您看到完整的 JScript 时，您可能会大笑、哭泣、畏缩或出现以上所有情况）正如我所说，我从大约 15 年前就有了基本的理解，并且已经有一段时间没有真正使用过这样的代码了。这样你就可以看到我所看到的。就这样吧。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="dice.css">
  <script src="Script2.js"></script>
</head>
<body>
  <h2>Testing Differnet Types of Rolls</h2>
  <p> 4D6 Totaling 3 best rolls</p>   
  <button onclick="rollDice()">Roll Dice</button><br>
  <div>
    <p>Strength</p>
    <div id="strengthTotal" class="dice">0</div>
  </div>
  <div>
    <p>Dexterity</p>
    <div id="dexterityTotal" class="dice">0</div>
  </div>
  <div>
    <p>Constitution</p>
    <div id="constitutionTotal" class="dice">0</div>
  </div>
  <div>
    <p>Intelligence</p>
    <div id="intelligenceTotal" class="dice">0</div>
  </div>
  <div>
    <p>Wisdom</p>
    <div id="wisdomTotal" class="dice">0</div>
  </div>
  <div>
    <p>Charisma</p>
    <div id="charismaTotal" class="dice">0</div>
  </div>
</body>
</html>

JavaScript:

function rollDice() {
  var d1 = Math.floor(Math.random() * 6) + 1;
  var d2 = Math.floor(Math.random() * 6) + 1;
  var  3 = Math.floor(Math.random() * 6) + 1;
  var d4 = Math.floor(Math.random() * 6) + 1;
  var diceTotal = d1 + d2 + d3 + d4 - Math.min(d1, d2, d3, d4);
  document.getElementById("strengthTotal").innerHTML = diceTotal;
  var  1 = Math.floor(Math.random() * 6) + 1;
  var d2 = Math.floor(Math.random() * 6) + 1;
  var d3 = Math.floor(Math.random() * 6) + 1;
  var d4 = Math.floor(Math.random() * 6) + 1;
  var diceTotal = d1 + d2 + d3 + d4 - Math.min(d1, d2, d3, d4);
  document.getElementById("dexterityTotal").innerHTML = diceTotal;
  var d1 = Math.floor(Math.random() * 6) + 1;
  var d2 = Math.floor(Math.random() * 6) + 1;
  var d3 = Math.floor(Math.random() * 6) + 1;
  var d4 = Math.floor(Math.random() * 6) + 1;
  var diceTotal = d1 + d2 + d3 + d4 - Math.min(d1, d2, d3, d4);
  document.getElementById("constitutionTotal").innerHTML = diceTotal;
  var d1 = Math.floor(Math.random() * 6) + 1;
  var d2 = Math.floor(Math.random() * 6) + 1;
  var d3 = Math.floor(Math.random() * 6) + 1;
  var d4 = Math.floor(Math.random() * 6) + 1;
  var diceTotal = d1 + d2 + d3 + d4 - Math.min(d1, d2, d3, d4);
  document.getElementById("intelligenceTotal").innerHTML = diceTotal;
  var d1 = Math.floor(Math.random() * 6) + 1;
  var d2 = Math.floor(Math.random() * 6) + 1;
  var d3 = Math.floor(Math.random() * 6) + 1;
  var d4 = Math.floor(Math.random() * 6) + 1;
  var diceTotal = d1 + d2 + d3 + d4 - Math.min(d1, d2, d3, d4);
  document.getElementById("wisdomTotal").innerHTML = diceTotal;
  var d1 = Math.floor(Math.random() * 6) + 1;
  var d2 = Math.floor(Math.random() * 6) + 1;
  var d3 = Math.floor(Math.random() * 6) + 1;
  var d4 = Math.floor(Math.random() * 6) + 1;
  var diceTotal = d1 + d2 + d3 + d4 - Math.min(d1, d2, d3, d4);
document.getElementById("charismaTotal").innerHTML = diceTotal;
  }

最后 - dice.css:

div.dice {
  width: 32px;
  background: #f5f5f5;
  border: #999 1px solid; 
  padding: 10px;
  font-size: 24px; 
  text-align: center; 
  margin: 5px; 
}

Answer 1

只要您不止一次获得相同的代码，您就有机会进行重构。

这将以更简洁的方式实现您的代码所需的内容。

var attributes = null;

window.addEventListener("DOMContentLoaded", function(){
    document.getElementById("btnGo").addEventListener("click", rollDice);
    attributes = document.querySelectorAll(".dice");
});  

function rollDice() {
  
  // Loop over each characteristic DOM element to get a dice value for it
  for(var e = 0; e < attributes.length; ++e){
     
   var diceTotal = 0, d = [], roll = null;
    
   // roll the dice 4 times
   for(var i = 0; i < 4; ++i){
         roll = getRandom();  // Get the random die value
         diceTotal += roll;   // Add to previous total
         d.push(roll);        // Put current roll into array of roles
   }

   // After all rolls, subtract the lowest roll from the total
   // Math.min is great, but it expects individual values passed as 
   // arguments, not a single array. So, by calling the Math.min function
   // via the .apply() method, we supply the object to use for "this"
   // (Math) and then we supply an array to use for argument values.
   diceTotal -= Math.min.apply(Math, d);

   // These are only here to verify values: ************
   /*
   alert("Array contains: " + d);
   alert("Min value is: " + Math.min.apply(Math, d));
   alert("Dice total (minus min) is: " + diceTotal);
   */
   // ***************************************************

   // Place result in the current DOM element 
   attributes[e].innerHTML = diceTotal;
    
  }
}

function getRandom(){
   return Math.floor(Math.random() * 6) + 1;
}

div.dice {
  width: 32px;
  background: #f5f5f5;
  border: #999 1px solid; 
  padding: 10px;
  font-size: 24px; 
  text-align: center; 
  margin: 5px; 
}

<h2>Testing Differnet Types of Rolls</h2>
  <p> 4D6 Totaling 3 best rolls</p>   
  <button id="btnGo">Roll Dice</button><br>
  <div>
    <p>Strength</p>
    <div id="strengthTotal" class="dice">0</div>
  </div>
  <div>
    <p>Dexterity</p>
    <div id="dexterityTotal" class="dice">0</div>
  </div>
  <div>
    <p>Constitution</p>
    <div id="constitutionTotal" class="dice">0</div>
  </div>
  <div>
    <p>Intelligence</p>
    <div id="intelligenceTotal" class="dice">0</div>
  </div>
  <div>
    <p>Wisdom</p>
    <div id="wisdomTotal" class="dice">0</div>
  </div>
  <div>
    <p>Charisma</p>
    <div id="charismaTotal" class="dice">0</div>
  </div>

Answer 2

function rollDice(aAmountOfDices) {
  var diceTotal = 0;
  for (i=0; i< aAmountOfDices; i++) {
      var d1 = getRandomNumber();
      var d2 = getRandomNumber();
      var d3 = getRandomNumber();
      var d4 = getRandomNumber();
      var thisDiceTotal = d1 + d2 + d3 + d4 - Math.min(d1, d2, d3, d4);
      diceTotal = diceTotal + thisDiceTotal;
  }
  return diceTotal;
}

function getRandomNumber() {
  return Math.floor(Math.random() * 6) + 1;
}

diceTotal = rollDice(6);
document.getElementById("strengthTotal").innerHTML = diceTotal;

这应该可以解决问题

Answer 3

由于我的声誉，我无法发表评论。

你说：“ Roll Dice 调用第二个函数还有什么需要做的吗？ – amfilipiak 1 分钟前 "

<button></button> 仅在表单内有效。我建议给按钮一个 ID，然后附加一个事件侦听器。

document.getElementById('myButton').addEventListener('click', rollDice());

Answer 4

根据发布的代码，这是求和然后丢弃最小骰子值的正确代码。

function rollDice() {
  var rnd = 0;
  var minDice = 7;
  var diceTotal = 0;
  for(var i = 0; i < 4; ++i){
    rnd = getRandom(); 
    diceTotal += rnd;
    minDice = (rnd < minDice) ? rnd : minDice;
  }
  diceTotal -= minDice;

  // Not sure what your var strengthTotal = diceTotal was for
  document.getElementById("strengthTotal").innerHTML = diceTotal;
}

function getRandom(){
  return Math.floor(Math.random() * 6) + 1;
}

这个代码

document.getElementById("strengthTotal").innerHTML = diceTotal;

只有在你有类似

的情况下才能工作

<div id="strengthTotal"></div>

或

<a id="strengthTotal"></a>

还是

<span id="strengthTotal"></span>

即，如果您有一个 HTML 容器对象来接收值。

要执行代码，您需要如下内容：

<a href="javascript:void(0)" onclick="roolDice();">Roll dice</a>

Answer 5

function rollDice(sides) {
  sides = sides || 6;
  return Math.floor(Math.random() * sides) + 1;
}

function rollDices(dices, sides) {
  var rolls=[], i;
  for (i = 0; i < dices; i++) {
    rolls.push(rollDice(sides));
  }
  rolls.sort().shift();
  return rolls.reduce(function(a, b) {
    return a + b;
  }, 0);
}

要运行点击一个按钮，你可以这样做：

window.addEventListener('DOMContentLoaded', function() {
  document.getElementById('roll').addEventListener('click', function() {
    var strengthTotal = rollDices(4);
    document.getElementById('strengthTotal').innerHTML = strengthTotal;
    // or
    var roll3d4 = rollDices(3, 4);
  });
});

<button id="roll">Roll</button>
<span id="strengthTotal"></span>

简化 JavaScript 个变量

Simplifing JavaScript Variables

javascript

arrays

var