HTML / JS增量游戏中的错误

Question

我正在创建一个增量游戏，就像cookie clicker一样。我称之为Atom Clicker。它应该像任何点击游戏一样工作，但我看不到找到一个错误。

当我运行我的代码时，我可以得到原子就好了，我可以购买“Molecules”升级版。然后bug开始了。分子升级什么都不做！我设置为以{2}数量的分子加入TotalAutoClick变量。那么如果您尝试购买Element升级，则没有任何反应！如果您多次单击“购买元素”按钮，则元素数量将变为NaN。然后，如果你继续点击buy元素，你的原子会下降，但元素的数量会保持NaN。

出了什么问题？

//Getting atoms

var Atoms = 0;

function AtomClick(number) {
  Atoms = Atoms + number;
  document.getElementById("Atoms").innerHTML = Atoms;
};

//First Upgrade - Elements
var Elements = 0;

function buyElement() {
  var ElementCost = Math.floor(10 * Math.pow(1.3, Elements)); //works out the cost of this Element
  if (Atoms >= ElementCost) { //checks that the player can afford the Element
    Elements = Elements + 1; //increases number of Elements
    Atoms = Atoms - ElementCost; //removes the Atoms spent
    document.getElementById('Elements').innerHTML = Elements; //updates the number of Elements for the user
    document.getElementById('Atoms').innerHTML = Atoms; //updates the number of Atoms for the user
  };
  var nextECost = Math.floor(10 * Math.pow(1.3, Element)); //works out the cost of the next Element
  document.getElementById('ElementCost').innerHTML = nextECost; //updates the Element cost for the user
};


//Second Upgrade - Molecules
var Molecules = 0;

function buyMolecule() {
  var MoleculeCost = Math.floor(100 * Math.pow(1.5, Molecules)); //works out the cost of this Molecule
  if (Atoms >= MoleculeCost) { //checks that the player can afford the Molecule
    Molecules = Molecules + 1; //increases number of Molecules
    Atoms = Atoms - MoleculeCost; //removes the Atoms spent
    document.getElementById('Molecules').innerHTML = Molecules; //updates the number of Molecules for the user
    document.getElementById('Atoms').innerHTML = Atoms; //updates the number of Atoms for the user
  };
  var nextMCost = Math.floor(100 * Math.pow(1.5, Molecule)); //works out the cost of the next Molecule
  document.getElementById('MoleculeCost').innerHTML = nextMCost; //updates the Molecule cost for the user
};

//Finding auto click

//Molecule APS (Atoms Per Seconds)
var MoleculeAC = Molecules * 2;

//Total aouto click
var AutoClickTotal = Elements + MoleculesAC;





window.setInterval(function() {

  AtomClick(Molecules);

}, 1000);

<button onclick="AtomClick(1)">*Image of atom needed*</button>
<br /> Atoms: <span id="Atoms">0</span>
<br />

<button onclick="buyElement()">Buy Element</button>
<br /> Elements: <span id="Element">0</span>
<br /> Element Cost: <span id="ElementCost">10</span>
<br />

<button onclick="buyMolecule()">Buy Molecule</button>
<br /> Molecules: <span id="Molecules">0</span>
<br /> Molecule Cost: <span id="MoleculeCost">100</span>

Answer 1

错误似乎围绕着不一致的变量名称和元素ID 要进行故障排除，请检查浏览器控制台是否存在JavaScript错误。

1. 变量名称：MoleculeAC / MoleculesAC
2. 变量名称：Molecule / Molecules
3. 元素ID：元素/元素
＆＃13;
＆＃13;
//Getting atoms

var Atoms = 1000;
var Elements = 0;
var Molecules = 0;

function AtomClick(number) {
  Atoms = Atoms + number;
  document.getElementById("Atoms").innerHTML = Atoms;
};

function buyElement() {
  var ElementCost = Math.floor(10 * Math.pow(1.3, Elements)); //works out the cost of this Element
  if (Atoms >= ElementCost) { //checks that the player can afford the Element
    Elements++; //increases number of Elements
    Atoms -= ElementCost; //removes the Atoms spent
    document.getElementById('Elements').innerHTML = Elements; //updates the number of Elements for the user
    document.getElementById('Atoms').innerHTML = Atoms; //updates the number of Atoms for the user
  };
  var nextECost = Math.floor(10 * Math.pow(1.3, Elements)); //works out the cost of the next Element
  document.getElementById('ElementCost').innerHTML = nextECost; //updates the Element cost for the user
};


function buyMolecule() {
  var MoleculeCost = Math.floor(100 * Math.pow(1.5, Molecules)); //works out the cost of this Molecule
  if (Atoms >= MoleculeCost) { //checks that the player can afford the Molecule
    Molecules++; //increases number of Molecules
    Atoms -= MoleculeCost; //removes the Atoms spent
    document.getElementById('Molecules').innerHTML = Molecules; //updates the number of Molecules for the user
    document.getElementById('Atoms').innerHTML = Atoms; //updates the number of Atoms for the user
  };
  var nextMCost = Math.floor(100 * Math.pow(1.5, Molecules)); //works out the cost of the next Molecule
  document.getElementById('MoleculeCost').innerHTML = nextMCost; //updates the Molecule cost for the user
};



window.setInterval(function() {

  AtomClick(Elements + (Molecules * 2));

}, 1000);
＆＃13;
<button onclick="AtomClick(1)">*Image of atom needed*</button>
<br> Atoms: <span id="Atoms">1000</span>
<br>

<button onclick="buyElement()">Buy Element</button>
<br> Elements: <span id="Elements">0</span>
<br> Element Cost: <span id="ElementCost">10</span>
<br>

<button onclick="buyMolecule()">Buy Molecule</button>
<br> Molecules: <span id="Molecules">0</span>
<br> Molecule Cost: <span id="MoleculeCost">100</span>
＆＃13;
＆＃13;
＆＃13;