骰子滾到數字

我正在學習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

骰子滾到數字

回答

相關問題