Cookie Clicker类多资源游戏商店购买逻辑问题求助

嘿，我来帮你搞定这个资源变负数的问题！你遇到的核心问题是语法错误+逻辑判断失效，导致不管资源够不够，都会执行消耗代码。咱们一步步拆解问题，再给你修复好的代码：

主要问题分析 #

1. if语句完全写错了，等于没做判断 #

你原来的购买函数里的if是这么写的：

if (oil >= 100 + (cars1)) (gold >= 50 + (cars1)); { ... }

这完全不是正确的逻辑判断写法！

• 这里的(gold >= 50 + (cars1))是一个独立的表达式，和前面的if半毛钱关系都没有
• 后面的{ ... }是一个独立代码块，不管if条件满足不满足，都会执行里面的资源消耗代码，这就是资源变负数的直接原因！

正确的逻辑与判断应该用&&连接两个条件，而且大括号要紧跟if的条件：

if (oil >= 需要的油量 && gold >= 需要的金币) {
  // 只有条件满足才执行这里的代码
}

2. 变量cars1没初始化 #

你在代码里用到了cars1来计数购买的Car数量，但从来没给它初始值（比如let cars1 = 0;），这会导致它默认是undefined，和数字计算的时候会变成NaN，判断条件直接失效，自然会执行消耗代码。

3. 成本逻辑不匹配+语法小错误 #

• 你在if里判断的是oil >= 100 + cars1（看起来是想让成本递增？），但消耗的时候只减了固定的100油和50金，逻辑不统一
• 代码里的cars1 += 1 carcost = 50少了分号，浏览器会解析报错，导致后续代码执行异常
• 按钮文本的拼接也写错了，把成本显示得乱七八糟

4. 重复的DOM元素ID #

你页面里有两个<p id="gold">和一个<element id="gold">，getElementById只会返回第一个匹配的元素，这会导致你的资源显示不更新或者更新到错误的元素上。

修复后的完整代码 #

我已经把所有问题都修复了，还加了注释说明修改的地方：

<big><b><h1>Gold</h1></b></big>
<img src="mince.png" alt="mince" style="width:180px;height:180px;border:0;" onclick="clickme()" />
<!-- 把重复的gold id改成gold-display，避免冲突 -->
<h2><bold><big>You have <span id="gold-display"></span> grams of gold</big></bold></h2>
<!-- 删除重复的p id="gold" -->
<br><br>

<script>
let gold = 0;
let cps = 0;
let autoGs = 0;
let employGs = 0;
let clicker = 1;
let adminGs = 0;

function clickme() {
  gold += clicker;
  // 更新到正确的元素
  document.getElementById("gold-display").innerHTML = gold;
}
</script>

<br><br>

<img src="barel.png" alt="Barel" style="width:200px;height:180px;border:0;" onclick="clickme1()" />
<!-- 同样把oil的元素改成span，避免重复id -->
<h2><bold><big>You have <span id="oil-display"></span> barrels of oil</big></bold></h2>

<script>
let oil = 0;
let cps1 = 0;
let bakers1 = 0;
let godlybakers1 = 0;
let clicker1 = 1;
let gloves1 = 0;

function clickme1() {
  oil += clicker1;
  document.getElementById("oil-display").innerHTML = oil;
}
</script>

<button onclick="automobily()"><p id="cars1"></p></button>

<script>
// 初始化cars1变量，默认0
let cars1 = 0;
// 定义基础成本，方便后续修改
const baseOilCost = 100;
const baseGoldCost = 50;

// 初始化按钮文本
document.getElementById("cars1").innerHTML = `Car (${cars1}) ${baseOilCost} oil and ${baseGoldCost} gold`;

function automobily() {
  // 计算当前需要的成本（如果是递增成本，这里用base + cars1，比如第1个是100+0=100，第2个是100+1=101）
  const requiredOil = baseOilCost + cars1;
  const requiredGold = baseGoldCost + cars1;

  // 正确的逻辑判断：油和金都足够才执行购买
  if (oil >= requiredOil && gold >= requiredGold) {
    // 消耗对应的资源
    oil -= requiredOil;
    gold -= requiredGold;
    // 增加Car数量
    cars1 += 1;

    // 更新资源显示
    document.getElementById("oil-display").innerHTML = oil;
    document.getElementById("gold-display").innerHTML = gold;
    // 更新按钮文本，显示当前数量和下一次的成本
    document.getElementById("cars1").innerHTML = `Car (${cars1}) ${baseOilCost + cars1} oil and ${baseGoldCost + cars1} gold`;
  }
}
</script>

额外说明 #

• 我把资源显示的元素改成了<span>，并给了唯一的ID，避免重复ID导致的显示问题
• 把成本拆成了基础常量，方便后续调整数值
• 购买逻辑里用了模板字符串（`...`）来拼接文本，比之前的加号拼接更清晰
• 现在只有当油和金都满足当前需要的成本时，才会执行购买操作，再也不会出现资源负数的情况啦！

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