How can I add an upgrade that gives you two every time you click?

BluebayStudios · October 23, 2023, 9:48pm

I need to make an upgrade that gives the player two points instead of one, but I am having trouble doing so.
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}`;
}

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



function startUpgradeInterval(upgrades) {
  if (upgradeInterval) {
    clearInterval(upgradeInterval);  
  }
  upgradeInterval = setInterval(() => {
    nerd += upgrades * 0.5; 
    updateScore();
    localStorage.setItem("nerd", nerd);
  }, 1000);
}
function buyCrateNerd(price) {
  if (nerd >= price) {
    nerd -= price;
    updateScore();
    localStorage.setItem("nerd", nerd);
    if (price === 50) {
      upgradeCount++;
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    } else if (price === 20000) {
      upgradeCount +=20; 
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    }
  } else {
    alert("you don't have enough nerd to buy this item");
  }
}

const audio = new Audio("plesnerd.wav");
audio.loop = true;
audio.play();

function buyVanNerd(price) {
  if (nerd >= price) {
    nerd -= price;
    updateScore();
    localStorage.setItem("nerd", nerd);
    if (price === 50) {
      upgradeCount++;
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    } else if (price === 100000) {
      upgradeCount +=100; 
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    }
  } else {
    alert("you don't have enough nerd to buy this item");
  }
}
function buyYachtNerd(price) {
  if (nerd >= price) {
    nerd -= price;
    updateScore();
    localStorage.setItem("nerd", nerd);
    if (price === 50) {
      upgradeCount++;
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    } else if (price === 1000000) {
      upgradeCount +=200; 
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    }
  } else {
    alert("you don't have enough nerd to buy this item");
  }
}
function buyMansionNerd(price) {
  if (nerd >= price) {
    nerd -= price;
    updateScore();
    localStorage.setItem("nerd", nerd);
    if (price === 50) {
      upgradeCount++;
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    } else if (price === 10000000) {
      upgradeCount +=1000; 
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    }
  } else {
    alert("you don't have enough nerd to buy this item");
  }
}
function buyIslandNerd(price) {
  if (nerd >= price) {
    nerd -= price;
    updateScore();
    localStorage.setItem("nerd", nerd);
    if (price === 50) {
      upgradeCount++;
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    } else if (price === 100000000) {
      upgradeCount +=10000; 
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    }
  } else {
    alert("you don't have enough nerd to buy this item");
  }
}
function buyCountryNerd(price) {
  if (nerd >= price) {
    nerd -= price;
    updateScore();
    localStorage.setItem("nerd", nerd);
    if (price === 50) {
      upgradeCount++;
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    } else if (price === 1000000000) {
      upgradeCount +=20000; 
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    }
  } else {
    alert("you don't have enough nerd to buy this item");
  }
}
function buyContinentNerd(price) {
  if (nerd >= price) {
    nerd -= price;
    updateScore();
    localStorage.setItem("nerd", nerd);
    if (price === 50) {
      upgradeCount++;
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    } else if (price === 10000000000) {
      upgradeCount +=200000; 
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    }
  } else {
    alert("you don't have enough nerd to buy this item");
  }
}


<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.cdnfonts.com/css/8bit-wonder" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <link rel=icon href=data:>
  <style>
    .center {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="center">
    <h1>Ples Nerd</h1>
    <h2 id="score">nerd: 0</h2>
    <img src="nerd.png" id="nerd-image">
    <embed src="plesnerd.wav" loop="true" autostart="true" width="2" height="2">

    <div id="shop">
      <h2>shop</h2>
      <div id="options" class="center">
        <div class="option">
          <h3>handfull of nerd</h3>
          <p>price: 50</p>
          <button onclick="buyItem(50)">Buy</button>
        </div>

        <div class="option">
          <h3>bucket of nerd</h3>
          <p>price: 1,500</p>
          <button onclick="buyBucketNerd(1500)">Buy</button>
        </div>

        <div class="option">
          <h3>crate of nerd</h3>
          <p>price: 20,000</p>
          <button onclick="buyCrateNerd(20000)">Buy</button>
        </div>

        <div class="option">
          <h3>van of nerd</h3>
          <p>price: 100,000</p>
          <button onclick="buyVanNerd(100000)">Buy</button>
        </div>

        <div class="option">
          <h3>yacht of nerd</h3>
          <p>price: 1,000,000</p>
          <button onclick="buyYachtNerd(1000000)">Buy</button>
        </div>

        <div class="option">
          <h3>mansion of nerd</h3>
          <p>price: 10,000,000</p>
          <button onclick="buyMansionNerd(10000000)">Buy</button>
        </div>

        <div class="option">
          <h3>island of nerd</h3>
          <p>price: 100,000,000</p>
          <button onclick="buyIslandNerd(100000000)">Buy</button>
        </div>

        <div class="option">
          <h3>country of nerd</h3>
          <p>price: 1,000,000,000</p>
          <button onclick="buyCountryNerd(1000000000)">Buy</button>
        </div>

        <div class="option">
          <h3>continent of nerd</h3>
          <p>price: 10,000,000,000</p>
          <button onclick="buyContinentNerd(10000000000)">Buy</button>
        </div>

        <div class="option">
          <h3>coming soon!</h3>
          <p>price: 100,000,000,000</p>
          <button onclick="buyWorldnerd()"> </button>
        </div>
      </div>
    </div>

    <h2>Clicking Upgrades</h2>
    <div id="options" class="center">
      <div class="option">
        <h3>coming soon!</h3>
        <p>price: ???</p>
        <button onclick="">???</button>
      </div>
    </div>

    <script src="script.js"></script>
  </div>
  <p class="center">made by bluebaystudios 👻</p>
</body>

</html>

python660 · October 23, 2023, 11:09pm

Hmm, instead of doing nerds + = 1, do nerds += incrementAmount and increase incrementAmount every time you buy an upgrade

BluebayStudios · October 23, 2023, 11:10pm

I’m a bit new to js, can you give me an example?

OwenStritz · October 23, 2023, 11:40pm

i assume you are talking about an upgrade that will double how much each click adds.
keep in mind there are many solutions in javascript i will give you one that may work depending on the code you have set up.

have a variable that will determine how much each click will add. make it start out as what ever you want, probably 1 though
say you make the upgrade “times 2 per click”, you will want to multiply that increment variable by two.
then when you click the nerds i would assume without looking at the code its an “onclick” event that uses a function, so in the function make it change you money/nerd variable by that increment variable. for example: nerds += perClick nerds being your money and perClick being that increment variable.

and example of this all would be:

let money = 0;
let inc = 1;

#onlick function for the clicker (uses function click)
#onlick function for the increment upgrade (uses function multiply)

function click () {
money += inc
}

function multiply () {
inc *= 2
}

BluebayStudios · October 23, 2023, 11:41pm

Can I change the name of the function “multiply”? Can you apply this to my code as well?


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}`;
}

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



