单击攻击按钮 JS 时使健康栏消失

Question

我想制作一个可视化的健康栏在点击攻击按钮后慢慢消失。不幸的是，我不知道如何将 damage 转换为 healthBar 长度的百分比以减少其长度。我希望它的长度被缩短，直到它完全消失。

我部分理解您需要获取 offsetWidth 等，但我不知道如何将其与 damage 变量结合起来。

<!DOCTYPE html>
    <html lang = 'en'>
        <head>
            <meta charset = 'utf-8'>
            <title>HP</title>
    
    
            <style>
                .healthBar {
                    position: fixed;
                    width: 500px;
                    height: 20px;
                    background-color: red;
                    left: 50%;
                    transform: translateX(-50%);
                }
                .attack {
                    position: fixed;
                    width: 100px;
                    height: 20px;
                    cursor: pointer;
                }
            </style>
    
    
        </head>
        <body>
            <div class="healthBar"></div>
    
            <button class="attack">
                ATTACK
            </button>
    
            
        <script type = "text/javascript">
            
            const attack = document.querySelector('.attack');
            const healthBar = document.querySelector('.healthBar');
    
            let damage = 100;
            let HP = 200;
    
            attack.addEventListener('click', function(){
                if (HP > 0) {
                    HP = HP - damage;
                    if (HP <= 0) {
                        console.log('DEAD');
                        alert('DEAD');
                    }
                }
            })
    
        </script>
        </body>
    </html>

Answer 1

要获得某物的百分比，请将当前值除以总值。在这种情况下，如果我有 100 点生命值并受到 20 点伤害，那么 20/100 就是 0.2 或 20%。 100% 始终表示为数字 1，因此您可以可靠地取此值并将其乘以 100 以获得对人眼更友好的百分比。

我继续努力让这个工作，我最终做到了，所以让我解释一下我是如何得到我的解决方案的。

首先，让我们想出一个公式。由于您可以使用百分比来指定 HTML 元素的宽度，所以让我们弄清楚如何获取剩余生命值的百分比。正如我之前所说，current / total 给出了百分比，因此我们需要做的就是获取该值并将其乘以 100 以获得适当的百分比。该公式看起来像 (HP / totalHP) * 100。很简单。

现在我们有了一个百分比，我们需要为健康栏创建一个父元素来表示最大健康。为此，我会将您的条形图分成类 healthContainer 和 healthBar 两个不同的元素。 healthContainer 将是代表最大生命值的父元素，而 healthBar 将是逐渐减少的实际彩色条。我还将为 healthContainer 添加边框，以便您可以看到差异。

最后，我们只需要跟踪最大生命值。我将创建一个名为 maxHP 的第二个变量，并最初将其设置为 HP。这样，我们就可以使用上面的公式得到当前血量占最大血量的百分比，并将其作为宽度插入到 healthBar 元素中。这是完整的代码：

let attack = document.querySelector('.attack');
let healthBar = document.querySelector('.healthBar');

let damage = 100;
let maxHP = 200;
let HP = maxHP;

attack.addEventListener('click', function() {
  if (HP > 0) {
    HP = HP - damage;
    healthBar.style.width = ((HP / maxHP) * 100) + '%';
    if (HP <= 0) {
      console.log('DEAD');
      alert('DEAD');
    }
  }
})

.healthContainer {
  position: fixed;
  width: 500px;
  height: 20px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 2px;
  border-color: black;
}

.healthBar {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: red;
}

.attack {
  position: fixed;
  width: 100px;
  height: 20px;
  cursor: pointer;
}

<div class="healthContainer">
  <div class="healthBar"></div>
</div>

<button class="attack">
ATTACK
</button>

单击攻击按钮 JS 时使健康栏消失

Making a health bar dissapearing while clicking the attack button JS

javascript

addeventlistener