Как я могу реорганизовать этот JS?

Question

В идеале у меня был бы один метод draw в родительском классе (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); 
} 
}; 

вот полный источник: https://github.com/hassanshaikley/amara-game

Answer 1

Ну, просто создать новый объект для обработки этой большой ответственности. После этого отделите каждое из них, если есть какие-либо выражения в методах. Передайте основной объект в качестве ссылки, чтобы вы все еще могли иметь свой экземпляр.

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() { 


};