Progress Bar for Leveling System

问题

So this is kind of 2 questions in one, but basically I'm making a ranking/leveling system for my Discord bot (Discord.js) and I'm having problems with a progress bar for the next level. Here's what I've got so far:

        const x = "□";
        let progressBarArr = [x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x];

        let currentLevel = Math.ceil(result.allocatedExp/1000)*1000;
        if (currentLevel < 1000) currentLevel = 1000;

        let progressBar = "["+progressBarArr.fill("=", Math.ceil(result.allocatedExp/currentLevel)*35).join('')+"]"

Every 1,000 XP You gain you level up, So say the XP for a user is 1234 they would be level 1 and 23% of the way to level 2. I just need to show that in a progress-bar type style. The code I have right now works but only if they have under 1k XP, otherwise the bar is always full.

The other question I have is most likely trivial for most people but I'm stumped by it, say a user has 15k xp, how would I get the 15 from 15000 to say that they're level 15?

Thanks!

回答1:

Just take Math.floor(xp / 1000) to get the player's current level.

For the progress bar, use modulo 1000 to check how far the player is between the last 1000 and the next 1000, and multiply the result by 35 to figure out how many =s to display:

const showBar = xp => {
  const currentLevel = Math.floor(xp / 1000);
  const progress = (xp % 1000) / 1000;
  const progressOutOf35 = Math.round(progress * 35);
  
  const x = "□";
  const barStr = `[${'='.repeat(progressOutOf35)}${'□'.repeat(35 - progressOutOf35)}]`;
  console.log(barStr + ', currntly at level ' + currentLevel);
};

showBar(1500);
showBar(3900);
showBar(15000);

来源：https://stackoverflow.com/questions/56918073/progress-bar-for-leveling-system

标签

javascript

node.js

math

progress-bar

discord.js