Healthbar Damage

by stot

HTML

<script src="https://code.createjs.com/createjs-2014.12.12.min.js"></script>
<canvas id="canvas" width=400 height=200></canvas>

<div id="damage">apply random change</div>

CSS

canvas {
    border:1px solid red;
}

#damage {
    border:1px solid black;
    background:gray;
    padding:5px;
    width:200px;
    text-align:center;
    border-radius:2px;
    cursor:pointer;
}
#damage:hover {
    background:lightgray;
}

JavaScript

var healthBarMaxWidth = 200;
var healthBarTargetWidth = 200;

function animateText(nr) {

    var toAnimate = text;
    
    // create new text if already running
    if ( createjs.Tween.hasActiveTweens(text)) {
        console.log("active tweens");
        toAnimate = text.clone();
        toAnimate.visible = false;
        toAnimate._cloned = true;
        stage.addChild(toAnimate);
    }
    
    // apply text and x position
    toAnimate.text = Math.round(nr);
    toAnimate.color = (toAnimate.text >= 0) ? '#00ff00' : '#ff0000';
    var bounds = toAnimate.getBounds();
    toAnimate.x = - bounds.width/2 + healthBar.scaleX;
    
    // tweens
    createjs.Tween.get(toAnimate)
    .to({y:text.originalY})
    .to({ y:50}, 2000, createjs.Ease.getPowOut(3))

    createjs.Tween.get(toAnimate)
         .wait(0)  
    .to({visible:true,alpha:1})
    .to({alpha:0, visible:false}, 2000, createjs.Ease.getPowIn(2))
    // optional: remove text if cloned
    .call(function(stage,t){
        if ( t._cloned == true) {
            console.log('remove cloned');
            stage.removeChild(t);
        }
    },[stage,toAnimate]);
    
};

function animateBar(change) {
    
    healthBarTargetWidth += change;
    if ( healthBarTargetWidth > healthBarMaxWidth) 
        healthBarTargetWidth = healthBarMaxWidth;
    if ( healthBarTargetWidth < 0) healthBarTargetWidth = 0;
    
    // tweens
    createjs.Tween.get(healthBar,{override:true})
    .to({ scaleX:healthBarTargetWidth}, 1000)
    .on('change',function(){
        healthBarText.text = Math.round(this.scaleX) + '/' + healthBarMaxWidth;
    },healthBar);
};

function animateShadow(change) {
    // tweens
    createjs.Tween.get(shadow,{override:true})
    //.to({blur:0})
    .to({ blur:Math.abs(change)}, 500, createjs.Ease.getPowOut(3))
    .to({blur:0},500);
}

var stage = new createjs.Stage("canvas");
createjs.Ticker.addEventListener("tick", tick);

var shape = new...