129 lines
2.8 KiB
JavaScript
129 lines
2.8 KiB
JavaScript
Loader.addImages([
|
|
{ id:"hp", src:"sprites/ui/hp.png" }
|
|
]);
|
|
|
|
// The Class!
|
|
function HitPoints(){
|
|
|
|
var self = this;
|
|
|
|
// My DOM & canvas
|
|
self.dom = document.querySelector("#game_hp");
|
|
self.canvas = document.createElement("canvas");
|
|
self.canvas.width = 360 * 2;
|
|
self.canvas.height = 100 * 2;
|
|
self.canvas.style.width = self.canvas.width/2 + "px";
|
|
self.canvas.style.height = self.canvas.height/2 + "px";
|
|
self.context = self.canvas.getContext("2d");
|
|
self.dom.appendChild(self.canvas);
|
|
|
|
// My sprite
|
|
self.image = Library.images.hp;
|
|
|
|
// My stats
|
|
self.reset = function(){
|
|
self.hong = 100;
|
|
self.beebee = 100;
|
|
};
|
|
self.reset();
|
|
|
|
// Attack!
|
|
self.doDamage = function(str, target){
|
|
|
|
// Absolute or Relative Damage?
|
|
var num = parseFloat(str);
|
|
var isAbsolute = (str.slice(-1)=="p"); // p = absolute, % = relative
|
|
if(isAbsolute){
|
|
self[target] -= num;
|
|
}else{
|
|
var relativeDamage = Math.floor( self[target] * (num/100) );
|
|
self[target] -= relativeDamage;
|
|
}
|
|
|
|
// Floor bound
|
|
if(self[target]<0){
|
|
self[target] = 0;
|
|
}
|
|
|
|
};
|
|
// TODO: SHAKING BASED ON AMOUNT OF ABSOLUTE DAMAGE.
|
|
self.attackHong = function(str){
|
|
self.doDamage(str, "hong");
|
|
self.leftShake = 30;
|
|
publish("hong",["attacked"]);
|
|
};
|
|
self.attackBeebee = function(str){
|
|
self.doDamage(str, "beebee");
|
|
self.rightShake = 30;
|
|
};
|
|
|
|
// Draw
|
|
self.leftShake = 0;
|
|
self.leftWidth = 360;
|
|
self.rightShake = 0;
|
|
self.rightWidth = 360;
|
|
self.drawHalf = function(ctx, isRight){
|
|
|
|
ctx.save();
|
|
|
|
// Which side?
|
|
var side = isRight ? "right" : "left";
|
|
var hp = isRight ? self.beebee : self.hong;
|
|
|
|
// Shaking
|
|
if(self[side+"Shake"]>0){
|
|
var amp = self[side+"Shake"]/7;
|
|
var shakeY = Math.sin(self[side+"Shake"]*1.3)*amp;
|
|
ctx.translate(0,shakeY);
|
|
self[side+"Shake"]--;
|
|
}else{
|
|
self[side+"Shake"]=0;
|
|
}
|
|
|
|
// BLACK
|
|
var sx=isRight ? 360 : 0, sy=0, sw=360, sh=150;
|
|
ctx.drawImage(self.image, sx,sy,sw,sh, sx/2,sy/2,sw/2,sh/2); // black
|
|
|
|
// RED
|
|
var hpRatio = (hp+32)/(100+32); // 100,0 => 1,0.3
|
|
sw = 360 * hpRatio;
|
|
sy = 150;
|
|
self[side+"Width"] = self[side+"Width"]*0.8 + sw*0.2;
|
|
sw = self[side+"Width"];
|
|
if(sw>88){
|
|
if(isRight){
|
|
ctx.drawImage(self.image, sx+(360-sw),sy,sw,sh, 360/2,0,sw/2,sh/2);
|
|
}else{
|
|
ctx.drawImage(self.image, sx,sy,sw,sh, (360-sw)/2,0,sw/2,sh/2);
|
|
}
|
|
}
|
|
if(self[side+"WhiteWidth"]>sw && self[side+"Shake"]<=0){
|
|
self[side+"WhiteWidth"] -= 0.6;
|
|
}
|
|
|
|
ctx.restore();
|
|
|
|
};
|
|
self.draw = function(){
|
|
|
|
var ctx = self.context;
|
|
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
|
|
ctx.save();
|
|
ctx.scale(2,2);
|
|
|
|
// Draw BG
|
|
var sx=0, sy=600, sw=720, sh=200;
|
|
ctx.drawImage(self.image, sx,sy,sw,sh, 0,0,sw/2,sh/2);
|
|
|
|
// Draw Left & Right Sides
|
|
self.drawHalf(ctx, false);
|
|
self.drawHalf(ctx, true);
|
|
|
|
// Draw "Timer"
|
|
var sx=0, sy=450, sw=720, sh=150;
|
|
ctx.drawImage(self.image, sx,sy,sw,sh, 0,0,sw/2,sh/2);
|
|
|
|
ctx.restore();
|
|
};
|
|
|
|
} |