Question

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

Answer 1

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

Answer 2

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

Answer 3

这里有几个问题。从roll_number函数开始，{while}循环中不会重新计算dicetotal。其次，将你带出循环的条件是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;
}

掷骰子直到达到数字

3 个答案: