Since this is an html5 game then I guess you are already using canvas or at least you know about it. I think this might help.
There are 2 ways I see this could be done:
(i) Using a [][1].
(ii)Or you could do this using the canvas tag.
I don't know how to use the former, but I do know how to use the latter.
/* Get the canvas element */
var c = document.getElementById('canvas');
/* Get the canvas' context */
var ctx = c.getContext('2d');
/* Variables used for bar fill */
var total = 100,
hatched = 0;
window.onload = function() {
/* Fill Rectangle*/
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,0,c.height);
/* Fill text */
ctx.fillStyle = '#000000';
ctx.font = "30px Arial";
var text = 'Hatchling: ' + hatched + '/' + total;
ctx.fillText(text,225,35);
}
function inc () {
hatched += 10;
/* Perc (or percentage) takes the answer from hatched/total... */
var perc = hatched / total;
/* ... and filled takes perc and multiplies it by canvas.width (700px in this case) */
var filled;
filled = perc * c.width;
ctx.clearRect(0,0,c.width,c.height);
/* Fill Rectangle*/
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,filled,c.height);
if (hatched >= total) {
hatched = total;
}
/* Fill text */
ctx.fillStyle = '#000000';
ctx.font = "30px Arial";
var text = 'Hatchling: ' + hatched + '/' + total;
ctx.fillText(text,225,35);
}
function dec () {
hatched -= 10;
/* Perc (or percentage) takes the answer from hatched/total... */
var perc = hatched / total;
/* ... and filled takes perc and multiplies it by canvas.width (700px in this case) */
var filled;
filled = perc * c.width;
ctx.clearRect(0,0,c.width,c.height);
/* Fill Rectangle*/
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,filled,c.height);
if (hatched <= 0) {
hatched = 0;
}
/* Fill text */
ctx.fillStyle = '#000000';
ctx.font = "30px Arial";
var text = 'Hatchling: ' + hatched + '/' + total;
ctx.fillText(text,225,35);
}
<!DOCTYPE html>
<html>
<head>
<title>Progress bar example</title>
</head>
<body>
<!-- Use Canvas to draw bar. -->
<canvas id="canvas" width='700px' height='50px' style="border: 2px solid black">
<p>Your computer doesn't support the canvas tag</p>
</canvas><br>
<br>
<!-- Buttons to increase and decrease values -->
<button type="button" onclick="inc();">Press Me!</button>
<button type="button" onclick="dec();">Me Too!</button>
<script type="text/javascript" src="test.js"></script>
</body>
</html>
This will be easy to implement into a canvas game and if you are using the DOM then my guess is the progress tag will be much more better.
[1]: http://dev.w3.org/html5/spec-preview/the-progress-element.html
