javascript - 我正在制作一个非常简单的点击器游戏，我想在他们购买可购买的（按钮）后将其禁用。（一段时间。）请帮忙。我可能不是新人

Question

var fedfish = 0;

function fishfed(number){
fedfish = fedfish + number;
document.getElementById("fedfish").innerHTML = fedfish;
}

var feeder = 0;

function buyFeeder(){
var feederCost = Math.floor(10 * Math.pow(1.1,feeder));     //works out 
the cost of this feeder
if(fedfish >= feederCost){                                   //checks that the player can afford the feeder
    feeder = feeder + 1;                                   //increases number of feeder
    fedfish = fedfish - feederCost;                          //removes the fish spent
    document.getElementById('feeder').innerHTML = feeder;  //updates the number of feeders for the user
    document.getElementById('fedfish').innerHTML = fedfish;  //updates the number of fishfed for the user
}
var nextCost = Math.floor(10 * Math.pow(1.1,feeder));       //works out the cost of the next cursor
document.getElementById('feederCost').innerHTML = nextCost;  //updates the feeder cost for the user
}

window.setInterval(function(){

fishfed(feeder);

}, 1000);


var moreFish = 0;

function buyFish(){
var fishCost = Math.floor(15 * Math.pow(1.0,moreFish));     //works out the cost of this fish
if(fedfish >= fishCost){                                   //checks that the player can afford the fish
    moreFish = moreFish + 1;                                   //increases number of fish
    fedfish = fedfish - fishCost;                          //removes the fish spent
    document.getElementById('fish').innerHTML = moreFish;  //updates the number of fish for the user
    document.getElementById('fishFed').innerHTML = fedfish;  //updates the number of fishfed for the user
}
var moreCost = Math.floor(15 * Math.pow(1.0,moreFish));       //works out the cost of the next fish cost
document.getElementById('fishCost').innerHTML = moreCost;  //updates the fish cost for the user
}

window.setInterval(function(){

fishfed(moreFish);

}, 500);

var hugefeeder = 0;

function buyhfeeder(){
var hfeedCost = Math.floor(10 * Math.pow(2.0,hugefeeder));     //works out the cost of this feeder
if(fedfish >= hfeedCost){                                   //checks that the player can afford the feeder
    hugefeeder = hugefeeder + 1;                                   //increases number of feeders
    fedfish = fedfish - hfeedCost;                          //removes the fish spent
    document.getElementById('hfeeder').innerHTML = hugefeeder;  //updates the number of feeder for the user
    document.getElementById('fishfed').innerHTML = fedfish;  //updates the number of fishfed for the user
}
var moreCost = Math.floor(10 * Math.pow(2.0,hugefeeder));       //works out the cost of the next feeder
document.getElementById('hfeedCost').innerHTML = moreCost;  //updates the feeder cost for the user
}

window.setInterval(function(){

fishfed(hugefeeder);

}, 100);

.buyables {
  position: relative;
  background-color: #0000ff;
  border: none;
  font-size: 28px;
  color: #FFFF;
  padding: 20px;
  width: 200px;
  text-align: center;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.buyables:after {
  content: "";
  background: #6666ff;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px!important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s
}

.buyables:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}


.clicker {
  position: relative;
  background-color: #0000ff;
  border: none;
  font-size: 28px;
  color: #FFFF;
  padding: 20px;
  width: 200px;
  text-align: center;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.clicker:after {
  content: "";
  background: #6666ff;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px!important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s
}

.clicker:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}

<html>
<head>
    <link rel='stylesheet' type='text/css' href="clicker.css">
</head>
<body>
     <button class="clicker" onclick="fishfed(1)">FEED FISH!
     </button>
<br />
<br />
<br />
Fed Fish: <span id="fedfish">0</span>
<br />
<button class="buyables" onclick="buyFeeder()">Buy Automatic Feeder!</button>
<br />
Automatic Feeders: <span id="feeder">0</span>
<br />
Automatic Feeders Cost: <span id="feederCost">10</span>
<br />
<br />
<br />
    <button class="buyables" onclick="buyFish()">Buy Fish!</button>
<br />
Total Fish: <span id="fish">0</span>
<br />
Fish Cost: <span id="fishCost">10</span>
<br />
<br />
<br />
    <button class="buyables" onclick="buyhfeeder()">Buy HUGE Auto Feeder!</button>
<br />
Total Huge Auto Feeders: <span id="hfeeder">0</span>
<br />
HUGE Feeder Cost: <span id="hfeedercost">10</span>
<br />
<br />
    <script type="text/javascript" src="var fedfish0.js"></script>
</body>
</html>

你能告诉我怎么做吗？而且由于某种原因，我似乎无法弄清楚如何改变可购买物品的成本。我尝试将 pow 或 floor 更改为其他数字，这完全破坏了代码。我不知道为什么。我也尝试在这里寻找一些代码来禁用按钮，但大多数是 onlick 并且我发现你不能在同一个按钮中有两个 onclicks。我真的需要帮助来改进这段代码，所以它实际上就像一个简单的点击游戏。非常感谢您的帮助。

标签： javascriptperformance

Answer 1

您可以在 onclick 函数中禁用该按钮：

document.getElementById("myButtonId").disabled = true

并在延迟后使用setTimeout重新启用它。

setTimeout(function(){
  document.getElementById("myButtonId").removeAttribute("disabled")
}, 500)