游戏中 JavaScript 本地存储问题

Question

我一直在制作一个点击游戏，由于某种原因，当我向游戏中添加本地存储时，它停止工作。 JavaScript 似乎不再做任何事情了。 这是网站

这是代码

let played = window.localStorage.played;
if (played === true) {
  let points = window.localStorage.getItem("points");
  let cpc = window.localStorage.getItem("cpc");
  let cps = window.localStorage.getItem("cps");
  let clicks = window.localStorage.getItem("clicks");
  let secondsplayed = window.localStorage.getItem("secondsplayed");
} else {
  window.localStorage.setItem("played", true);
  let points = 0;
  let cpc = 1;
  let cps = 0;
  let clicks = 0;
  let 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();
  }
};

我尝试自己解决问题，也使用了一些在网上找到的JavaScript检查器，但我无法解决它。我直接使用来自 W3Schools 的代码，所以我不完全确定为什么它不起作用。

Answer 1

在 if 块内用 let 声明的变量只能在这些块内访问。 解决方案：将变量声明移到条件语句之外，以使它们可以全局访问。 window.localStorage 将值存储为字符串。在计算中使用它们之前将它们转换为数字。 解决方案：从 localStorage 检索值时使用 parseInt 或 parseFloat。 window.localStorage.getItem 是异步的，因此代码可能会在检索值之前执行。 解决方案：在继续之前使用 Promise 或回调来确保值可用。

// Declare variables globally
let points = 0;
let cpc = 1;
let cps = 0;
let clicks = 0;
let secondsplayed = 0;

// Check for played status and retrieve values
window.localStorage.getItem("played")
  .then((played) => {
    if (played === "true") {
      points = parseInt(window.localStorage.getItem("points"));
      cpc = parseInt(window.localStorage.getItem("cpc"));
      cps = parseFloat(window.localStorage.getItem("cps"));
      clicks = parseInt(window.localStorage.getItem("clicks"));
      secondsplayed = parseInt(window.localStorage.getItem("secondsplayed"));
    } else {
      window.localStorage.setItem("played", "true");
    }

    // Rest of your game logic
  })
  .catch((error) => {
    console.error("Error retrieving values from localStorage:", error);
  });