function startUpgradeInterval(upgrades) {
  if (upgradeInterval) {
    clearInterval(upgradeInterval);  
  }
  upgradeInterval = setInterval(() => {
    nerd += upgrades * 0.5; 
    updateScore();
    localStorage.setItem("nerd", nerd);
  }, 1000);
}
function buyCrateNerd(price) {
  if (nerd >= price) {
    nerd -= price;
    updateScore();
    localStorage.setItem("nerd", nerd);
    if (price === 50) {
      upgradeCount++;
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    } else if (price === 20000) {
      upgradeCount +=20; 
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    }
  } else {
    alert("you don't have enough nerd to buy this item");
  }
}

const audio = new Audio("plesnerd.wav");
audio.loop = true;
audio.play();

function buyVanNerd(price) {
  if (nerd >= price) {
    nerd -= price;
    updateScore();
    localStorage.setItem("nerd", nerd);
    if (price === 50) {
      upgradeCount++;
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    } else if (price === 100000) {
      upgradeCount +=100; 
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    }
  } else {
    alert("you don't have enough nerd to buy this item");
  }
}
function buyYachtNerd(price) {
  if (nerd >= price) {
    nerd -= price;
    updateScore();
    localStorage.setItem("nerd", nerd);
    if (price === 50) {
      upgradeCount++;
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    } else if (price === 1000000) {
      upgradeCount +=200; 
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    }
  } else {
    alert("you don't have enough nerd to buy this item");
  }
}
function buyMansionNerd(price) {
  if (nerd >= price) {
    nerd -= price;
    updateScore();
    localStorage.setItem("nerd", nerd);
    if (price === 50) {
      upgradeCount++;
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    } else if (price === 10000000) {
      upgradeCount +=1000; 
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    }
  } else {
    alert("you don't have enough nerd to buy this item");
  }
}
function buyIslandNerd(price) {
  if (nerd >= price) {
    nerd -= price;
    updateScore();
    localStorage.setItem("nerd", nerd);
    if (price === 50) {
      upgradeCount++;
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    } else if (price === 100000000) {
      upgradeCount +=10000; 
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    }
  } else {
    alert("you don't have enough nerd to buy this item");
  }
}
function buyCountryNerd(price) {
  if (nerd >= price) {
    nerd -= price;
    updateScore();
    localStorage.setItem("nerd", nerd);
    if (price === 50) {
      upgradeCount++;
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    } else if (price === 1000000000) {
      upgradeCount +=20000; 
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    }
  } else {
    alert("you don't have enough nerd to buy this item");
  }
}
function buyContinentNerd(price) {
  if (nerd >= price) {
    nerd -= price;
    updateScore();
    localStorage.setItem("nerd", nerd);
    if (price === 50) {
      upgradeCount++;
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    } else if (price === 10000000000) {
      upgradeCount +=200000; 
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    }
  } else {
    alert("you don't have enough nerd to buy this item");
  }
}

OwenStritz · October 23, 2023, 11:43pm

i mean, if you want. function dont have to have a specific name. what is inside of them does really have anything to do with the name (if you’re a psycho path that is). Really you should name your functions what they are especially when you are learning code. unless you trying to make it harder for people to read and so they cant cheat using the console just name them what they are.

