点击器游戏每秒自动涨积分、购买升级扣积分功能bug修复咨询

• 购买自动点击器时仅修改了DOM节点的显示内容，未修改实际存储积分的变量i，下一次自动增长逻辑读取的还是扣除前的i值，最终导致数值异常回弹
• 每次点击购买按钮都会重复创建setInterval定时器，多次点击后每秒积分增长速度会异常叠加
• 缺少购买前置校验，积分不足15时也可以触发购买逻辑

JavaScript 代码 #

var i = 0;
const num = document.getElementById('number');
// 存储定时器ID，避免重复创建定时任务
let autoTimer = null;

function Add() {
  i++;
  num.innerText = i;
}

function AutoThing() {
  // 积分不足时拦截购买逻辑
  if (i < 15) return;
  // 先修改实际存储的积分变量，再同步到页面显示
  i = i - 15;
  num.innerText = i;
  // 仅在未开启自动增长时创建定时器
  if (!autoTimer) {
    autoTimer = setInterval(increase, 1000);
  }
}

function increase() {
  i++;
  num.innerText = i;
}

HTML 代码 #

无需修改，保持原有代码即可：

<center>
  <p id="number">0</p>
  <br>
  <button onclick="Add()">Add 1</button>
  <br>
  <button onclick="AutoThing()">auto clicker 15$</button>
</center>

内容的提问来源于stack exchange，提问作者the potato