我該如何重構這個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() { 


};