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

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

你说：＆＃34; 掷骰子还有什么需要做才能调用第二个函数吗？ - amfilipiak 1分钟前＆＃34;

<button></button>仅适用于表单。我建议给按钮一个id，然后附加一个事件监听器。

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

Answer 3

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

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 4

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>

Answer 5

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;

这应该可以解决问题

简化JavaScript变量

5 个答案: