2017-06-05 24 views
0

我開發這裏的增量遊戲停止值是鏈接的視覺參考:如何從進入負值

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

我的問題是,按鈕可以點擊無限次,收入價值將進入負面。

如何禁用按鈕,如果玩家沒有足夠的收入來點擊按鈕

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>

+0

點擊後,檢查當前值,如果是低於零,則什麼也不做 – Swellar

+0

歡迎SO。請下次使用'<>'創建一個[mcve],就像我爲你所做的那樣。不要忘記點擊TIDY之前保存 - 請修復代碼片段,所以它不會給出錯誤 - 你需要添加變量a,b,c,收入例如 – mplungjan

+0

@mplungjan謝謝。我會記住下一個問題 –

回答

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." ; 
    } 
+0

謝謝你做了詭計 - 但我有一個新問題大聲笑 - 玩家仍然可以點擊按鈕,他們得到更多的單位自己沒有支付他們大聲笑 –

+0

什麼是新問題? – prasanth

+0

謝謝你做的伎倆 - 但我有一個新問題大聲笑 - 玩家仍然可以點擊按鈕,他們得到更多的單位自己沒有支付他們大聲笑 –

0

好吧,我解決按鈕事件,如果你把這些它完美完美

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){ ... } 
+0

它的工作方式? –

+0

非常感謝你,似乎已經解決了我的問題哥們我appretiate它 –

0

首先,我看到每個函數都會以不同的值減少收入。所以首先定義常量整數並在其中設置這些值。 以及您的代碼,您可以嵌套函數的內容在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 { 
} 

,你可以處理他else語句,只要你想。例如,你可以顯示一個警報「資金不足」或類似的東西

+0

我的問題不是progbar,但生病嘗試,也感謝 –

+0

也每個按鈕必須降低不同的價格,因爲這是遊戲的目的 –

+0

然後只是更改if語句的{},並將它圍繞不希望執行的代碼執行,如果可用資金低於價格。 –

1

您可以檢查,如果收入低於某個thresold然後調用:

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

當收入變高,你可以將其設置回假。

1

讓美化你的代碼位:

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