i have problem about my kind of health bar feature for my game, here we go:
first we set this variable
::StoryInit
<<set $energyTotal to 100>>
<<set $energy to $energyTotal>>
<<set $energyLoss to 0>>
then in story caption, i have button which can fast forward time clock about 1 hour for one click and decrease player energy
::StoryCaption
<<button "">>
<<set $gameDate.setHours($gameDate.getHours() + 1)>>
<<set $energyLoss to 6>>
<<display "Sleepy">>
<</button>>
and here's the formula i get from
greyelf and customize a little for my need
::Sleepy
<<script>>
var hBar = $('.energy-bar .stats-bar'),
bar = hBar.find('.bar'),
hit = hBar.find('.hit');
var total = State.variables.energyTotal,
value = State.variables.energy,
damage = State.variables.energyLoss,
hitWidth = 0,
barWidth = (value / total) * 100,
delayReset = false;
if (damage != 0) {
hitWidth = (damage / value) * 100;
value -= damage;
barWidth = (value / total) * 100;
State.variables.energy = value;
State.variables.energyLoss = 0;
delayReset = true;
}
hBar.data('total', total);
hBar.data('value', value);
/*hit.css('width', hitWidth + "%");*/
bar.css('width', barWidth + "%");
if (delayReset) {
setTimeout(function(){
/*hit.css({'width': '0'});*/
bar.css('width', (State.variables.energy / State.variables.energyTotal) * 100 + "%");
}, 500);
}
<</script>>
and here's the energy bar will be display in each passage, im using passageHeader because it will show up in top of each passage or maybe its wrong, yes?
::PassageHeader
<div class="stats-wrapper energy-bar">
<span>Energi</span>
<div class="stats-bar">
<div class="bar">
<div class="hit"></div>
</div>
</div>
</div>
this thing is works well, the energy bar is decreasing whenever i press the fast forward button..... but the problem is when i go to another passage, the enery bar is back to full (you know what i mean?) when it should be not.
what im missing here? any help will be appreciated, sorry for my bad english. thx before
