前端点击游戏如何实现升级按钮仅在特定条件下可点击

原有代码核心问题 #

• 升级按钮的点击事件被错误绑定在加分按钮的点击逻辑内，只要计数超过20，每次点击加分按钮都会重复给升级按钮绑定事件，触发多次异常执行
• 没有升级等级、升级阈值的独立状态记录，既无法实现多级升级规则，也没法限制升级按钮重复点击
• 升级时直接将计数值设为-2的逻辑会异常重置分数，不符合正常交互预期

实现思路 #

按照需求的升级规则设计状态与逻辑：

• 新增currentUpgradeLevel变量记录当前已完成的升级等级，初始值为0
• 升级阈值计算规则：第n级（从1开始计数）的解锁阈值为20 * n²，对应升级后单次点击增量提升n，完全匹配「第一级阈值20、增量+1，第二级阈值80、增量+2」的规则，后续等级自动递推
• 升级按钮默认禁用，只有当前计数达到下一级升级阈值时才解锁，升级完成后立刻重新禁用，直到达到下一级阈值，从交互层面避免重复点击
• 升级时不修改现有计数值，仅提升单次点击增量，不会出现分数异常重置的问题

完整修正代码 #

修正后的JavaScript代码 #

// 全局状态
let count = 0;
let clickIncrement = 1; // 单次点击加分值，初始为1
let currentUpgradeLevel = 0; // 当前已完成的升级等级，初始0级
// 音效实例保留
const clickSnd = new Audio("click.wav");
const upgradeSnd = new Audio("upgrade.wav");

// 提前缓存DOM元素，避免每次点击重复查询
const countDisplay = document.getElementById("value");
const increaseBtn = document.getElementById("increase");
const decreaseBtn = document.getElementById("decrease");
const resetBtn = document.getElementById("reset");
const upgradeBtn = document.getElementById("upgrade");

// 计算下一级升级所需分数阈值
const getNextUpgradeThreshold = () => {
  const nextLevel = currentUpgradeLevel + 1;
  return 20 * Math.pow(nextLevel, 2);
}

// 统一更新页面显示、按钮状态
const updateUI = () => {
  countDisplay.textContent = count;
  const nextThreshold = getNextUpgradeThreshold();
  upgradeBtn.textContent = `升级(需${nextThreshold}分)`;
  // 达到阈值解锁升级按钮，否则禁用
  upgradeBtn.disabled = count < nextThreshold;
}

// 加分按钮逻辑
increaseBtn.onclick = () => {
  count += clickIncrement;
  clickSnd.play().catch(() => {}); // 捕获浏览器自动播放限制的报错
  updateUI();
}

// 减分按钮逻辑（原代码未实现，补全基础逻辑）
decreaseBtn.onclick = () => {
  count = Math.max(0, count - clickIncrement); // 分数最低为0，不会减成负数
  clickSnd.play().catch(() => {});
  updateUI();
}

// 重置按钮逻辑
resetBtn.onclick = () => {
  count = 0;
  clickIncrement = 1;
  currentUpgradeLevel = 0;
  clickSnd.play().catch(() => {});
  updateUI();
}

// 升级按钮逻辑
upgradeBtn.onclick = () => {
  const nextLevel = currentUpgradeLevel + 1;
  const requiredThreshold = getNextUpgradeThreshold();
  // 双重校验，避免异常触发升级
  if (count < requiredThreshold) return;

  // 执行升级：增量加对应等级的数值，更新等级
  clickIncrement += nextLevel;
  currentUpgradeLevel = nextLevel;
  upgradeSnd.play().catch(() => {});
  updateUI();
}

// 页面加载完成后初始化UI状态
updateUI();

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>点击小游戏</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" disabled>升级</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: 100vh;
  width: 100%;
}

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

button {
  background-color: yellowgreen;
  width: 90px;
  height: 30px;
  color: black;
  cursor: pointer;
  border: none;
  border-radius: 4px;
}

/* 禁用状态按钮样式 */
button:disabled {
  background-color: #556b2f;
  color: #aaa;
  cursor: not-allowed;
}

逻辑验证 #

• 初始状态：每次点击+1分，升级按钮显示需要20分，处于不可点击状态
• 计数达到20分：升级按钮解锁，点击后升级到1级，每次点击增量+1（变为每次+2分），升级按钮重新禁用，显示下一级需要80分
• 计数达到80分：升级按钮解锁，点击后升级到2级，每次点击增量+2（变为每次+4分），下一级阈值自动计算为180分，增量+3，后续等级按规则自动递推
• 升级过程不会修改现有分数，升级按钮未达阈值时无法点击，不会出现重复点击重置分数的异常

内容的提问来源于stack exchange，提问作者Burlacu Cătălin