javascript - 如何一次掷一个骰子？-6ren

javascript - 如何一次掷一个骰子？

转载作者：行者123 更新时间：2023-11-30 11:49:08

这就是我目前所拥有的。我对 javascript 很陌生。如何让这些骰子在 div 内按顺序滚动？比如只显示第一个随机数后才显示下一个随机数。

<html>
<style>
.numdiv{
height: 400px;
width: 200px;
border:solid 1px green; 
float: left
}
</style>

<head>
<script>
function rollDice(){
var number1 = document.getElementById("number1");
var number2 = document.getElementById("number2");
var number3 = document.getElementById("number3");
var status = document.getElementById("status");
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 diceTotal = d1 + d2 + d3;

    number1.innerHTML = d1;
    number2.innerHTML = d2;
    number3.innerHTML = d3;
    status.innerHTML = "You rolled "+diceTotal+".";
    if(diceTotal == 15){
        status.innerHTML += "You Win!!";
    }
}
</script>
</head>
<body>
<table>
<tr>
<td>
<div class="numdiv" id="number1">

0</div>
<div class="numdiv"  id="number2">
0</div>
<div class="numdiv"  id="number3">
0</div>
</td>
</tr>
<tr>
<td><button onclick="rollDice()"/>Generate Number</button></td></tr>
<tr>
<td><span id="status">0</span></td></tr>
</table>

</body>


</html>

最佳答案

您可以使用 setTimeout() method延迟函数的执行，以便一次掷一个骰子:

function rollDice(){
  var status = document.getElementById("status");
  var nums = document.querySelectorAll(".numdiv");
  var diceTotal = 0;
  var current;
  
  for (current = 0; current < nums.length; current++) {
    nums[current].innerHTML = "?";
  }
  
  current = 0;
  status.innerHTML = "Rolling...";
  
  function rollNext() {
    currentRoll = Math.floor(Math.random() * 6) + 1;
    nums[current].innerHTML = currentRoll;
    diceTotal += currentRoll;
    current++;
    if (current < nums.length) {
      setTimeout(rollNext, 1000);
    } else {
      status.innerHTML = "You rolled " + diceTotal + ".";
      if(diceTotal == 15){
        status.innerHTML += "You Win!!";
      }    
    }
  }
  setTimeout(rollNext, 1000);
}

.numdiv { height: 30px; width: 30px; border:solid 1px green; float: left; margin: 10px }

<table>
<tr>
  <td>
    <div class="numdiv" id="number1"></div>
    <div class="numdiv"  id="number2"></div>
    <div class="numdiv"  id="number3"></div>
  </td>
</tr>
<tr>
  <td><button onclick="rollDice()"/>Generate Number</button></td></tr>
<tr>
  <td><span id="status">0</span></td>
</tr>
</table>

另请注意，我已经删除了您单独的 number1、number2 和 number3 变量，而是使用单个变量 num 引用所有 .numDiv div 元素的列表。这样您就可以轻松地更改要使用的骰子数量，而根本无需更改 JS(您只需添加或删除 .numDiv 元素)。

编辑:正如我在上面发布的那样，您澄清了您希望用户按下每个骰子的按钮，而不是延迟地自动掷出所有三个骰子。所以我想，也许像下面这样，在函数外部声明的变量中保留一个计数器和总数:

  var statusSpan = document.getElementById("status");
  var nums = document.querySelectorAll(".numdiv");
  var diceTotal;
  var current = 0;

  function rollDice(){
    if (current === 0) { // reset display
      for (var i = 0; i < nums.length; i++)
        nums[i].innerHTML = "?";
      diceTotal = 0;
    }
    
    currentRoll = Math.floor(Math.random() * 6) + 1;
    nums[current].innerHTML = currentRoll;
    diceTotal += currentRoll;
    if (++current < nums.length) {
      statusSpan.innerHTML = "Current total: " + diceTotal + ".";
    } else {
      statusSpan.innerHTML = "You rolled " + diceTotal + ".";
      if(diceTotal == 15){
        statusSpan.innerHTML += "You Win!!";
      }
      current = 0;
    }
  }

.numdiv { height: 30px; width: 30px; border:solid 1px green; float: left; margin: 10px; text-align: center }

<table>
<tr>
  <td>
    <div class="numdiv" id="number1"></div>
    <div class="numdiv"  id="number2"></div>
    <div class="numdiv"  id="number3"></div>
  </td>
</tr>
<tr>
  <td><button onclick="rollDice()">Roll next die</button></td></tr>
<tr>
  <td><span id="status">Ready to roll?</span></td>
</tr>
</table>

关于javascript - 如何一次掷一个骰子？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40010074/

文章推荐： java - 有没有人有在渲染器类之外绘制对象的示例？

文章推荐： swift - 定时器在停用后继续触发

ruby - 掷 n 个骰子后得到特定和的概率。 ruby
用 n 个骰子求滚动总和概率的最佳解决方案是什么？我正在通过查找来解决它平均。标准偏差。 x 以下数字的 z_score> x 上面数字的 z_score 将两者都转换为概率从另一个中减去一个
c++ - 掷 2 个骰子 1000 次
我的教授要求我们编写一个程序: 使用循环模拟一对骰子的滚动一千次(这里我认为 for 循环会很有用)。对于每次迭代，循环需要计算每个值从 2 到 12 的次数(这里我认为 if/else 语句适用)
python - 掷 6 面骰子到距起点 N 格有多少种可能？
我一周前才开始使用 python，现在我被掷骰子的问题困住了。这是我 friend 昨天发给我的问题，我自己也不知道怎么解决。 Imagine you are playing a board game
C 编程百分比帮助 2 个骰子程序掷 10000 次
从头开始，用 2 个骰子重复第 4 部分。这次我们使用 10,000 而不是 1000。每个骰子的数字可以为 1 - 6，因此 2 个骰子的总数必须在 2 - 12 的范围内。您的输出将在 2 –
python-3.x - 掷 S 面 N 个骰子时出现 T 只眼睛的概率
我想计算 n 个骰子的所有眼睛的总和与 s 面(编号从 1 到 s) 等于 t。我的语言是 Python 3。我目前的方法几乎是一种尝试计数的解决方案，只适用于小数字(运行 probability(

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何一次掷一个骰子？