I want to make a visualisation of a health bar slowly dissapearing after clicking the attack button. Unfortunately I don't know how to convert damage as a percentage of the length of the healthBar to reduce its length. I would like its length to be reduced until it disappears completely.
Partially I understand that you would need to get offsetWidth etc but i dont know how to combine that with the damage variable.
<!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>
To get the percentage of something, you divide the current value by the total value. In this case, if I had 100 health and took 20 damage, 20/100 is 0.2 or 20%. 100% is always represented as the number 1, so you can reliably take this value and multiply it by 100 to get a percentage that's more friendly to the human eye.
I went ahead and tried myself to get this to work and I eventually did, so let me explain how I got my solution.
First, let's come up with a formula. Since you can use percentages to specify the width of an HTML element, let's just figure out how to get the percentage of remaining health. As I said before, current / total gives you the percentage, so all we need to do is get this value and multiply it by 100 in order for it to be a proper percent. The formula would look something like (HP / totalHP) * 100. Easy enough.
Now that we have a percent, we need to create a parent element for the health bar to represent the max health. For this, I will split your bar into 2 different elements with the classes healthContainer, and healthBar. healthContainer will be the parent element representing the max health, and healthBar will be the actual colored bar that gradually decreases. I will also add a border to healthContainer so you can see the difference.
Finally, we just need to keep track of the max health. I will just create a second variable called maxHP and set HP to it initially. This way, we can use the formula above to get what percentage the current HP is of the max HP and plug it into the healthBar element as the width. Here is the completed code:
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>