如何向单选按钮添加被动值

Question

我希望在选中“乌龟”单选按钮时使强度被动增加：

另外，在升级时，我希望它为该值加上+1，以便当乌龟处于2级时，被动强度为+2。

我主要是想知道您如何在HTML中执行被动效果。单选按钮是否具有被选中时能够被动修改变量的功能？我的想法类似于在RPG中更改装备。我还希望Cexp选中单选按钮后每秒上升1。

这是我当前的代码：

var Turtle = 1;
var Turtlelv = 1;
var TurtleCexp = 0;
var TurtleMexp = 100;
var NextMaxTurtleExp = TurtleMexp;
var Turtlestrength = 1 + Strength

function turtlepassive() {
    if (TurtleCexp < NextMaxTurtleExp) {
        TurtleCexp = TurtleCexp + 1;
        document.getElementById("TurtleCexp").innerHTML = TurtleCexp;
    } else {
        Turtlelv = Turtlelv + 1;
        TurtleCexp = 0;
        Turtle = Turtle + 1;
        Turtlestrength = Turtlestrength + 1;
        NextMaxTurtleExp = NextMaxTurtleExp * 1.5;
        document.getElementById("Strength").innerHTML = Strength;
        document.getElementById('TurtleMexp').innerHTML = 
NextMaxTurtleExp;
        document.getElementById('Turtlelv').innerHTML = Turtlelv;
        document.getElementById('TurtleCexp').innerHTML = TurtleCexp;
        document.getElementById('Turtle').innerHTML = Turtle;
     }
}

HTML代码：

<div id="turtle" class="control">
    <label class="radio">
        <input type="radio" name="Pets">
    </label>
    <img src="turtle.png" alt="turtle" height="100" width="100">Lv <span id="Magiclv">1</span> <span id="MagicCexp">0</span> / <span id="MagicMexp">100</span>
</div>

我希望为exp选择乌龟单选按钮时，每秒增加1，并在级别1和2上具有被动的力量增强1和2，依此类推。但是实际结果我无法使它正常工作。

Answer 1

单选按钮不能被动地更改变量，但这可以通过编程来完成。

这是基本代码（您应该为程序重新制作），演示是否受选定的乌龟和乌龟的等级影响强度。选择乌龟后，会将金额添加到变量中；取消选中乌龟后，将删除金额。

<div id="turtle" class="control">
  <label class="radio">
    <input type="radio" name="Pets" id="turtle-radio">

document.getElementById("turtle-radio").addEventListener("change", () => {
  if (document.getElementById("turtle-radio").checked) {
    //increase strength by level
  } else {
    //decrease strength by level
  }
}

关于随着时间的推移更新海龟的水平，也可以这样做。假设乌龟总是需要100xp才能升级。广播每秒检查一次，它将向乌龟加1xp并为另一个检查设置timeout。当XP达到100时，将乌龟等级提高。如果未选中单选按钮，则timeout不应刷新。

function turtleXpUp() {
  if (document.getElementById("turtle-radio").checked) {
    setTimeout(turtleXpUp, 1000)
    //turtle xp +1
  }
  if (/* xp == 100*/) {
    if (document.getElementById("turtle-radio").checked) {
      //increase strength by 1
      //increase level by 1
    }
  }
}
document.getElementById("turtle-radio").addEventListener("change", turtleXpUp)