help on Adobe Animate Health Bar script (HTML5 Canvas)

[Rudol von Stroheim]

I'm making a quiz game in Adobe Animate using HTML5 canvas and I need to add a health bar that decreases whenever you choose the wrong answer. I've been searching everywhere for a health bar tutorial using HTML5 but only found ActionScript tutorials. I wouldn't wanna just throw away all the progress I've been through and redo it all over again using ActionScript, I need to pass this soon. I'm new to Animate, can anyone help please?

[kglad]

there's not going to be much difference between as3 and js for a health bar (if you use scaling).  eg, if you have a horizontal health bar (healthBar), you could use:

var tl=this;

var originalHealth=10;  // use whatever health

function decreaseHealthF(){

tl.healthBar.scaleX-=1/originalHealth;  // you probably want your healthBar has transform pt on its left edge.

if(tl.healthBar.scaleX<=0){

tl.healthBar.scaleX=0; 

gameOverF(); // define this

}

}

[Rudol von Stroheim]

Thanks, man. How do i get a wrong answer button to decrease my health though?

[kglad]

have your button listener call decreaseHealthF or make decreaseHealthF your button listener:

this.yourbutton.addEventListener(yourbuttonlistener.bind(this));

function yourbuttonlistener(){

// do stuff

decreaseHealthF();

}

or

this.yourbutton.addEventListener(decreaseHealthF);

[Colin Holgate]

There is a different approach you can take, that would let you have textured progress bars or even an animated one. Imagine laying out a 100 frame animation, where frame 1 is the bar empty, and frame 100 is the bar full, and inbetween the bar changes its size, color, texture, basically anything to make itself look more urgent when you get close to zero. The code needed to take the animation to the right frame is very simple:

this.gaugeMC.gotoAndStop(healthpercent);

'gaugeMC' would be the movieclip that has the 100 frame animation, and healthpercent would be an integer between 0 and 100.

[Nicktendo28]

Both very cool approaches.