Farm Clicker game – Gold's value is increasing more than necessary

Issue

I’m trying to make a Farm Clicker game myself with Javascript. (In other words, as you click the Add Gold button, the user earns 1 gold and can obtain passive gold by buying some animals according to the number of gold he has.) But there is a problem with the program: If I save 50 gold and buy a goat, the gold suddenly increases more than necessary. The problem is most likely in the section that says setInterval, but I still couldn’t find the exact solution.

HTML

<head>
  <title>Farm clicker</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="content"></div>
  <script src="script.js"></script>
</body>

JS

// global variables
const myContent = document.getElementById("content");
var gold=0;
let animals = {};
var goldToAdd = 0;
// global functions

function addGoldButton() {
  let myButton = document.createElement("button");
  myButton.id = "addButton";
  myButton.addEventListener("click", ()=>addGold(1)); // add one
  myButton.innerHTML = "Add Gold!";
  myContent.appendChild(myButton);
}



addGoldButton();
function addGold(goldToAdd) {
  console.trace();
  if (gold == 0) {
    gold = goldToAdd;
    let goldCounter = document.createElement("h2");
    goldCounter.id = "goldCounter";
    goldCounter.innerHTML = "Gold: " + gold;
    myContent.appendChild(goldCounter);
  } else
  {
    gold += goldToAdd;
    document.getElementById("goldCounter").innerHTML = "Gold: " + gold;
  }
  // check for events on current gold level
  checkGold();
  goldToAdd=0;
}

function checkGold(){
  if (gold >= 50 && document.getElementById("goatBuyButton") == null) {
    let buttonBar = document.createElement("div");
    buttonBar.id = "buttonBar";
    let buyButton = document.createElement("button");
    buyButton.id = "goatBuyButton";
    buyButton.innerHTML = "Buy Goat (50g)";
    buyButton.addEventListener("click", ()=>buyAnimal("goat"));
    myContent.appendChild(buttonBar);
    buttonBar.appendChild(buyButton);
  }

  if (gold >= 90 && document.getElementById("pigBuyButton") == null) {
    let buttonBar = document.getElementById("buttonBar");
    let buyButton = document.createElement("button");
    buyButton.id = "pigBuyButton";
    buyButton.innerHTML = "Buy Pig (90g)";
    buyButton.addEventListener("click", ()=>buyAnimal("pig"));
    buttonBar.appendChild(buyButton);
  }

  if (gold >= 120 && document.getElementById("cowBuyButton") == null){
    buttonBar = document.getElementById("buttonBar");
    let buyButton = document.createElement("button");
    buyButton.id = "cowBuyButton";
    buyButton.innerHTML = "Buy Cow (120g)";
    buyButton.addEventListener("click", ()=>buyAnimal("cow"));

    buttonBar.appendChild(buyButton);
}

function buyAnimal(animal) {
  let itemBar = document.getElementById('itemBar');
  if (itemBar == null) {
    itemBar = document.createElement("div");
    itemBar.id = "itemBar";
    myContent.appendChild(itemBar);
  }

  switch (animal) {
    case "":
      //do something, don't and forget the break;
    case "goat":
      if (gold >= 50) {
        addGold(-50);
        if (animals.goats == null) {
          animals.goats = 1;
          let myElement = document.createElement("div");
          myElement.id = "goats";
          myElement.innerHTML = "Goat Quantity: " + animals.goats;
          itemBar.appendChild(myElement);
        } else {
          animals.goats += 1;
          document.getElementById("goats").innerHTML = "Goat Quantity: " + animals.goats;
        }
      }
      break;
    case "pig":
      if (gold >= 90) {
        addGold(-90);
        if (animals.pigs == null) {
          animals.pigs = 1;
          let myElement = document.createElement("div");
          myElement.id = "pigs";
          myElement.innerHTML = "Pig Quantity: " + animals.pigs;
          itemBar.appendChild(myElement);
        } else {
          animals.pigs += 1;
          document.getElementById("pigs").innerHTML = "Pig Quantity: " + animals.pigs;
        }
      }
      break;
    case "cow":
      if (gold >= 120) {
        addGold(-120);
        if (animals.cows == null) {
          animals.cows = 1;
          let myElement = document.createElement("div");
          myElement.id = "cows";
          myElement.innerHTML = "Cow Quantity: " + animals.cows;
          itemBar.appendChild(myElement);
        } else {
          animals.cows += 1;
          document.getElementById("cows").innerHTML = "Cow Quantity: " + animals.cows;
        }
      }
      break;
    default:
      console.log("no animal found");
  }
}
function passiveGold() {

  if (animals.goats > 0) {
    goldToAdd += animals.goats*5; //50=>5 10=>1
  }
  if (animals.pigs > 0) {
    goldToAdd += animals.pigs*10; //90=>10  9=>1
  }
  if (animals.cows > 0) {
    goldToAdd += animals.cows*15; //120=>15 8=>1
  }
  addGold(goldToAdd);
}
setInterval(passiveGold, 10000);
}

