时间戳

首页 > 解决方案 > 循环用户输入和添加骰子的总和

javascript - 循环用户输入和添加骰子的总和

问题描述

我正在尝试使用 JavaScript 制作游戏，但我被卡住了。我无法弄清楚如何从骰子中取出骰子并将其放入表格中以计算在玩家用完钱之前进行了多少次滚动，以及规则末尾的其他 3 个要求::::: 任何建议会非常有帮助！

规则

该程序询问用户他们必须下注多少美元。如果起始赌注小于或等于 0，则显示错误消息。当用户点击 Play 按钮时，程序会反复掷骰子，直到所有的钱都花光了。

提示：使用循环结构继续玩，直到钱花光。

提示：我们在掷骰子练习中创建了一个 rollDice() 函数。

我无法让我的代码正确粘贴，所以我添加了一个片段。

<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8">

  <title> Lucky Sevens </title>
<style>
</style>

<script>
<!--reset form field to natural state-->
function clearErrors() {
    for (var loopCounter = 0;
        loopCounter < document.forms["bet"].elements.length;
        loopCounter++) {
        if (document.forms["bet"].elements[loopCounter]
           .parentElement.className.indexOf("has-") != -1) {

            document.forms["bet"].elements[loopCounter]
               .parentElement.className = "form-group";
        }
    }
}
<!--clear form fields-->
function resetForm() {
  clearErrors();
  document.forms["bet"]["num1"].value = "";
  document.getElementById("results").style.display = "none";
  document.getElementById("submitButton").innerText = "Submit";
  document.forms["bet"]["num1"].focus();
  alert("You have reset the form and will lose all progress.");
}
<!--verify user input is expected-->
function validateItems() {
  clearErrors();
  var num1 = document.forms["bet"]["num1"].value;
  if (num1 == "" || isNaN(num1)) {
      alert("Num1 must be filled in with a number.");
      document.forms["bet"]["num1"]
         .parentElement.className = "form-group has-error";
      document.forms["bet"]["num1"].focus();
      return false;
  }
  if (num1 >= 11) {
      alert("Bet must be between $1-$10");
      document.forms["bet"]["num1"]
         .parentElement.className = "form-group has-error"
      document.forms["bet"]["num1"].focus();
      return false;
  }
  if (num1 <= 0) {
      alert("Bet must be between $1-$10");
      document.forms["bet"]["num1"]
         .parentElement.className = "form-group has-error"
      document.forms["bet"]["num1"].focus();
      return false;
  }

 document.getElementById("results").style.display = "block";
 document.getElementById("submitButton").innerText = "Roll Again";
 document.getElementById("startingBet").innerText = num1;

 return false;
}


function rollDice() {
  var die1 = document.getElementById("die1");
  var die2 = document.getElementById("die2");
  var status = document.getElementById("status");
  var d1=Math.floor(Math.random() * 6) + 1;
  var d2=Math.floor(Math.random() * 6) + 1;
  var diceTotal = d1 + d2;
  die1.innerHTML = d1;
  die2.innerHTML = d2;
  status.innerHTML = "You rolled " + diceTotal + ".";
  if(diceTotal == 7) {
    status.innerHTML += " You win $4!";
  }
  if(diceTotal != 7){
    status.innerHTML += " You lose $1.";
  }

}
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
    <h1>Lucky Sevens</h1>
    <form name="bet" onsubmit="return validateItems();"
          onreset="resetForm();" class="form-inline">
            <div class="form-group">
                <label for="num1">Starting Bet</label>
                <input type="number" class="form-control" id="num1">
            </div>
            <button type="submit" onclick="rollDice()" id="submitButton" class="btn btn-default">Submit</button>

    </form>
    <h2 id="status" style="clear:left;"></h2>
    <div id="die1" class="dice">0</div>
    <div id="die2" class="dice">0</div>
    <hr />

    <table id="results" class="table table-striped" style="display:none;">
        <tbody>
            <tr>
                <td>Starting Bet</td>
                <td><span id="startingBet"></span></td>
            </tr>
            <tr>
                <td>Total Rolls Before Going Broke</td>
            </tr>
            <tr>
                <td>Highest Amount Won</td>
            </tr>
            <tr>
                <td>Roll Count at Highest Amount Win</td>
            </tr>
        </tbody>
    </table>

</div>
</body>
</html>

标签： javascriptalgorithm

解决方案

推荐阅读