Hey y'all I have started working on a clicker RPG, where you gain experience every time you click your hero character. Right now I have it so you gain a level after 10 clicks, but thinking ahead I will need to have higher click amounts for the high levels. I can't think of a way to implement this without writing a mountain of code. What would be a simple way? The only thing I can think of is to manually tie in gaining levels to how many clicks the experience bar has, but for that I would need to use a bunch of OR operators.
html
<img id="heroChar" src="hero.png" alt="" onclick="gainExperience()">
<p id="experience-bar"></p>
<p id="level-bar"></p>
javascript
let experienceMeter = document.getElementById("experience-bar");
let levelMeter = document.getElementById("level-bar")
let level = 0;
let experience = 0;
const gainExperience = () => {
experience += 1;
experienceMeter.textContent = `Experience: ${experience}`
levelMeter.textContent = `Level: ${level}`
levelUp();
}
const levelUp = () => {
if (experience === 9 || experience === 19) {
level += 1;
}
}
one proposal can be :
let experienceMeter = document.getElementById("experience-bar");
let levelMeter = document.getElementById("level-bar")
let level = 0;
let coef = 10.5;
let experience = 0;
let previousExperience = 0;
const gainExperience = () => {
experience += 1;
experienceMeter.textContent = `Experience: ${experience}`
levelMeter.textContent = `Level: ${level}`
levelUp();
}
const levelUp = () => {
var neededExperience = level*coef;
if ((experience - previousExperience) >= neededExperience) {
level += 1;
previousExperience = experience;
}
}<img id="heroChar" src="hero.png" alt="hero" onclick="gainExperience()">
<p id="experience-bar"></p>
<p id="level-bar"></p>You can use target experience for next level and re-calculate it every level ups.
let experienceMeter = document.getElementById("experience-bar");
let levelMeter = document.getElementById("level-bar")
let level = 0;
let experience = 0;
let next_lvl_xp = <<YOUR_TARGET>>;
const gainExperience = () => {
experience += 1;
experienceMeter.textContent = `Experience: ${experience}`
levelMeter.textContent = `Level: ${level}`
levelUp();
}
const levelUp = () => {
if (experience === next_lvl_xp) {
level += 1;
next_lvl_xp = <<YOUR_PROGRESSION_FUNCTION>>;
// example
// next_lvl_xp += 10 * level;
}
}