FR/LG HP Bar?

[NotMyOwn]

I wasn't really sure where to post this, but I thought this was a reasonable place, if I was wrong please move it.

Anyways, so basically right now I am working on a FR/LG re-make MMORPG. It is 100% browser-based, you use your arrow keys to move around, I might expand the game to multiple regions at some point, but right now I don't even have a completely working map (of any degree). I was reading around, and found some stuff, but it was all tutorials for a specific program, and I am not using a programming I am using the languages Javascript /w Ajax and PHP.

So, now that I have given a basic background, on to my question. How does the HP bar work? Obviously when you lose HP the green goes down and eventually changes to yellow then red, but how do you calculate how much it should go down? I was thinking something like this:
total_hp/segments_in_hp_bar
so basically, lets say for examples sake, you had a max HP of 10, and there was 10 segments in the bar, so each time you lost 1 HP you would see one less segment and that segment would just be replaced with black (as is the background color for the HP bar). Is this how the bar is actually made, or is it entirely different? And if it is made this way, how many segments are there? But if it is different could someone explain how it works?

Thanks for reading, any help is greatly appreciated :D

 

[Neo-Dragon]

Work out the % of the current HP compared to the Max HP and show the correct segment of the HP bar based on that % value.
Divide the current HP by the Max HP, then multiply that number by 100 and that's the percentage.

 

[NotMyOwn]

Okay, but how would you go about populating it with the green/yellow/red background? I'm thinking just have a like 1px wide by 5px tall (ball park sizes) image of them and then repeating across until necessary. Would that work, or should I do it some other way

 

[Maruno]

Essentials (which uses Ruby, of course) displays a solid block of colour with "fill_rect". This can be any kind of shape, but is made to be a long thin bar, of length as Neo-Dragon explained and height 4 pixels or so. I assume most languages contain something that does this, as it is a basic tool to create something visual (the most basic is making the rectangle a single pixel, and making a picture out of them).

The colour of the bar is decided by looking at the fraction currentHP/totalHP and deciding whether it is less than 25% (red), between 25% and 50% (yellow), or green otherwise (i.e. above 50%). A different rectangle is drawn in each case, which are identical except for the colour used. Note that this check can be simply done via the form:

if currentHP/totalHP < 0.25
  draw red bar
elsif currentHP/totalHP < 0.5
  draw yellow bar
else
  draw green bar
end

You can either draw a black rectangle to fill in the gap in the HP bar, or just ensure the background picture shows an empty HP bar (with a black gap onto which the HP bar is displayed).

 

[NotMyOwn]

Heh, actually no, Javascript can't draw anything :P And Ajax is basically just a library for Javascript (not really, but that explanation will work), PHP can draw stuff with one of the image libraries, but passing JS to PHP is a pain, and slow.

But non-the-less, you actually gave me an idea, not 100% sure how to do it, but instead of using pixels for the width use a %, but I'm not sure how to change the width of an actual image with CSS (cascading style sheets), only the area around the image. Anyways, thanks for the help :D