点击器游戏接入JavaScript Local Storage后失效的求助

你的代码存在两个核心问题，直接导致游戏无法运行：

1. 变量作用域错误 #

在if/else块内用let声明的points、cpc等变量，仅在当前块级作用域内有效，外部的update、autoclick等函数根本无法访问这些变量，运行时会直接抛出变量未定义的错误。

2. LocalStorage数据类型问题 #

LocalStorage仅支持存储字符串类型数据：

• 直接读取window.localStorage.played得到的是字符串"true"，而非布尔值true，导致played === true的判断永远不成立；
• 通过getItem获取的数值类数据也是字符串格式，直接参与运算会触发字符串拼接而非数值计算，破坏游戏逻辑。

修复后的完整代码 #

// 先声明全局变量，确保所有函数可访问
let points, cpc, cps, clicks, secondsplayed;

// 统一用getItem读取LocalStorage，处理类型转换
const played = window.localStorage.getItem("played");
if (played === "true") {
  points = Number(window.localStorage.getItem("points"));
  cpc = Number(window.localStorage.getItem("cpc"));
  cps = Number(window.localStorage.getItem("cps"));
  clicks = Number(window.localStorage.getItem("clicks"));
  secondsplayed = Number(window.localStorage.getItem("secondsplayed"));
} else {
  window.localStorage.setItem("played", "true");
  points = 0;
  cpc = 1;
  cps = 0;
  clicks = 0;
  secondsplayed = 0;
}

function abbrNum(number) {
  const formatter = Intl.NumberFormat("en", { notation: "compact" });
  return formatter.format(number);
}

function update() {
  document.getElementById("score").innerText = abbrNum(points);
  document.getElementById("upgcpc").innerText = "Upgrade CPC: $" + cpc * 2;
  document.getElementById("upgcps").innerText = "Upgrade CPS: $" + (cps * 5 + 10);
  document.getElementById("cpcstat").innerText = "CPC: " + abbrNum(cpc);
  document.getElementById("cpsstat").innerText = "CPS: " + abbrNum(cps);
  document.getElementById("clicksstat").innerText = "Clicks: " + abbrNum(clicks);
  document.getElementById("secondsstat").innerText = "Seconds played: " + abbrNum(secondsplayed);

  window.localStorage.setItem("points", points);
  window.localStorage.setItem("cpc", cpc);
  window.localStorage.setItem("cps", cps);
  window.localStorage.setItem("clicks", clicks);
  window.localStorage.setItem("secondsplayed", secondsplayed);
}

function autoclick() {
  points = points + cps;
  secondsplayed++;
  update();
}

update();

setInterval(autoclick, 1000);

document.getElementById("button").onclick = () => {
  points = points + cpc;
  clicks++;
  update();
};

document.getElementById("upgcpc").onclick = () => {
  if (points >= cpc * 2) {
    points = points - cpc * 2;
    cpc = cpc + 1;
    update();
  }
};

document.getElementById("upgcps").onclick = () => {
  if (points >= cps * 5 + 10) {
    points = points - (cps * 5 + 10);
    cps = cps + 0.5;
    update();
  }
};

关键修复点说明 #

• 提升变量作用域：将points、cpc等变量声明移到if/else块外，确保所有函数都能访问这些全局变量；
• 统一LocalStorage操作：全程用getItem/setItem读写数据，避免直接访问属性导致的类型混淆；
• 数值类型转换：对从LocalStorage读取的数值数据用Number()转换，保证运算逻辑符合预期；
• 布尔值字符串存储：LocalStorage无法存储布尔值，因此将played存储为字符串"true"，判断时也用字符串对比。

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