不同技能等级职称的技能分级系统

Question

我正在用JavaScript制作一个基于文本的RPG。我做了一个技能分级系统，但是我觉得函数参数被传递了很多，而且代码不是很可伸缩。您对我如何改进这段代码有什么建议吗？理想情况下，我只想调用一个像这样的函数：addExperience(25, charisma);

What我的代码是这样的： properties对象为每个技能级别都提供了一个标题。目前，所有技能都有相同的头衔。在未来，这些将有不同的标题和数量的标题。

player对象对每个技能都有一个技能level和experience键，因此这些技能可以独立地进行分级。

我还发布了HTML和CSS代码以供完成。但是，这并不重要，因为我编写它只是为了测试JavaScript代码，而不是游戏的一部分。

// Skill variable
const properties = {
  strength: [
    "Dabbler",
    "Skilled",
    "Untrained",
    "Proficient",
    "Amateur",
    "Superb",
    "Master",
  ],
  endurance: [
    "Dabbler",
    "Skilled",
    "Untrained",
    "Proficient",
    "Amateur",
    "Superb",
    "Master",
  ],
  charisma: [
    "Dabbler",
    "Skilled",
    "Untrained",
    "Proficient",
    "Amateur",
    "Superb",
    "Master",
  ],
};

// Player variables
const player = {
  stats: {
    strength: {
      level: 0,
      experience: 0,
    },
    endurance: {
      level: 0,
      experience: 0,
    },
    charisma: {
      level: 0,
      experience: 0,
    },
  },
};

function getExperienceToNextLevel(level, skill) {
  if (level < skill.length) {
    return ((level * (level + 1)) / 2) * 1000;
  }
}

function addExperience(amount, stat, skill) {
  if (stat.level !== skill.length - 1) {
    stat.experience += amount;
    while (stat.experience >= getExperienceToNextLevel(stat.level, skill)) {
      stat.experience -= getExperienceToNextLevel(stat.level, skill);
      ++stat.level;
    }
  }
  display(stat, skill);
}

function display(stat, skill) {
  document.getElementById("level-display").innerHTML = `${stat.level} ${
    skill[stat.level]
  }`;

  document.getElementById("xp-display").innerHTML = `${stat.experience}`;
}

body {
  background: #ff930f;
  background: linear-gradient(
    90deg,
    rgba(255, 147, 15, 1) 0%,
    rgba(255, 249, 91, 1) 100%
  );
  box-sizing: border-box;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

.title {
  background-color: rgb(0, 0, 0, 0.1);
  color: #fff;
  margin: 5% auto;
  padding: 25px;
  text-align: center;
  text-shadow: 2px 2px rgb(0, 0, 0, 0.5);
}

.display {
  background-color: rgb(0, 0, 0, 0.1);
  color: #fff;
  margin: 5%;
  padding: 25px;
  text-align: center;
  text-shadow: 2px 2px rgb(0, 0, 0, 0.5);
}

.xp-buttons {
  text-align: center;
}

.xp-buttons button {
  background-color: #333;
  border: none;
  border-radius: 999rem;
  color: #fff;
  font-weight: 700;
  height: 2.5rem;
  max-width: auto;
  min-width: 5rem;
  transition-duration: 0.2s;
  margin: 0 auto;
}

.xp-buttons button:hover {
  background-color: #444;
  cursor: pointer;
}

    JavaScript - Debugger
    
  
  
    
      JavaScript - Debugger
      
        Level: 
        XP: 
      
      
        
          50 XP
        
        
          1000 XP
        
        
          Update

Answer 1

简短的回顾；

• 我不喜欢函数addExperience(50，player.stats.charisma，properties.charisma)的签名可以是addExperience(50，player，“charisma”)，甚至player.addExperience(50，“魅力”)；如果是我，我会让它更像尤达，甚至是player.addExperience(“魅力”，50)；
• 我会跟踪所有的经验，而不是重新设置它每次你达到一个新的水平。如果您想要重新平衡现有字符的级别。
• 我建议在MVC模型上阅读。如果您遵循它，那么addExperience就不会调用display
• 它的存根代码，但是display太通用了
• 你似乎把统计数据和技能当作一样对待，对我来说，它们不是？
• properties应该是statTitles吗？