MiloSx7 MiloSx7 - 1 month ago 21
Javascript Question

Health Points bootstrap progress bar

I have a var that is generating hit points based on a player level, and when the user holds mouse button it subtract his damage from hit points every second. After hit points reach zero, a new calculation is done to increase hit points for the next level. Now, I tried using this tutorial:

http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_progressbar_label_js

But I obviously have no clue how to do this. I'm quite new to js so I'm sorry if this is a noob question. If maximum hit points is 150 (for current level) width should be 100. As hit points go down to lets say 75, it should be 50, but I don't know how to do this. If you need more info, or my code I'll put it here, just ask.

EDIT #1:
Thanks for the replays and help. I managed to get it working with this code:

move = function(health) {
var elem = document.getElementById("myBar");
var width = Math.floor(health * 100 / maxHitPoints);//elem.style.width.slice(0, -1);
//var nWidth = Math.floor(health * 100 / maxHitPoints);

var id = setInterval(frame, 230);

function frame() {
if(width <= 0) {
clearInterval(id);
document.getElementById("label").innerHTML = health + " HP";
} else {
width--;
elem.style.width = width + '%';
document.getElementById("label").innerHTML = Math.floor(width / 100 * maxHitPoints) + " HP";
}
}
}


Where "health" is current hit points. I'm sorry but looks like I didn't ask the right question here. Right now the bar starts @22HP and goes down as HP goes down. But the problem here, i think, is the line

var id = setInterval(frame, 230);


Since I have a little button that user presses and holds down to deal damage, that function gets repeated every second. I think I'm not calling the function correctly, I will try and fix this myself, if I get stuck again I'll post the code

EDIT #2: Or maybe width--; line should be changed... I'll work around it see if I can get it fixed somehow

Answer

The math formula has been stated above, but there are some other issues you may run into, like going backward or displaying to correct level of HP.

maxHealth = 150;

move = function(health) {
  var elem = document.getElementById("myBar");
  var width = elem.style.width.slice(0, -1);
  var nWidth = Math.floor(health * 100 / maxHealth);

  var id = setInterval(frame, 10);

  function frame() {
    if (width == nWidth) {
      clearInterval(id);
      document.getElementById("label").innerHTML = health + " HP";
    } else if (width < nWidth) {
      width++;
      elem.style.width = width + '%';
      document.getElementById("label").innerHTML = Math.floor(width / 100 * maxHealth) + " HP";
    } else {
      width--;
      elem.style.width = width + '%';
      document.getElementById("label").innerHTML = Math.floor(width / 100 * maxHealth) + " HP";
    }
  }
}

move(maxHealth);
#myProgress {
  position: relative;
  width: 100%;
  height: 30px;
  background-color: #ddd;
}
#myBar {
  position: absolute;
  height: 100%;
  background-color: #4CAF50;
  overflow: hidden;
}
#label {
  text-align: center;
  line-height: 30px;
  color: white;
}
<div id="myProgress">
  <div id="myBar">
    <div id="label"></div>
  </div>
</div>
<br>
<button onclick="move(Math.floor(Math.random()*maxHealth))">Random HP</button>

Hope you find this helpful.