骰子滚到数字

我正在学习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>

来源

2016-03-05 zgarcia

//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循环使用否定。你没有改变总价值。

来源

2016-03-05 04:10:09

是的！这个伎俩。非常感谢！ – zgarcia

问题是在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底。

来源

2016-03-05 04:05:48 wong2

这似乎并没有工作。我尝试了“！=”，导致我的页面崩溃 – zgarcia

@zgarcia看到我的更新，还有一件事丢失 – wong2

这里有几个问题。从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; 
}

来源

2016-03-05 04:17:23

骰子滚到数字

回答

相关问题