A HTML healthbar request

[Callan S.]

I wonder if anyone has the HTML code handy to show a health bar that shrinks as you take damage? Not real time or anything fancy, just changes on page refresh. I'd like one that sits on a background that is another colour, for contrast reasons - that's why I don't just want to scale a single graphic. Some of you might have some of the code on hand and that'd help, thanks!

I was showing some game I'd written to my young daughter the other day and she kind of stared at it blankly, so I decided I needed some visuals to go with it!

[leruman]

I use following part of code to make health & mana bar

Code: Select all

            echo "<div class ='hpsp'> \n ";
            echo "<div class ='hp'><img src= './assets/images/hpoints.jpg' width='15' height='$hphight' alt='HP'/></div> \n";
            echo "<div class ='sp'><img src= './assets/images/spoints.jpg' width='15' height='$sphight' alt='SP'/></div> \n";
            echo "</div> \n"; 

Code: Select all

.hpsp {
    float: left;
    width: 30px;
    display: inline-block;
    height: 100px;
}
.sp, .hp {
    float: left;
    width: 15px;
}

Pictures hpoints.jpg and spoitns.jpg is just horizontal line of one color, height one pixel. This will be ebst used for percentage of hp display

[Jackolantern]

If the health bars are simple colored bars, it would probably be better to use straight CSS and jQuery, with no images. Here is a health bar I made:

Code: Select all

 <td id="healthBar">
                <div id="healthBackground"><div id="healthForeground"></div></div>
            </td>

CSS (If I remember right, the foreground width was just for testing. Since your initialization would set it, I suppose you don't need to hard-code foreground width):

Code: Select all

#healthBackground {
    background-color: red;
    width: 100px;
    height: 8px;
}

#healthForeground {
    background-color: green;
    width: 91px;
    height: 8px;
}

client-side jQuery code to initially set health bar:

Code: Select all

//health bar
var healthBarLength = (character.currentHealth / character.maxHealth) * 100;
$('#healthForeground').css('width', healthBarLength);

client-side jQuery code to animate the health bar changing in CSS:

Code: Select all

//animate the healthbar if it changed
if (healthChanged) {
    var healthBarLength = (character.currentHealth / character.maxHealth) * 100;
    $('#healthForeground').animate({width: healthBarLength + 'px'}, 400, 'swing');
}

[vitinho444]

Sorry for not providing any code, just wanted to point out that i think Jacko's way is good, but i think i remember halls tutorials just fine that he had a health bar and i don't remember any jquery, so i think he did HTML and CSS only.

[Jackolantern]

Sorry for not providing any code, just wanted to point out that i think Jacko's way is good, but i think i remember halls tutorials just fine that he had a health bar and i don't remember any jquery, so i think he did HTML and CSS only.

Yes, I think it could be done mostly with CSS, but the sweet bar animations are worth it. Polish FTW!

[vitinho444]

Sorry for not providing any code, just wanted to point out that i think Jacko's way is good, but i think i remember halls tutorials just fine that he had a health bar and i don't remember any jquery, so i think he did HTML and CSS only.

Yes, I think it could be done mostly with CSS, but the sweet bar animations are worth it. Polish FTW!

Yeah jquery ftw!!