Question

我正在尝试模拟红色和蓝色点之间的比赛。如果点等于或超过在文本框中输入的距离值，则该点将获胜。截至目前，当您单击“采取步骤！”按钮，每个点的位置/距离增加1。我不确定如何使该位置/距离增加一个随机整数，在这种情况下，是从1到3的随机整数。这样吗？

这就是我所拥有的：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Dot Race</title>
    <link href="dotrace.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript">
      function TakeAStep() {
        var x, y, redcount, bluecount, distance;

        x = Math.floor(Math.random() * 3) + 1;
        y = Math.floor(Math.random() * 3) + 1;
        redcount = document.getElementById("reddotspan").innerHTML++;
        bluecount = document.getElementById("bluedotspan").innerHTML++;
        distance = parseFloat(document.getElementById("DistanceBox").value);

        if (redcount >= distance && bluecount >= distance) {
          alert("They tied!");
        } else if (redcount >= distance) {
          alert("Red wins!");
        } else if (bluecount >= distance) {
          alert("Blue wins!");
        }
      }
    </script>
  </head>
  <body>
    <h2>Dot Race</h2>
    <p>
      Race distance: <input type="text" id="DistanceBox" placeholder="0" />
      <br>
      <span class="red">Red dot location:</span> <span id="reddotspan">0</span>
      <br>
      <span class="blue">Blue dot location:</span>
      <span id="bluedotspan">0</span>
      <hr>
      <input type="button" value="Take a step!" onclick="TakeAStep();" />
    </p>
    <div id="OutputDiv"></div>
  </body>
</html>

Answer 1

您正在递增redcount和bluecount的值，但这与x和y无关。

我在x=和y=之后添加了这些行。似乎可以解决根本原因。

document.getElementById("reddotspan").innerHTML=parseInt(document.getElementById("reddotspan").innerHTML)+x;
redcount = document.getElementById("reddotspan").innerHTML;
document.getElementById("bluedotspan").innerHTML=parseInt(document.getElementById("bluedotspan").innerHTML)+y;
bluecount = document.getElementById("bluedotspan").innerHTML;
distance = parseFloat(document.getElementById("DistanceBox").value);

Answer 2

<!doctype html>
<html lang="en">
    <head>
    <title>Dot Race</title>
    <link href="dotrace.css" type="text/css" rel="stylesheet"></link>
    <script type="text/javascript">
    function TakeAStep()
    {
        var x, y, redcount, bluecount, distance;

        x = Math.floor(Math.random() * 3) + 1  ;
        y = Math.floor(Math.random() * 3) + 1;

        current_red = +document.getElementById('reddotspan').innerText;
        current_blue = +document.getElementById('bluedotspan').innerText;

        redcount = current_red + x;
        bluecount = current_blue + y;

        document.getElementById('reddotspan').innerText = redcount;
        document.getElementById('bluedotspan').innerText = bluecount;

        distance = parseFloat(document.getElementById('DistanceBox').value);

    if (redcount >= distance && bluecount >= distance) {
        alert('They tied!');
    } else if (redcount >= distance) {
        alert('Red wins!');
    } else if (bluecount >= distance) {
        alert('Blue wins!')
    }
    }
    </script>
    </head>
    <body>
    <h2>Dot Race</h2>
        <p>
            Race distance: 
                <input type="text"
                       id="DistanceBox"
                       placeholder="0"> 
    <br>

    <span class="red">Red dot location:</span> <span 
    id="reddotspan">0</span>
    <br>
    <span class="blue">Blue dot location:</span> 
    <span id="bluedotspan">0</span>
    <hr>
        <input type="button"
               value="Take a step!"
               onclick="TakeAStep();">
    </p>
    <div id="OutputDiv"></div>  
    </body>
</html>

Answer 3

您快到了。使用++运算符时，您正在修改innerHTML的当前状态以仅添加一个。相反，您需要将其设置为等于新值。

您还应该使用Number.parseInt，以便将其明确解析为数字。否则，如果您执行“ 0” +1，则结果将为“ 01”。

<html lang="en">

<head>
  <title>Dot Race</title>
  <link href="dotrace.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript">
    function TakeAStep() {
      var x, y, newRedNumber, newBlueNumber, distance;

      x = Math.ceil(Math.random() * 3);
      y = Math.ceil(Math.random() * 3);
      newRedNumber = Number.parseInt(document.getElementById('reddotspan').innerHTML) + x;
      newBlueNumber = Number.parseInt(document.getElementById('bluedotspan').innerHTML) + y;

      document.getElementById('reddotspan').innerHTML = newRedNumber;
      document.getElementById('bluedotspan').innerHTML = newBlueNumber;

      distance = parseFloat(document.getElementById('DistanceBox').value);

      var outputText = "";

      if (newRedNumber >= distance && newBlueNumber >= distance) {
        outputText = 'They tied!';
      } else if (newRedNumber >= distance) {
        outputText = 'Red wins!';
      } else if (newBlueNumber >= distance) {
        outputText = 'Blue wins!';
      }
      document.getElementById('OutputDiv').innerHTML = outputText;
    }
  </script>
</head>

<body>
  <h2>Dot Race</h2>
  <p>
    Race distance:
    <input type="text" id="DistanceBox" placeholder="0">
    <br>

    <span class="red">Red dot location:</span> <span id="reddotspan">0</span>
    <br>
    <span class="blue">Blue dot location:</span>
    <span id="bluedotspan">0</span>
    <hr>
    <input type="button" value="Take a step!" onclick="TakeAStep();" />
    <div id="OutputDiv"></div>
</body>

</html>

Answer 4

您可以使用：

Math.round(Math.random()*3);

Math.random（）返回0到1之间的随机数。乘以3得到3作为最高数字。回合。

如何计算一个随机整数/变量（点击）？

4 个答案: