How can I change a variable after a certain amount of clicks?-CodePudding

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

CodePudding user response：

one proposal can be :

calculated a number of click needed to level up based on level and a coefficient
stored previous experience gain since last level up
you can level up if experience - previousexperience reach needed number of click

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>

CodePudding user response：

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