Help with JavaScript and html

I am new to js, and am experimenting with ai. How can i go about adding another “upgrade”

** https://replit.com/@BluebayStudios/Ples-nerd#**


let nerd = localStorage.getItem("nerd") ? parseFloat(localStorage.getItem("nerd")) : 0;
let upgradeCount = localStorage.getItem("upgradeCount") ? parseInt(localStorage.getItem("upgradeCount")) : 0;
const scoreElement = document.getElementById("score");
const nerdImage = document.getElementById("nerd-image");
let upgradeInterval;

updateScore();

nerdImage.addEventListener("click", increaseScore);

if (upgradeCount > 0) {
  startUpgradeInterval(upgradeCount);
}

function startUpgradeInterval(upgrades) {
  upgradeInterval = setInterval(() => {
    nerd += upgrades * 0.5;
    updateScore();
    localStorage.setItem("nerd", nerd);
  }, 1000);
}

function increaseScore() {
  nerd++;
  updateScore();
  localStorage.setItem("nerd", nerd);
}

function buyItem(price) {
  if (nerd >= price) {
    nerd -= price;
    updateScore();
    localStorage.setItem("nerd", nerd);
    if (price === 50) {
      upgradeCount++;
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    }
  } else {
    alert("you don't have enough nerd to buy this item");
  }
}

function updateScore() {
  scoreElement.textContent = `nerd: ${nerd}`;
}

Meaning, having the upgrade do something after bought rom the shop.

Don’t know if this is what you are searching for but, idk, we can call a new upgrade something like Ultra Nerd Pack and the pack doubles the score.
You have to upgrade your html:

<div class="option">
  <h3>Ultra Nerd Pack</h3>
  <p>price: 200</p>
  <button onclick="buyUltraNerdPack()">Buy</button>
</div>

And update the js:

function buyUltraNerdPack() {
  const price = 200;
  if (nerd >= price) {
    nerd -= price;
    nerd *= 2;  // Double the score.
    updateScore();
    localStorage.setItem("nerd", nerd);
  } else {
    alert("you don't have enough nerd to buy this item");
  }
}
3 Likes

I would like the nerds to go up 2 every second, is this possible?

Yes, just adjust the startUpgradeInterval function.

The HTML you already know so for the the JS:

function buyItem(price) {
  if (nerd >= price) {
    nerd -= price;
    updateScore();
    localStorage.setItem("nerd", nerd);
    if (price === 50) {
      upgradeCount++;
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    } else if (price === 200) {
      upgradeCount += 4; // Increase upgrade count by 4 so that it effectively adds 2 nerds per second.
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    }
  } else {
    alert("you don't have enough nerd to buy this item");
  }
}

I’d suggest clear any intervals too, so adjust the UpgradeInterval for that:

function startUpgradeInterval(upgrades) {
  if (upgradeInterval) {
    clearInterval(upgradeInterval);  // Clear the thing
  }
  upgradeInterval = setInterval(() => {
    nerd += upgrades * 0.5;  // By this logic each upgrade adds 0.5 nerds per second. So 4 upgrades add 2 nerds.
    updateScore();
    localStorage.setItem("nerd", nerd);
  }, 1000);
}

I meant that I would like for the second upgrade to give you 2 per second, sorry.

Looks like i figured out something myself. Woo-hoo! Haha.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.