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


};

我怎样才能重构这个JS？

1 个答案: