如何重构此 JS

How can I refactor this JS?

本文关键字：JS 重构 何重构      更新时间：2023-09-26

理想情况下，我会在父类（播放器）中有一个绘制方法

但是我不知道该怎么做。我不知道是否有办法完全解耦。.欢迎任何想法。我不介意修改精灵表，以便它可以处理这种事情。

非常欢迎任何提示！！

两个类都继承自播放器

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

好吧，只需创建一个新对象来处理这个重大责任。之后，将每个 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() {

};
相关文章：