掷骰子直到达到数字
[英]Dice roll until number is reached
问题描述
I'm learning javascript and my project requires me to build a webpage that has two dice images, an input box, and a button. 
我正在学习javascript，我的项目要求我建立一个有两个骰子图像，一个输入框和一个按钮的网页。 After an input is given the button can be pushed and the javascript will tell you how many rolls it took to get that value and the dice images will display that value. 在给出输入后，可以按下按钮，javascript将告诉您获取该值所需的卷数，并且骰子图像将显示该值。 My trouble is that I can't get the dice to display the total and I'm not getting the correct number of rolls. 我的麻烦是，我无法显示总数，我没有得到正确的数量。 It always says that it took 1 roll. 它总是说需要1卷。
//define a Dice object, properties and methods var Dice = { sides: 6, rollDie: function(diceElement) { var rolledValue = Math.floor(Math.random() * this.sides) + 1; var diceImage = this.getURL(rolledValue); diceElement.attr("src", diceImage); }, rollDice: function() { var diceTotal = 0; diceTotal += this.rollDie($('#dice1')); diceTotal += this.rollDie($('#dice2')); return diceTotal; }, rollDoubles: function(n) { var die1 = 0; var die2 = 0; var numRolls = 0; do { die1 = this.rollDie($('#dice1')); die2 = this.rollDie($('#dice2')); numRolls++; } while(!(die1 == die2 && die1 == n)); return numRolls; }, URL_prefix: "http://dave-reed.com/book3e/Images/", getURL: function(n) { //return the URL for an n-dot die return this.URL_prefix + "die" + n + ".gif"; } }; //top-level function function roll_number(n) { var die1 = Math.floor(Math.random() * Dice.sides) + 1; var die2 = Math.floor(Math.random() * Dice.sides) + 1; var dicetotal = die1 + die2; var numRolls = 0; //roll two dice until you hit n do { die1 = Dice.rollDie($('#dice1')); die2 = Dice.rollDie($('#dice2')); numRolls++; } while(dicetotal == n); return numRolls; //return the number of rolls } function getRoll () { var number = parseFloat($("#num").val()); var numRolls = roll_number(number); $("#time").text( "You rolled " + number + " in " + numRolls + " rolls"); } $(document).ready(function(){ $("#R").on("click", getRoll); //$("#roll").on("click", Dice.getURL); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!Doctype html> <html> <head> <title>Dice-namic</title> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="Dice-namic.js"></script> </head> <body> <h2>Roll Number</h2> <img id="dice1" src="http://www.dave-reed.com/book3e/Images/die1.gif"> <img id="dice2" src="http://www.dave-reed.com/book3e/Images/die1.gif"> <p>Enter target number:</p> <input type="text" id="num"> <br> <br> <button id="R">Roll 'em!</button> <br> <br> <div id="time">Test</div> </body> </html>
3 个解决方案
解决方案1
0 2016-03-05 04:05:48
the problem is in roll_number : 问题出在roll_number ：
function roll_number(n) {
var die1 = Math.floor(Math.random() * Dice.sides) + 1;
var die2 = Math.floor(Math.random() * Dice.sides) + 1;
var dicetotal = die1 + die2;
var numRolls = 0;
do {
die1 = Dice.rollDie($('#dice1'));
die2 = Dice.rollDie($('#dice2'));
dicetotal = die1 + die2; // and recalculate dicetotal here
numRolls++;
} while(dicetotal == n); // this should be while(dicetotal != n)
return numRolls;
}
also in Dice.rollDie you should return rolledValue at the end. 同样在Dice.rollDie你最后应该return rolledValue 。
解决方案2
0 已采纳 2016-03-05 04:10:09
//define a Dice object, properties and methods var Dice = { sides: 6, rollDie: function(diceElement) { var rolledValue = Math.floor(Math.random() * this.sides) + 1; var diceImage = this.getURL(rolledValue); diceElement.attr("src", diceImage); return rolledValue;//added this line; }, rollDice: function() { var diceTotal = 0; diceTotal += this.rollDie($('#dice1')); diceTotal += this.rollDie($('#dice2')); return diceTotal; }, rollDoubles: function(n) { var die1 = 0; var die2 = 0; var numRolls = 0; do { die1 = this.rollDie($('#dice1')); die2 = this.rollDie($('#dice2')); numRolls++; } while(!(die1 == die2 && die1 == n)); return numRolls; }, URL_prefix: "http://dave-reed.com/book3e/Images/", getURL: function(n) { //return the URL for an n-dot die return this.URL_prefix + "die" + n + ".gif"; } }; //top-level function function roll_number(n) { var die1 = Math.floor(Math.random() * Dice.sides) + 1; var die2 = Math.floor(Math.random() * Dice.sides) + 1; var dicetotal = die1 + die2; var numRolls = 0; //roll two dice until you hit n do { die1 = Dice.rollDie($('#dice1')); die2 = Dice.rollDie($('#dice2')); dicetotal=die1+die2;//added this line numRolls++; } while(dicetotal != n); //modified return numRolls; //return the number of rolls } function getRoll () { var number = parseFloat($("#num").val()); var numRolls = roll_number(number); $("#time").text( "You rolled " + number + " in " + numRolls + " rolls"); } $(document).ready(function(){ $("#R").on("click", getRoll); //$("#roll").on("click", Dice.getURL); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!Doctype html> <html> <head> <title>Dice-namic</title> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="Dice-namic.js"></script> </head> <body> <h2>Roll Number</h2> <img id="dice1" src="http://www.dave-reed.com/book3e/Images/die1.gif"> <img id="dice2" src="http://www.dave-reed.com/book3e/Images/die1.gif"> <p>Enter target number:</p> <input type="text" id="num"> <br> <br> <button id="R">Roll 'em!</button> <br> <br> <div id="time">Test</div> </body> </html>
I have modified the code. 我修改了代码。 you are not returning the value that came after dice is played. 你没有返回骰子播放后的值。 use negation for while loop. 对while循环使用否定。 you are not changing the total value. 你没有改变总价值。
解决方案3
0 2016-03-05 04:17:23
There are several problems here. 这里有几个问题。 Starting with the roll_number function, the dicetotal doesn't get recalculated in the do while loop. 从roll_number函数开始，在do while循环中不会重新计算dicetotal 。 Secondly, the condition that would take you out of the loop is when dicetotal == n . 其次，将你带出循环的条件是dicetotal == n 。 You actually want the opposite: loop while dicetotal is different than the n you are trying to roll. 你实际上想要相反：循环，而dicetotal不同于你想要滚动的n 。 Finally, the rollDie function will change the displayed image, but it won't return you the rolled value. 最后， rollDie函数将更改显示的图像，但不会返回滚动值。
rollDie should be like: rollDie应该像：
rollDie: function(diceElement) {
var rolledValue = Math.floor(Math.random() * this.sides) + 1;
var diceImage = this.getURL(rolledValue);
diceElement.attr("src", diceImage);
return rolledValue;
}
and roll_number should be like this: 和roll_number应该是这样的：
function roll_number(n) {
var dicetotal; //No need to set a total as the first total will be done in the loop
var numRolls = 0;
do {
dicetotal = Dice.rollDie($('#dice1')) + Dice.rollDie($('#dice2'));
numRolls++;
} while(dicetotal != n);
return numRolls;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.