骰子滚到数字
问题描述:
我正在学习javascript,我的项目需要我建立一个有两个骰子图像,一个输入框和一个按钮的网页。输入后,按钮可以推动,JavaScript会告诉你有多少卷,以获得该值和骰子图像将显示该值。我的麻烦是,我不能让骰子显示总数,我没有得到正确的掷骰数。它总是说它花了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>
答
//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>
我已经修改的代码。你不会返回骰子播放后的值。 while循环使用否定。你没有改变总价值。
答
问题是在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;
}
也Dice.rollDie
你应该return rolledValue
底。
答
这里有几个问题。从roll_number
函数开始,dicetotal
不会在do while循环中重新计算。其次,会使你走出循环的条件是当dicetotal == n
。你实际上想要的是相反的:dicetotal
与你试图滚动的n
不同。最后,rollDie
函数将更改显示的图像,但它不会返回滚动值。
rollDie
应该是这样的:
rollDie: function(diceElement) {
var rolledValue = Math.floor(Math.random() * this.sides) + 1;
var diceImage = this.getURL(rolledValue);
diceElement.attr("src", diceImage);
return rolledValue;
}
和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;
}
是的!这个伎俩。非常感谢! – zgarcia