如何一次掷一个骰子
How to roll one dice at a time?
这就是我目前所做的。我是javascript的新手。我如何让这些骰子在骰子中依次滚动?例如,只显示第一个随机数后才显示下一个随机数。
<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()
方法延迟函数的执行,以便每次掷一个骰子:
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>
在rollDice函数之外创建一个计数器变量,从1开始,每次点击它,计数器增加1。然后,您需要将所有数字变量替换为以下内容:
var number = document.getElementById("number" + counter);
我想你知道从这里要去哪里。如果你需要更多的指导,请告诉我!
基于您现有的逻辑,如果您想在用户每次单击时显示1,那么另一种方法是....
var totalIter = 0;//global var which is set to increments on each click
var diceTotal = 0;
function rollDice() {
totalIter = totalIter + 1; //increment by 1
//Existing logic from your script
var ele = document.getElementById("number" + totalIter);
var d1 = Math.floor(Math.random() * 6) + 1;
var status = document.getElementById("status");
diceTotal = diceTotal + d1;
ele.innerHTML = d1;
status.innerHTML = "You rolled " + diceTotal + ".";
if (diceTotal == 15) {
status.innerHTML += "You Win!!";
}
}
相关文章:
- 引导程序崩溃一次只能看到一个
- 有没有一个抽象层,这样我就可以集成一次,然后使用pusher、pubnub或faye
- 一次又一次地在新的和相同的选项卡中打开一个url
- 如何在设定的时间间隔内一次只显示一个图像
- 复选框:一次只允许单击一个复选框
- 使用 JavaScript 一次为一个元素设置多个属性
- 一次显示一个隐藏指令-AngularJS
- 我可以使用JS一次使用JSON数组中的一个字符串吗
- 一次显示一个指令AngularJS
- 运行“;非“;单击另一个函数中的函数仅一次
- 复选框一次选中一个不在gridview中工作
- 复选框一次选中一个不起作用
- 什么'是从对象列表中一次编辑一个对象的正确Angular/Firebase方法
- 每天递减一个变量一次 - Javascript
- 表单上传一个文件一次,但当我再次上传同一文件时,它不适用于同一文件
- 如何只运行一个函数一次,然后运行另一个依赖于相同元素的函数
- 对不同文件中同一个类的所有字段应用一个函数一次
- .一个事件一次又一次地被解雇
- 将ng repeat中的值设置为另一个值一次(仅在页面加载时)
- 让trigger()只运行一个函数一次