edit: just to make it more clear im saying to do the same thing you did here.

nerdImage.addEventListener("click", increaseScore);

only instead you replace “nerdImage” what ever you upgrade button is called by doing the same thing you did with the image setting a variable to the id of that thing (you might have uses class, or posible that tags name idk). but anways you then replcae increaseScore with that multiply functions name

BluebayStudios · October 23, 2023, 11:47pm

I am unable to apply this to my code, as i assume i can’t have the function alone? Sorry for the confusion.

OwenStritz · October 23, 2023, 11:52pm

what do you mean you cant have this function alone?

BluebayStudios · October 23, 2023, 11:53pm

So i replace “nerdImage” wit the name of my function?

The multiply function.

QwertyQwerty88 · October 24, 2023, 12:00am

No. Replace nerdImage with the variable of the upgrade button.

OwenStritz · October 24, 2023, 12:01am

so do you even know javascript? (kidding btw i get your new)

so nerdImage is a variable. any time you see a work with a .somthing behind it its a variable and the .somthing is a function in this case nerdImage is a variable i assume you made at the begaining and and .addEventListener is the function (.addEventListener is a built in function, dont get it confused with the functions your make yourself). Any ways in the .addEventListener you give it was event its listening for in this case a click and then you give it the code you want it to run when that event has happend in this case you chose a function. You need to change that function “increaseScore” to what ever you named the function for multiplying the increment variable. And as for that nerdImage that needs to be changed to somthing else. to change that you must ad a new varible at the very top of the document under anyname you want for now ill call it button. you want to set the button to the id of the button for upgrade. then change nerdImage to that new button variable.

KEEP IN MIND YOU ARE NOT REPLACING THE CURRENT EVENT LISTENER YOU ARE ADDING A NEW ONE

i also want you to understand this is alot for some one who is new to js

BluebayStudios · October 24, 2023, 12:06am

Looks like I have lots to learn haha. Thanks for the explanation. Still a bit confused, but it mostly makes sense. Can you give me a snippet?

QwertyQwerty88 · October 24, 2023, 12:21am

Okay so you made a variable for nerdImage

const nerdImage = document.getElementById("nerd-image");

Now make another one for your upgrade button.

const upgradeButton = document.getElementById("upgrade");

And add an event listener to that:

upgradeButton.addEventListener("click", upgrade);

Also make a variable for the amount of nerds to give per click, so:

let nerdsPerClick = 1;

Now, in the increaseScore function use nerd += nerdsPerClick; instead of nerd++

And make the upgrade function:

function upgrade() {
  nerdsPerClick++; // Change this line to change what the upgrade does.
}

RedCoder · October 24, 2023, 12:40am

Instead of doing nerd++; you can do nerd += points_per_click. At the beginning of your repl, set points_per_click to 1. Whenever they choose to buy the chosen upgrade, just increase points_per_click and your program will work smoothly! If you you’d like me to implement this for you, feel free to invite me to your repl and I can do it!

BluebayStudios · October 24, 2023, 2:24am

Yes, that would be great, I’ve added you.

RedCoder · October 24, 2023, 3:28am

Excited to see how your project turns out!

BluebayStudios · October 24, 2023, 11:55am

Thanks! I made it as a joke with my friends, but I’m having fun making it!

BluebayStudios · October 24, 2023, 1:46pm

@RedCoder can you make the nerds per click save?

boston2029 · October 25, 2023, 1:51am

You mean like save the next time they come on the page? You might want to make a separate topic for that, but I’ll answer it here anyway.

localStorage lets you save info to the user’s computer/browser. So basically, to save any kind of variable, you type this JavaScript code:

localStorage.setItem("varName", 3) // 3 is your value

The value can be almost anything, but I think it’s all converted to a string. Not sure 100%, so it’s safe to just convert it to a number later on.

Anyway, first you have to check if that item was ever set. Here’s an example you could use:

let nerdsPerClick = Number(localStorage.getItem("varName")) ?? 1

This will get the value of varName, and if it’s null (aka it doesn’t exist yet), then the Number will convert it to a 0. The ?? operator is like ||; it basically says or, but allows for numbers like 0 (0 is technically equal to false which could mess up some things). So it will check that, if that value was stored, it will restore it. But if it wasn’t stored before, it will just default to one.

Later in your code when a player buys the powerup, you can update the item. Here’s an example (I didn’t look through your entire implementation so idk exactly how you have this):

function upgradeNerdsPerClick() {
    nerdsPerClick*=2 // Multiply the nerds per click by two (or whatever number)
    localStorage.setItem("varName", nerdsPerClick) // Save the variable's value to their computer
}

Of course, you can change varName to anything, as long as you change it in every snippet of code. It won’t matter much, but if you’re working with a lot of them, you should name them (just as you would regular variables).

This should work well, but yet again I did not adjust it to your exact case, so this is only “the way” you would do it. (Like how to store variables on their PC)

system · November 1, 2023, 1:52am

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