Question

我在这里开发增量游戏是视觉参考的链接：

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

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

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

＆＃13;

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)
}

＆＃13;

<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>

＆＃13;

Answer 1

在income -=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." ;
    }

Answer 2

您可以检查收入是否低于某个thresold，然后致电：

document.getElementById("btnLabel1").disabled = true;

当收入增加时，您可以将其设置为假。

Answer 3

让我们稍微美化你的代码：

var values=[
  {value:0,sign,bar,desc:"Units",cost:0},
  {value:0,sign,bar,desc:"Units",cost:500},
  {value:0,sign,bar,desc:"Lofts",cost:2000}
];

//init the dom on load
window.addEventListener("load",function(){
//assign all labels
[document.getElementById("btnLabel1"),document.getElementById("btnLabel2"),document.getElementById("btnLabel3")].forEach((el,i)=>values[i].sign=el);

//assign all progressbars:
[document.getElementById("myprogbar1"),document.getElementById("myprogbar2"),document.getElementById("myprogbar3")].forEach((el,i)=>values[i].bar=el);
});

function increase(id){
 //check if user can effort
 if(income<values[id].cost) return alert("Sorry you cant effort :(");
 //decrease income
 income-=values[id].cost;
 //set label
  values[id].sign.innerHTML = values[id].desc+" Owned :  " + (++values[id].value);
  //show some cool animation:
  var width=1;
  values[id].animation=values[id].animation || setInterval(function(){
    width=(1+width)%100;
    values[id].bar.style.width = width + '%';
  },10);
}

function buttonOne() {
   increase(0);
   document.getElementById("HeaderLabel").innerHTML = "<b> OK, good, now lets watch as your money starts togenerate slowly but surely. <p> After all no empire was built in a day. <p> When you have enough money you can buy more units." ;
 }

function buttonTwo() {
 increase(1);
}

function buttonThree() {
  increase(2);
}

您可以增加收入：

window.setInterval(_=>income++,10);

Answer 4

好的我修复了按钮事件，如果你把它们完美地完美地运作

function buttonOne() {
    if (income-500>=0){
    a++;
    document.getElementById("btnLabel1").innerHTML = " Units Owned :  " + a;
    income-=500;
    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() {
    if (income-1000>=0){
    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() {
    if (income-2000>=0){
    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)
}
}

我刚刚检查过您的资金减去单位成本是静态大于还是等于零

if (income-2000>=0){ ... }

Answer 5

首先，我看到每个功能都会以不同的价值减少收入。首先，定义常量整数并在其中设置这些值。关于代码，您可以将函数的内容嵌套在if-else语句中

var buttonOnePrice = 500;

function buttonOne() {
if(income >= buttonOnePrice) {
a++;
document.getElementById("btnLabel1").innerHTML = " Units Owned :  " + a;
income-=buttonOnePrice;
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)
}
    } else {
}

你可以根据需要处理他的其他声明。例如，您可以显示警报“资金不足”或类似的东西

如何阻止值进入负值

5 个答案: