HTML与JavaScript点击器游戏Dollars per Second功能失效排查

我的点击器游戏里，每秒美元（DPS）计数器完全不工作。已经确认document.querySelector用了正确的ID，计算逻辑也没问题，但计数器就是不更新，对应的函数好像没执行，控制台也没报错。

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" />
    <script src="script.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@beta/dist/js.cookie.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <title>Computer Clicker</title>
  </head>
  <body onload="updateDollars()">
    <div class="counterclass">
      <h1 id="counter">0 dollars</h1>
      <h3 id="dps">0.0 dps(Dollars per Second)</h3>
    </div>
    <div class="clickme">
      <img
        id="slightlydamagedcomputer"
        onclick="clicker.dollars += clicker.clickMultiplier; var click = document.querySelector('.clickme'); click.style.animation = 'click 0.2s'; var clone = click.cloneNode(true); click.parentNode.replaceChild(clone, click);"
        src="slightlydamagedcomputer.png"
        alt="Drawing of a Smoking Computer"
        width="500"
        height="500"
      />
    </div>
    <div class="upgradesleft">
      <h1>Upgrades</h1>
      <div class="upgradeoptions">
        <button></button>
        <button></button>
        <button></button>
        <button></button>
        <button></button>
      </div>
    </div>
    <div class="genright">
      <h1>Generators</h1>
      <div class="genoptions"></div>
    </div>
  </body>
</html>

JavaScript代码（已修复） #

const clicker = {
  dollars: 0,
  clickMultiplier: 1,
  generators: {
    cardboardMouse: {
      amount: 0,
      cost: 10,
      dps: 0.5,
      dollarsToShow: 5,
      dollarsToUnlock: 10,
      name: "Cardboard Mouse",
      description:
        "A poorly crafted cardboard version of a mouse. Need I say more?",
    },
    cardboardKeyboard: {
      amount: 0,
      cost: 50,
      dps: 1,
      dollarsToShow: 25,
      dollarsToUnlock: 50,
      name: "Cardboard Keyboard",
      description:
        "A poorly crafted cardboard version of a keyboard. Makes a satisfying noise.",
    },
  },
};

var delay = 0;

function thingClicked(thing) {
  if (clicker.generators[thing].cost <= clicker.dollars) {
    clicker.dollars -= clicker.generators[thing].cost;
    clicker.generators[thing].amount++;
    clicker.generators[thing].cost += Math.round(
      clicker.generators[thing].cost * 0.15
    );
    updateGenerators();
    updateDollarsPerSecond();
  }
}

function updateDollarsPerSecond(){
  let totalDps = 0;
  for (const i in clicker.generators) {
      totalDps += clicker.generators[i].amount * clicker.generators[i].dps;
  }
  const formattedDps = totalDps.toFixed(1);
  document.querySelector("#dps").innerHTML = `${formattedDps} dps(Dollars per Second)`;
}

function updateGenerators() {
  document.querySelector(".genoptions").innerHTML = "";
  for (const i in clicker.generators) {
    document.querySelector(
      ".genoptions"
    ).innerHTML += `<div><button onclick="thingClicked('${i}');"><h3>${clicker.generators[i].name}(${clicker.generators[i].amount})</h3><p>${clicker.generators[i].description}</p><p class="cost">$${clicker.generators[i].cost}</p><p class="dps">${clicker.generators[i].dps} dps</p></button></div>`;
  }
}

function updateDollars() {
  if (Cookies.get("clicker") != null && Cookies.get("clicker") != "undefined") {
    var clicker1 = JSON.parse(Cookies.get("clicker"));
    for (const i in clicker.generators) {
      if (clicker1.generators[i] == null) {
        clicker1.generators[i] = clicker.generators[i];
      }
    }
    clicker = clicker1;
  }

  updateGenerators();
  updateDollarsPerSecond();

  setInterval(() => {
    let totalDps = 0;
    for (const i in clicker.generators) {
      const generatorDps = clicker.generators[i].amount * clicker.generators[i].dps;
      totalDps += generatorDps;
      clicker.dollars += generatorDps / 100;
    }
    updateDollarsPerSecond();

    if (clicker.dollars != 1) {
      document.getElementById("counter").innerHTML =
        String(clicker.dollars).split(".")[0] + " dollars";
    } else {
      document.getElementById("counter").innerHTML =
        String(clicker.dollars).split(".")[0] + " dollar";
    }
    delay++;
    if (delay >= 40) {
      Cookies.set("clicker", JSON.stringify(clicker), { expires: 100000 });
      delay = 0;
    }
  }, 10);
}

CSS代码 #

@keyframes click {
  50% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}

body {
  background-color: aquamarine;
}

h1,
#dps {
  font-family: "Joan", serif;
}

#dps {
  font-size: 15px;
}

#counter,
#dps {
  text-align: center;
  margin: 0px;
  margin-top: 21.44px;
}

#slightlydamagedcomputer {
  display: block;
  margin: auto;
}

#slightlydamagedcomputer:hover {
  cursor: pointer;
}

.upgradesleft {
  left: 0px;
}

.genright {
  right: 0px;
}

.upgradesleft,
.genright {
  position: absolute;
  top: 0px;
  height: 100%;
}

.upgradesleft h1,
.genright h1 {
  text-align: center;
}

.upgradeoptions button,
.genoptions button {
  background-color: aliceblue;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  height: 100px;
  width: 400px;
  display: block;
}

.upgradeoptions button {
  border-radius: 0px 15px 15px 0px;
  /*display: none;*/
}

.genoptions button {
  border-radius: 15px 0px 0px 15px;
  /*display: none;*/
}

.upgradeoptions div,
.genoptions div {
  position: relative;
}

.cost {
  left: 0px;
  top: 0px;
  border-radius: 15px;
}

.dps {
  right: 0px;
  top: 0px;
  border-radius: 0px 0px 0px 15px;
}

.cost,
.dps {
  background-color: lightgray;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  position: absolute;
  margin: 0px;
  padding: 5px;
}

修复要点 #

1. 补全clicker对象声明：原代码开头缺少const clicker = {，导致核心变量未定义，这是函数无法执行的根本原因。
2. 修正DPS计算逻辑：原函数循环中每次覆盖DOM内容，只会显示最后一个生成器的DPS，改为累加所有生成器的总DPS后再更新显示。
3. 触发updateDollarsPerSecond函数：
   • 取消thingClicked中函数调用的注释，购买生成器后立即更新DPS。
   • 页面初始化时调用一次函数，确保初始值正确显示。
   • 定时器回调中加入函数调用，实现实时更新。
4. 优化变量作用域：循环中使用const i避免全局变量污染。

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