Solution

There are two main issues with the gold incrementation here. There’s a brace out of place leading to (I think) the setInterval be created several times (each time checkGold is called, in fact). Secondly, the goldToAdd amount is not zero at the start of passiveGold. I’ve also edited addGold so that two gold counters don’t turn up when you hit 0 gold. Snippet below:

const myContent = document.getElementById("content");
var gold=0;
let animals = {};
var goldToAdd = 0;
// global functions

function addGoldButton() {
  let myButton = document.createElement("button");
  myButton.id = "addButton";
  myButton.addEventListener("click", ()=>addGold(1)); // add one
  myButton.innerHTML = "Add Gold!";
  myContent.appendChild(myButton);
}


addGoldButton();

function addGold(goldToAdd) {
  if(document.getElementById("goldCounter") == null) {
    let goldCounter = document.createElement("h2");
    goldCounter.id = "goldCounter";
    myContent.appendChild(goldCounter);
  }
  
  gold += goldToAdd;
  document.getElementById("goldCounter").innerHTML = "Gold: " + gold;
  
  checkGold();
}

function checkGold(){
  if (gold >= 50 && document.getElementById("goatBuyButton") == null) {
    let buttonBar = document.createElement("div");
    buttonBar.id = "buttonBar";
    let buyButton = document.createElement("button");
    buyButton.id = "goatBuyButton";
    buyButton.innerHTML = "Buy Goat (50g)";
    buyButton.addEventListener("click", ()=>buyAnimal("goat"));
    myContent.appendChild(buttonBar);
    buttonBar.appendChild(buyButton);
  }

  if (gold >= 90 && document.getElementById("pigBuyButton") == null) {
    let buttonBar = document.getElementById("buttonBar");
    let buyButton = document.createElement("button");
    buyButton.id = "pigBuyButton";
    buyButton.innerHTML = "Buy Pig (90g)";
    buyButton.addEventListener("click", ()=>buyAnimal("pig"));
    buttonBar.appendChild(buyButton);
  }

  if (gold >= 120 && document.getElementById("cowBuyButton") == null){
    buttonBar = document.getElementById("buttonBar");
    let buyButton = document.createElement("button");
    buyButton.id = "cowBuyButton";
    buyButton.innerHTML = "Buy Cow (120g)";
    buyButton.addEventListener("click", ()=>buyAnimal("cow"));

    buttonBar.appendChild(buyButton);
  }
}

function buyAnimal(animal) {
  let itemBar = document.getElementById('itemBar');
  if (itemBar == null) {
    itemBar = document.createElement("div");
    itemBar.id = "itemBar";
    myContent.appendChild(itemBar);
  }

  switch (animal) {
    case "":
      //do something, don't and forget the break;
    case "goat":
      if (gold >= 50) {
        addGold(-50);
        if (animals.goats == null) {
          animals.goats = 1;
          let myElement = document.createElement("div");
          myElement.id = "goats";
          myElement.innerHTML = "Goat Quantity: " + animals.goats;
          itemBar.appendChild(myElement);
        } else {
          animals.goats += 1;
          document.getElementById("goats").innerHTML = "Goat Quantity: " + animals.goats;
        }
      }
      break;
    case "pig":
      if (gold >= 90) {
        addGold(-90);
        if (animals.pigs == null) {
          animals.pigs = 1;
          let myElement = document.createElement("div");
          myElement.id = "pigs";
          myElement.innerHTML = "Pig Quantity: " + animals.pigs;
          itemBar.appendChild(myElement);
        } else {
          animals.pigs += 1;
          document.getElementById("pigs").innerHTML = "Pig Quantity: " + animals.pigs;
        }
      }
      break;
    case "cow":
      if (gold >= 120) {
        addGold(-120);
        if (animals.cows == null) {
          animals.cows = 1;
          let myElement = document.createElement("div");
          myElement.id = "cows";
          myElement.innerHTML = "Cow Quantity: " + animals.cows;
          itemBar.appendChild(myElement);
        } else {
          animals.cows += 1;
          document.getElementById("cows").innerHTML = "Cow Quantity: " + animals.cows;
        }
      }
      break;
    default:
      console.log("no animal found");
  }
}
function passiveGold() {
  goldToAdd = 0;
  if (animals.goats > 0) {
    goldToAdd += animals.goats*5; //50=>5 10=>1
  }
  if (animals.pigs > 0) {
    goldToAdd += animals.pigs*10; //90=>10  9=>1
  }
  if (animals.cows > 0) {
    goldToAdd += animals.cows*15; //120=>15 8=>1
  }
  addGold(goldToAdd);
}
setInterval(passiveGold, 10000);
<div id="content"></div>

Answered By – Ben Stephens

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.