在某些情况下，如何使我的按钮被点击？

Question

我是前端开发的初学者，我正在尝试制作这款 Clicker 游戏。 当我按增加时，值增加 1。点击 20 次后（由我选择），您可以按升级并获得双倍点击。 问题是点击20次第一次升级后，我仍然可以按升级，重置我的分数。 你可以试试看！ 我想创建不同的升级点：比如先在 20 点，然后一键增加； 在 80 时排名第二，并随着 2 次点击而增加，依此类推。 请帮忙

javascript代码

let count = 0;
let upgrade = 1;
var snd = new Audio("click.wav");
var upgradeSnd = new Audio("upgrade.wav");

document.getElementById("increase").onclick = function(){
count = count + upgrade;
document.getElementById("value").innerHTML = count;
if(count >= 20)
document.getElementById("upgrade").onclick = function()  {
 count = -2;
 upgrade = 2;
 count += upgrade;
 document.getElementById("value").innerHTML = count;
  }
 }

html代码

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
  </head>
  <body>
  <label type="number" id="value">0</label><br>
  <div class="buttons">
   <button type="button" id="decrease">Decrease</button>
   <button type="button" id="reset">Reset</button>
   <button type="button" id="increase">Increase</button>
   <button type="button" id="upgrade">Upgrade</button>
  </div>

    <script src="index.js"></script>
  </body>
   </html>

CSS 代码

   #value {
    display: flex;
    align-content: center;
    justify-content: center;
    font-size: 50px;
    font-family: Verdana;
    color: yellowgreen;
    }
    
    body {
    background-color: black;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    column-gap: 10px;
    row-gap: 10px;
    margin: auto;
    height: auto;
    width: 100%;
    }

     .buttons {
     display: flex;
     align-items: center;
     justify-content: center;
     column-gap: 20px;
     size: 30px;
     }

     #decrease {
     background-color: yellowgreen;
     width: 90px;
     height: 30px;
     color: black;
     cursor: pointer;

     }

     #increase {
     background-color: yellowgreen;
     width: 90px;
     height: 30px;
     cursor: pointer;
      }

     #reset {
     background-color: yellowgreen;
     width: 90px;
     height: 30px;
     cursor: pointer;
     }

      #upgrade {
     background-color: yellowgreen;
      width: 90px;
     height: 30px;
     cursor: pointer;
     }

Answer 1

我想这就是你想要的。

此代码将检查您的计数是否大于 20，但请确保您尚未单击该升级。 然后它将从您现有的计数中减去升级计数，即使升级后的计数足够高，它也不会再次工作。 如果计数达到下一个升级级别，该过程将再次重复，点击次数将再次增加 2。可以更改这些值以获得进一步的升级选项。

let count = 0;
let upgrade = 1;
var snd = new Audio("click.wav");
var upgradeSnd = new Audio("upgrade.wav");

// Increase and update the count.
document.getElementById("increase").onclick = function () {
    count = count + upgrade;

    document.getElementById("value").innerHTML = count;
};

// Handle upgrade events
document.getElementById("upgrade").onclick = function () {
    // Check if the count is high enough for an upgrade but the upgrade hasn't already happened.
    if (count >= 20 && upgrade < 2) {
        count = count - 20;
        upgrade = 2;
        document.getElementById("value").innerHTML = count;
    } else if (count >= 80 && upgrade < 4) {
        count = count - 80;
        upgrade = 4;
        document.getElementById("value").innerHTML = count;
    }
    // Repeat for however many you want.
};

希望这可以帮助！