调平系统进度条

问题描述

所以这是一个 2 个问题，但基本上我正在为我的 Discord 机器人 (Discord.js) 制作排名/等级系统，并且我在下一个级别的进度条上遇到问题.到目前为止，这是我所得到的:

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('')+"]"

每增加 1,000 XP，您就会升级，因此假设用户的 XP 为 1234，他们将达到 1 级，并且达到 2 级的 23%.我只需要在进度条类型样式.我现在拥有的代码有效，但前提是他们的 XP 低于 1k，否则栏总是满的.

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.

我的另一个问题对大多数人来说很可能是微不足道的，但我被它难住了，假设用户有 15k xp，我如何从 15000 中得到 15 来表示他们是 15 级?

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?

谢谢！

推荐答案

只需使用Math.floor(xp/1000)即可获取玩家当前等级.

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

对于进度条，使用模 1000 来检查玩家在最后 1000 和下 1000 之间的距离，然后将结果乘以 35 来计算要显示多少 =:

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

这篇关于调平系统进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！