我该如何重构这个JS？

Question

理想情况下，我会在父类（玩家）有一个绘制方法

但我无法弄清楚如何做到这一点。我不知道是否有任何解耦它完全..任何想法是值得欢迎的。我不介意修改精灵表来处理这类事情。

任何提示都非常欢迎！

两个类都从玩家

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); 
} 
}; 

继承这里是完整的源代码：https://github.com/hassanshaikley/amara-game

Answer 1

好了，只需创建一个新的对象来处理这个重大的责任。之后，将每个if else语句分隔成多个方法。传递主对象作为参考，这样您仍然可以拥有它的实例。

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); 

要

var someObject = new Object(); 

someObject.prototype.drawText = function() { 


};