掷骰子直到达到数字答案

【问题标题】：Dice roll until number is reached掷骰子直到达到数字
【发布时间】：2016-03-05 12:24:06
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html

【解决方案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);
        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循环使用否定。你没有改变总值。

【讨论】：

【解决方案2】：

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

【讨论】：

这似乎不起作用。我尝试了“！=”，这导致我的页面崩溃
@zgarcia 看到我的更新，还有一件事不见了

【解决方案3】：

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

【讨论】：