javascript - 如何阻止值变为负值

Question

我正在开发一个增量游戏，这里是视觉引用的链接:

https://code.sololearn.com/WF65X6DEns7o/#css

我遇到的问题是按钮可以无限次点击，并且 INCOME 值将变为负数。

如果玩家没有足够的收入来点击按钮，如何禁用该按钮

function buttonOne() {
  a++;
  document.getElementById("btnLabel1").innerHTML = " Units Owned :  " + a;
  income -= 500;
  document.getElementById("HeaderLabel").innerHTML = "<b> OK, good, now let's   watch as your money starts to generate slowly but surely. < p > After all no   empire was built in a day. < p > When you have enough money you can buy more   units. " ;


  window.setInterval(function move() {
    var elem = document.getElementById("myprogbar1");
    var width = 1;
    var id = setInterval(frame, 4);

    function frame() {
      if (width >= 100) {
        clearInterval(id);
      } else {
        width++;
        elem.style.width = width + '%';
      }
    }
  }, 1000)
}

function buttonTwo() {
  b++;
  document.getElementById("btnLabel2").innerHTML = " Units Owned :  " + b;
  income -= 1000;

  window.setInterval(function move() {
    var elem = document.getElementById("myprogbar2");
    var width = 1;
    var id = setInterval(frame, 9);

    function frame() {
      if (width >= 100) {
        clearInterval(id);
      } else {
        width++;
        elem.style.width = width + '%';
      }
    }
  }, 2000)
}

function buttonThree() {
  c++;
  document.getElementById("btnLabel3").innerHTML = " Lofts Owned :  " + c;
  income -= 2000;

  window.setInterval(function move() {
    var elem = document.getElementById("myprogbar3");
    var width = 1;
    var id = setInterval(frame, 19);

    function frame() {
      if (width >= 100) {
        clearInterval(id);
      } else {
        width++;
        elem.style.width = width + '%';
      }
    }
  }, 3000)
}

<div id="gameMoneyBG">
  <div id="gameMoney"> Income : $ 500 </div</div>

    <button id="buttonOne" onclick="buttonOne()">
          <b>Small Units</b></button>
    <div id="progbar1">
      <div id="myprogbar1"> </div>
    </div>
    <br /> <br />
    <div id="btnLabel1"> Units Owned : 0 </div>
    <div id="costLabel1">
      Unit Cost : $ 500 </div>

    <br /><br />

    <button id="buttonTwo" onclick="buttonTwo()"><b>Large Units</b></button>
    <div id="progbar2">
      <div id="myprogbar2"> </div>
    </div>
    <br /><br />
    <div id="btnLabel2"> Units Owned : 0 </div>
    <div id="costLabel2"> Unit Cost : $ 1000 </div>

    <br /><br />

    <button id="buttonThree" onclick="buttonThree()"><b>City Lofts</b></button>
    <div id="progbar3">
      <div id="myprogbar3"> </div>
    </div>
    <br /><br />
    <div id="btnLabel3"> Lofts Owned : 0 </div>
    <div id="costLabel3"> Loft Cost : $ 2000 </div>

Answer 1

将每个函数的代码粘贴到 venue -=num 后面。它将限制 0 以下的值。其 ternary operator

 income= income < 0 ? 0 :income;

JS代码

 var income = 500;
    var a = 0;
    var b = 0;
    var c = 0;

    alert("Welcome to my game. It took me 2 days to create it.  I hope you enjoy it. \n\nPlease note that you get best experience on a PC not on a mobile. \n\n Also please ignore any bugs you may find, but feedback on improvement is welcome.")


    function buttonOne() {

        a++;
        document.getElementById("btnLabel1").innerHTML = " Units Owned :  " + a;
        income-=500;
         income= income < 0 ? 0 :income;
        document.getElementById("HeaderLabel").innerHTML = "<b> OK, good, now lets watch as your money starts to generate slowly but surely. <p> After all no empire was built in a day. <p> When you have enough money you can buy more units." ;


        window.setInterval (function move() {
        var elem = document.getElementById("myprogbar1");
        var width = 1;
        var id = setInterval(frame, 4);
        function frame() {
            if (width >= 100) {
                clearInterval(id);
            } else {
                width++;
                elem.style.width = width + '%';
            }
        }
    }, 1000)
    }

    function buttonTwo() {
        b++;
        document.getElementById("btnLabel2").innerHTML = " Units Owned :  " + b;
        income-=1000;
             income= income < 0 ? 0 :income;
        window.setInterval (function move() {
        var elem = document.getElementById("myprogbar2");
        var width = 1;
        var id = setInterval(frame, 9);
        function frame() {
            if (width >= 100) {
                clearInterval(id);
            } else {
                width++;
                elem.style.width = width + '%';
            }
        }
    }, 2000)
    }

    function buttonThree() {
        c++;
        document.getElementById("btnLabel3").innerHTML = " Lofts Owned :  " + c;
        income-=2000;
         income= income < 0 ? 0 :income;
        window.setInterval (function move() {
        var elem = document.getElementById("myprogbar3");
        var width = 1;
        var id = setInterval(frame, 19);
        function frame() {
            if (width >= 100) {
                clearInterval(id);
            } else {
                width++;
                elem.style.width = width + '%';
            }
        }
    }, 3000)
    }

    window.setInterval(function() {
        if (a >= 1)
          document.getElementById("gameMoney").innerHTML = " Income : $ " + (income+=a*5);

        if(a>=25)
        document.getElementById("gameMoney").innerHTML = " Income : $ " + (income+=a *10);

        if(a>=50)
        document.getElementById("gameMoney").innerHTML = " Income : $ " + (income+=a *20);

    }, 1000)

    window.setInterval(function() {
        if (b >= 1)
          document.getElementById("gameMoney").innerHTML = " Income : $ " + (income+=b+49*b);

        if (b >= 25)
          document.getElementById("gameMoney").innerHTML = " Income : $ " + (income+=b+49*b*4);

        if (b >= 50)
          document.getElementById("gameMoney").innerHTML = " Income : $ " + (income+=b+49*b*8);

    }, 2000)

    window.setInterval(function() {
        if (c >= 1)
          document.getElementById("gameMoney").innerHTML = " Income : $ " + (income+=c+99*c);

        if (c >= 25)
          document.getElementById("gameMoney").innerHTML = " Income : $ " + (income+=c+99*c*4);

        if (c >= 50)
          document.getElementById("gameMoney").innerHTML = " Income : $ " + (income+=c+99*c*8);
    }, 3000)

    function income(){
        if (income >= 1000000)
        document.getElementById("HeaderLabel").innerHTML = "You have been caught for tax evasion. The Government will now take $500 000." ;
    }