如何为每个骰子随机化一个不同的数字?

时间:2014-02-15 14:03:10

标签: javascript html

我试图制作一个游戏的迷你版本,只是为了学习一些循环和if语句。这是我走了多远。现在我有点陷入困境,因为:

1)当我点击滚动骰子按钮时,它会在所有6个骰子上显示相同的数字。我如何制作它,以便为每个骰子随机化一个不同的数字?

2)我只能点击滚动骰子按钮一次,如果我想再滚动一次,我必须重新加载页面才能这样做。那是为什么?

这是我的HTML:

<!DOCTYPE html>
<html>
<head>
<title></title>

<link rel="stylesheet" type="text/css" href="mycss.css">
<script src="myjavascript2.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>


<button id="button" onclick="rolldices()">Roll dices</button>

<span id="dice1">0</span>
<span id="dice2">0</span>
<span id="dice3">0</span>
<span id="dice4">0</span>
<span id="dice5">0</span>
<span id="dice6">0</span>


<br><br><br>
<div id="container">
<div id="one">1</div>           <span>0</span>
<div id="two">2</div>           <span>0</span>
<div id="three">3</div>         <span>0</span>
<div id="four">4</div>          <span>0</span>
<div id="five">5</div>          <span>0</span>
<div id="six">6</div>           <span>0</span>
<div id="total">Total</div>     <span>0</span>
</div>


</body>
</html>

这是我的javascript:

var numbers = [ '1', '2', '3', '4', '5', '6' ];

var dices = [ 'dice1', 'dice2', 'dice3', 'dice4', 'dice5', 'dice6' ];

var dice_value = Math.floor((Math.random()*numbers.length));

function rolldices() {

for (var diceindex=0; diceindex<dices.length; diceindex++) {

document.getElementById("dice" + (diceindex + 1)).innerHTML=numbers[dice_value];

}

} // end of rolldices()

我在这里创建了一个小提琴:http://jsfiddle.net/h26DD/

1 个答案:

答案 0 :(得分:2)

您需要将var dice_value = Math.floor((Math.random()*numbers.length));放在循环中,否则它将一直相同。