如何重構此JS？

Question

理想情況下，我將在父類（播放器）中使用一個draw方法

但是我不知道該怎么做。 我不知道是否有將它完全分離的方法。 我不介意修改Sprite工作表，以便它可以處理這種事情。

任何提示都非常歡迎！！

這兩個類都繼承自玩家

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


};