![Smile :)](./images/smilies/icon_e_smile.gif)
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!
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;
}
Code: Select all
<td id="healthBar">
<div id="healthBackground"><div id="healthForeground"></div></div>
</td>
Code: Select all
#healthBackground {
background-color: red;
width: 100px;
height: 8px;
}
#healthForeground {
background-color: green;
width: 91px;
height: 8px;
}
Code: Select all
//health bar
var healthBarLength = (character.currentHealth / character.maxHealth) * 100;
$('#healthForeground').css('width', healthBarLength);
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');
}
Yes, I think it could be done mostly with CSS, but the sweet bar animations are worth it. Polish FTW!vitinho444 wrote: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.
Yeah jquery ftw!!Jackolantern wrote:Yes, I think it could be done mostly with CSS, but the sweet bar animations are worth it. Polish FTW!vitinho444 wrote: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.