Ideally I would have one draw method in the parent class (Player
).
But I can't figure out how to do this. I don't know if there is anyway to decouple it totally. I don't mind modifying the sprite sheet so that it can handle this sort of thing.
Any tips are very welcome!!
Both classes inherit from Player
.
var skeleton = Player(x, y, hp, name, moveSpeed);
//drawing the fly
var draw = function(ctx) {
if (flyAnimate >= 30){
flyAnimate = 0;
}
var bugX = canvas.width/2 + fly.getDrawAtX() - localX - 50;
if (fly.getAlive()){
ctx.fillStyle="#FF0000";
ctx.fillRect(bugX+30,fly.getDrawAtY()-50,((fly.getHp()/2.2)),6);
} else {
ctx.fillText("DEAD", bugX + 37, fly.getDrawAtY()-40);
}
if (flyAnimate <= 10){
ctx.drawImage(flySprite,0,0, 100, 100, bugX,fly.getDrawAtY()-50, 100, 100);
}
else if (flyAnimate <= 20){
ctx.drawImage(flySprite,100,0, 100, 100, bugX,fly.getDrawAtY()-50, 100, 100);
}
else if (flyAnimate <= 30){
ctx.drawImage(flySprite,200,0, 100, 100, bugX,fly.getDrawAtY()-50, 100, 100);
}
ctx.drawImage(silverShield, bugX+ 20, fly.getDrawAtY()-3);
if (descendAttack || rightMouseActionHappening){
if (!rightMouseActionHappening){
rightMouseActionHappening = true;
}
//200 is pretty badass
}
if (descendAttack) {
ctx.save();
ctx.translate(bugX+60, fly.getDrawAtY()-40 + 90);
ctx.rotate(Math.PI);
ctx.drawImage(silverSword, 0, -10);
ctx.restore();
} else {
ctx.drawImage(silverSword, bugX+ 60, fly.getDrawAtY()-40);
}
flyAnimate++;
ctx.fillStyle = "black";
ctx.font = "bold 13px sans-serif";
ctx.fillText(name, bugX + 22, fly.getDrawAtY()-60);
};
// drawing what I call a redhatter
var draw = function(ctx) {
//var drawAtX = skeleton.getX()-50;
if (skeleton.getMoveDirection() === "left"){
facing_left = true;
} else if (skeleton.getMoveDirection() === "right"){
facing_left = false;
}
if (facing_left){
spritesheet_offset_y = 102;
}
else {
spritesheet_offset_y = 0;
}
var drawAtX = canvas.width/2 + skeleton.getDrawAtX() - localX - 50;
if (skeleton.getAlive()){
ctx.fillStyle="#FF0000";
ctx.fillRect(drawAtX+30,skeleton.getY()-50,((skeleton.getHp()/2.2)),6);
ctx.fillStyle = "black";
} else { /* If it's dead, just write DEAD */
ctx.fillText("DEAD", drawAtX + 37, skeleton.getY()-40);
}
ctx.fillStyle = "black";
ctx.font = "bold 13px sans-serif";
ctx.fillText(name, drawAtX + 25, skeleton.getY()-60);
/* Decides what sprite to draw*/
if (skeleton.getAnimate() <= 20){
ctx.drawImage(RedhatterSprite,0,spritesheet_offset_y, 100, 100, drawAtX,skeleton.getY()-50, 100, 100);
}
else if (skeleton.getAnimate() <= 40){
ctx.drawImage(RedhatterSprite,100,spritesheet_offset_y, 100, 100, drawAtX,skeleton.getY()-50, 100, 100);
}
else if (skeleton.getAnimate() <= 60){
ctx.drawImage(RedhatterSprite,200,spritesheet_offset_y, 100, 100, drawAtX,skeleton.getY()-50, 100, 100);
} else{
ctx.drawImage(RedhatterSprite,200,spritesheet_offset_y, 100, 100, drawAtX,skeleton.getY()-50, 100, 100);
}
};
Here is the full source on GitHub.