Question

我一直在“写”一个涉及你收集资源的游戏，然后你把这些资源花在一些东西上然后创造更多的资源（当我完成时它会更有趣。）

无论如何，我的问题是，在购买太多创造更多资源的东西之后，我无法找到一种方法来阻止资源数量变成负值。我需要某种方法来禁用按钮。

我还想知道如何显示总树数的百分比：）

为了方便起见，这里是代码......

<!DOCTYPE html>
<html>

<head>
  <title>Game</title>
  <script>
    function collectSeeds() {
      document.getElementById("Seeds").stepUp(1);
    }

    function plantTree() {
      document.getElementById("Seeds").stepDown(10);
      document.getElementById("Trees").stepUp(1);
    }

    function plantTrees10() {
      document.getElementById("Seeds").stepDown(100);
      document.getElementById("Trees").stepUp(10);
    }
  </script>
</head>

<body>
  <button onclick="collectSeeds()">Collect Seeds</button>
  <button type="button" id="plantTree" 
    onClick="myTimer = setInterval(collectSeeds, 1000); plantTree();">Plant Tree</button>
  <button 
    onClick="plantTrees10(); myTimer = setInterval(collectSeeds,100);">Plant Trees (10)</button>
  <p>Seeds
    <br/>
    <input type="number" id="Seeds" disabled></input>
    <p>Trees
      <br/>
      <input type="number" id="Trees" disabled></input>
      <div style="position: fixed; bottom: 0; right: 0;">Progress:</div>
</body>

</html>

Answer 1

按照documentation
您可能也希望在某处发送消息。
最后清除再次使用它之前的间隔 - 我重写了脚本是不引人注目的和通用的。

var myTimer; // make global in scope
function collectSeeds() {
  document.getElementById("Seeds").stepUp(1);
}

function plantTree(but) {
  var nofSeeds = parseInt(but.getAttribute("data-nofseeds"), 10),
    availableSeeds = parseInt(document.getElementById("Seeds").value, 10);
  if (availableSeeds < nofSeeds) {
    console.log(availableSeeds + " not enough, " + nofSeeds + " needed"); // give some message somewhere
    return;
  }
  console.log(nofSeeds)
  document.getElementById("Seeds").stepDown(10 * nofSeeds);
  document.getElementById("Trees").stepUp(nofSeeds);
}

window.onload = function() {
  var plantButtons = document.querySelectorAll(".plantTree");
  for (var i = 0; i < plantButtons.length; i++) {
    plantButtons[i].onclick = function() {
      clearInterval(myTimer); // only have one timer running
      myTimer = setInterval(collectSeeds, 1000);
      plantTree(this);
    }
  }
}

<button onclick="collectSeeds()">Collect Seeds</button>
<button type="button" class="plantTree" data-nofseeds="1">Plant Tree</button>
<button type="button" class="plantTree" data-nofseeds="10">Plant Trees (10)</button>
<p>Seeds
  <br/>
  <input type="number" min="0" max="1000" id="Seeds" disabled />
</p>
<p>Trees
  <br/>
  <input type="number" id="Trees" disabled />
</p>
<div style="position: fixed; bottom: 0; right: 0;">Progress:</div>

Answer 2

添加它是否应该正常工作......

function plantTree() {
  if (document.getElementById("Seeds").value < 10) {
    alert("you don't have enough resources")
  } else {
  document.getElementById("Seeds").stepDown(10);
  document.getElementById("Trees").stepUp(1);
}
}
function plantTrees10() {
      if (document.getElementById("Seeds").value < 100) {
        alert("you don't have enough resources")
      } else {
      document.getElementById("Seeds").stepDown(100);
      document.getElementById("Trees").stepUp(10);
    }
    }

如何阻止某个号码进入否定值

2 个答案: