尝试使用HTML/JavaScript为游戏制作HP工具栏

我正在尝试为一个游戏制作一个健康栏，其中我有两个按钮链接到该栏，一个按钮增加伤害，另一个按钮增加健康。我已经按照我想要的方式进行了设计，但是JavaScript部分有问题。按钮是链接的，但当我点击增加伤害或生命值时，它只会在两个方向上调整一个生命值，但不会超过这个值。我也不知道如何使条的宽度随着与健康量相关联的数字移动。我想我已经很接近了，但我需要一点帮助。我还将添加CSS代码，这样就有了更多的上下文

函数添加（）{
让addHealth=document.getElementById（'health'））
宽度=100；
addHealth.width+=1；
if（addHealth）{
addHealth.style.width=width+'%'；
addHealth.innerHTML=宽度*1+“hp”；
}
}
函数删除（）{
让damage=document.getElementById（'health'））
宽度=100；
损伤宽度-=1；
如果（损坏）{
damage.style.width=宽度+'%'；
damage.innerHTML=宽度-1+‘hp’；
}
}

.hp{
文本对齐：居中；
填充底部：50px；
}
盖奇先生{
显示：内联块；
宽度：500px；
填充底部：30px；
}
.酒吧{
高度：60px；
位置：相对位置；
背景:#555；
-moz边界半径：25px；
-webkit边界半径：25px；
边界半径：25px；
填充：10px；
框阴影：插入0-1px1pRGBA（255,255,255,0.3）；
}
.bar>span{
显示：块；
身高：100%；
边框右上角半径：8px；
边框右下半径：8px；
边框左上半径：20px；
边框左下半径：20px；
背景色：rgb（4319483）；
背景图像：线性梯度（中底，rgb（4319483）37%，rgb（84240，84）69%）；
方框阴影：插入0 2px 9px rgba（255,255,255,0.3），插入0-2px 6px rgba（0,0,0,0.4）；
位置：相对位置；
溢出：隐藏；
}
L{
背景色：#078a25；
背景图像：线性渐变（至底部，#078a25，#f36d0a）；
}
#健康{
字体大小：20px；
颜色：白色；
字体大小：粗体；
文本对齐：右对齐；
}
.btn-3d{
位置：相对位置；
显示：内联块；
字体大小：22px；
填充：20px 60px；
颜色：白色；
保证金：20px 10px 10px；
边界半径：6px；
文本对齐：居中；
过渡：顶部0.01s线性；
文本阴影：0 1px 0 rgba（0,0,0,0.15）；
光标：指针；
}
.btn-3d.绿色：悬停{
背景色：#80C49D；
}
.btn-3d：激活{
顶部：9px；
}
.btn-3d.green{
背景色：#82c8a0；
盒影：0 0 0 1px#82c8a0插入，0 0 0 2px rgba（255，255，255，0.15）插入，0 8px 0 rgba（126，194，155，7），0 8px 0 1px rgba（0，0，0，4），0 8px 8px 1px rgba（0，0，0.5）；
}
.btn-3d.绿色：激活{
框阴影：0 0 0 1px#82c8a0插入，0 0 0 2px rgba（255，255，255，0.15）插入，0 0 0 1px rgba（0，0，0，0.4）；
}
.btn-3d.红色：悬停{
背景色：#e74c3c；
}
.btn-3d.red{
背景色：#e74c3c；
盒影：0 0 0 1px c63702插图，0 0 0 2px rgba（255，255，255，0.15）插图，0 8px 0 0 0 C24032，0 8px 0 1px rgba（0，0，0，0.4），0 8px 8px 1px rgba（0，0，0，0.5）；
}
.btn-3d.red：激活{
盒影：0 0 0 1px#c63702插图，0 0 0 2px rgba（255，255，255，0.15）插图，0 0 0 1px rgba（0，0，0，0.4）；
}

100马力
健康
损坏

在您的示例中，您仅更改输出，而从不更改实际运行状况

宽度。下面是一个快速分析

function add() {
    //REM: You fetch the element correctly;
    let addHealth = document.getElementById('health')
    //REM: You reset the heath to 100 for some reason?
    let width = 100;
    //REM: You change a width property of the element?
    //REM: Here you should reduce the value of width
    addHealth.width += 1;

    if (addHealth) {
        //REM: You set the width of the element according to the health, which seems correct
        addHealth.style.width = width + '%'; 
        //REM: You set the displayed value to 100, since width always gets set to 100 inside the function
        addHealth.innerHTML = width * 1  + 'hp';
    }
}

最简单的方法是将运行状况存储在一个单独的变量中，并在此基础上进行构建


var\u Health=100//REM：默认HP
函数add（）{
让addHealth=document.getElementById（'health'））
_健康+=1；
if（addHealth）{
addHealth.style.width=_Health+'%'；
addHealth.innerHTML=_Health+'hp'；
}
}
函数删除（）{
让damage=document.getElementById（'health'））
_健康-=1；
如果（损坏）{
damage.style.width=_Health+'%'；
damage.innerHTML=_Health+'hp'；
}
}
.hp{
文本对齐：居中；
填充底部：50px；
}
盖奇先生{
显示：内联块；
宽度：500px；
填充底部：30px；
}
.bar{
高度：60px；
位置：相对位置；
背景:#555；
-moz边界半径：25px；
-webkit边界半径：25px；
边界半径：25px；
填充：10px；
盒影：插图0-1px1pRGBA（255255,0.3）；
}
.bar>span{
显示：块；
身高：100%；
边框右上角半径：8px；
边框右下半径：8px；
边框左上半径：20px；
边框左下半径：20px；
背景色：rgb（43194,83）；
背景图像：线性梯度(
中底，
rgb（43194,83）37%，
rgb（84240,84）69%
);
框阴影：
插图0 2px 9px rgba（255255255,0.3），
插图0-2px6pxRGBA（0,0,0,0.4）；
位置：相对位置；
溢出：隐藏；
}
L{
背景色：#078a25；
背景图像：线性渐变（至底部，#078a25，#f36d0a）；
}
#健康{
字体大小：20px；
颜色：白色；
字体大小：粗体；
文本对齐：右对齐；
}
.btn-3d{
位置：相对位置；
显示：内联块；
字体大小：22px；
填充：20px 60px；
颜色：白色；
保证金：20px 10px 10px；
边界半径：6px；
文本对齐：居中；
过渡：顶部0.01s线性；
文本阴影：0 1px 0 rgba（0,0,0,0.15）；
光标：指针；
}
.btn-3d.green:悬停{背景色：#80C49D；}
.btn-3d：激活{
顶部：9px；
}
.btn-3d.green{
背景色：#82c8a0；
框阴影：0 1px#82c8a0插图，
0.2倍rgba（255255255,0.15）插图，
0 8px 0 rgba（126194155.7），
0 8px 0 1px rgba（0,0,0,4），
0 8px 8px 1px rgba（0,0,0,0.5）；
}
.btn-3d.绿色：激活{
框阴影：0 1px#82c8a0插图，
0.2倍rgba（255255255,0.15）插图，
0.1pxRGBA（0,0,0,0.4）；
}
.btn-3d.red:悬停{背景色：#e74c3c；}
.btn-3d.red{
背景色：#e74c3c；
框阴影：0 1px#c63702插图，
0.2倍rgba（255255255,0.15）插图，
0 8px 0 0#C24032，
0.8px 0.1px rgba（0,0,0,0.4），
0 8px 8px 1px rgba（0,0,0,0.5）；
}
.btn-3d.red：激活{
长方体阴影：0 1px
let width=100;

function add() {
    let addHealth = document.getElementById('health')
    width +=1;

    if (addHealth) {
        addHealth.style.width = width + '%'; 
        addHealth.innerHTML = width * 1  + 'hp';
    }
}

function remove() {
    let damage = document.getElementById('health')
    width-=1;

    if(damage) {
        damage.style.width = width + '%'; 
        damage.innerHTML = width - 1  + 'hp';
    }
}

  const healthObject = {
      _currentHelth: 100,
      getHealth: function () {
        return this._currentHelth
      },
      increase: function () {
        if (this._currentHelth < 100) {
          this._currentHelth++
        }
      },
      decrease: function () {
        if (this._currentHelth > 0) {
          this._currentHelth--
        }
      },
    }

    function add() {
      let addHealth = document.getElementById('health')
      healthObject.increase()
      if (addHealth) {
        addHealth.style.width = healthObject.getHealth() + '%'
        addHealth.innerHTML = healthObject.getHealth() + 'hp'
      }
    }

function remove() {
  let addHealth = document.getElementById('health')
  healthObject.decrease()
  if (addHealth) {
    addHealth.style.width = healthObject.getHealth() + '%'
    addHealth.innerHTML = healthObject.getHealth() + 'hp'
  }
}

    let width = 100;

function add() {
let addHealth = document.getElementById('health')
    width =width+ 1 
    width=width>100?width=100:width
    if(addHealth){
        addHealth.style.width = width + '%'; 
        addHealth.innerHTML = width  + 'hp';
    }
}

function remove() {
    let damage = document.getElementById('health')
    width =width- 1
    width=width<0?width=0:width

    if(damage) {
        damage.style.width = width + '%'; 
        damage.innerHTML = width  + 'hp';
    }
}