类使命召唤多等级XP系统区间进度百分比计算方案

问题背景 #

我在为网站开发一套参考《使命召唤》等级机制的XP/等级系统，预设的等级XP区间如下：

• Level 1：0 - 100XP
• Level 2：100 - 200XP
• Level 3：200 - 300XP

最初我用全局比例计算进度，在1级时结果符合预期：

const currentXp = 50;
const nextLevel = 100;

function calculateProgress(currentXp ,nextLevel) {
  return (currentXp / nextLevel) * 100;
}

// 返回50%，进度条填充一半，结果正确

但当XP跨过100进入更高等级后，这个公式的计算结果就出现了偏差：

const currentXp = 150 
const nextLevel = 200

function calculateProgress(currentXp, nextLevel) {
  return (currentXp / nextLevel) * 100;
}

// 返回75%，进度条显示75%填充，但正确结果应为50%
// 原因：150XP处于等级2的区间（100XP-200XP）中点，区间内进度实际是50%

核心需求：不计算当前XP占下一等级阈值的全局比例，仅计算当前XP在所处等级对应XP区间内的进度占比，匹配《使命召唤》的等级进度显示逻辑。

实现思路 #

进度计算的核心逻辑要先锚定两个边界值：

1. 当前等级的起始XP（即上一等级的XP阈值）
2. 下一等级的XP阈值（即当前等级的XP上限）
   进度百分比 = (当前XP - 当前等级起始XP) / (当前等级XP上限 - 当前等级起始XP) * 100

落地时需要先维护一份等级阈值配置表，再配套两个逻辑：

• 根据当前总XP匹配对应的当前等级、当前等级起始XP、下一等级XP阈值
• 代入区间进度公式计算占比

可直接复用的代码示例 #

// 等级XP阈值配置，索引对应等级序号，值为该等级的起始XP，可按需扩展
const levelThresholds = [0, 100, 200, 300, 400 /* 后续等级可按增长曲线调整阈值 */];

/**
 * 获取当前XP对应的等级信息
 * @param {number} totalXp 玩家当前总XP
 * @returns {object} 等级、当前等级起始XP、下一等级XP阈值
 */
function getCurrentLevelInfo(totalXp) {
  // 从高到低匹配当前所处等级区间
  for (let i = levelThresholds.length - 1; i >= 0; i--) {
    if (totalXp >= levelThresholds[i]) {
      return {
        level: i + 1,
        currentLevelStartXp: levelThresholds[i],
        nextLevelStartXp: levelThresholds[i + 1] ?? Infinity // 满级兜底处理
      };
    }
  }
  // 异常值兜底返回1级信息
  return { level: 1, currentLevelStartXp: 0, nextLevelStartXp: levelThresholds[1] };
}

/**
 * 计算当前等级区间内的进度百分比
 * @param {number} totalXp 玩家当前总XP
 * @returns {number} 进度百分比，范围0-100，满级返回100
 */
function calculateLevelProgress(totalXp) {
  const { currentLevelStartXp, nextLevelStartXp } = getCurrentLevelInfo(totalXp);
  // 满级直接返回100%
  if (nextLevelStartXp === Infinity) return 100;
  const levelXpTotal = nextLevelStartXp - currentLevelStartXp;
  const currentLevelXp = totalXp - currentLevelStartXp;
  return (currentLevelXp / levelXpTotal) * 100;
}

// 测试用例
console.log(calculateLevelProgress(50));  // 输出50，对应1级进度50%
console.log(calculateLevelProgress(150)); // 输出50，对应2级进度50%
console.log(calculateLevelProgress(280)); // 输出80，对应3级进度80%

扩展说明 #

• 如果后续要调整等级XP增长曲线（比如高等级需要更多XP升级），只需要修改levelThresholds数组里的阈值即可，计算逻辑不需要改动
• 代码已经做了满级场景兜底，达到最高等级后进度条会固定显示100%
• 如果需要控制小数位，直接在返回值处加toFixed()处理即可，比如保留1位小数就写return Number(((currentLevelXp / levelXpTotal) * 100).toFixed(1))

内容的提问来源于stack exchange，提问作者Jaralato