具有3个独立文件的Javascript继承

嗨，我有3个javascript文件：Game.js、Player.js、Drawable.js。 现在在Game.js中，我想创建一个对象&u播放器，它是可绘制的，而不是播放器。这意味着player是一个player对象，它是一个扩展Drawable的类

Drawable.js

function Drawable(x, y, src)
{
  this.x = x;
  this.y = y;
  this.img = new Image();
  this.img.src = src;
  this.width = this.img.width;
  this.height = this.img.height;

  this.draw = function(canvas) 
  {   
    canvas.drawImage(this.img,this.x, this.y);
  }

  this.midpoint = function() 
  {
    return {
      x: this.x + this.width/2,
      y: this.y + this.height/2};
    }

  }
}

function Player()
{
  this.moveLeft = function()
  {
    this.x -= 3;
  }

  this.moveRight = function()
  {
    this.x += 3;
  }

  this.moveUp = function() 
  {
    this.y -= 3;
  }

  this.moveDown = function()
  {
    this.y += 3;
  }
}

var _player;

 _player = new Player();

 _player.draw(...);
 _player.moveLeft();
 ...
 ...

Player.js

function Drawable(x, y, src)
{
  this.x = x;
  this.y = y;
  this.img = new Image();
  this.img.src = src;
  this.width = this.img.width;
  this.height = this.img.height;

  this.draw = function(canvas) 
  {   
    canvas.drawImage(this.img,this.x, this.y);
  }

  this.midpoint = function() 
  {
    return {
      x: this.x + this.width/2,
      y: this.y + this.height/2};
    }

  }
}

function Player()
{
  this.moveLeft = function()
  {
    this.x -= 3;
  }

  this.moveRight = function()
  {
    this.x += 3;
  }

  this.moveUp = function() 
  {
    this.y -= 3;
  }

  this.moveDown = function()
  {
    this.y += 3;
  }
}

var _player;

 _player = new Player();

 _player.draw(...);
 _player.moveLeft();
 ...
 ...

Game.js

function Drawable(x, y, src)
{
  this.x = x;
  this.y = y;
  this.img = new Image();
  this.img.src = src;
  this.width = this.img.width;
  this.height = this.img.height;

  this.draw = function(canvas) 
  {   
    canvas.drawImage(this.img,this.x, this.y);
  }

  this.midpoint = function() 
  {
    return {
      x: this.x + this.width/2,
      y: this.y + this.height/2};
    }

  }
}

function Player()
{
  this.moveLeft = function()
  {
    this.x -= 3;
  }

  this.moveRight = function()
  {
    this.x += 3;
  }

  this.moveUp = function() 
  {
    this.y -= 3;
  }

  this.moveDown = function()
  {
    this.y += 3;
  }
}

var _player;

 _player = new Player();

 _player.draw(...);
 _player.moveLeft();
 ...
 ...

---

这就是我想做的。我试着把Player.prototype=新的Drawable；但它不起作用。我该怎么办？

如果您希望玩家对象的行为能够调用

player.draw(...);
player.moveLeft(...);

然后，

draw

和

moveLeft

函数需要作为属性存储在每个玩家对象（yikes）或玩家对象原型链的某个位置

这就引出了一条关于实际代码的注释：这些函数应该在原型中，而不是在实际对象中

所以，为了回答你的实际问题

• 您应该做的第一件事是将方法放置在原型中

• 然后，您需要使一个玩家的原型成为所有可拖动的原型

这听起来可能让人困惑，但这里是资金线：

Player.prototype = Object.create(Drawable.prototype);

在创建具有

新播放器的播放器之前，请执行此操作。

：）

附录

---

--它还向您展示了如何使用“构造函数”来构建一个具有初始x和y的播放器。

Coffeescript是一种具有基于类的对象模型的语言，该模型在javascript的原型对象模型之上建模。在他们的页面上，您可以看到coffeescript编译为javascript时的一个示例。

您可能没有考虑到这一点。也许你从来没有想过这件事，但是为什么不制作一个

可绘制的
组件，通过依赖注入，在构建期间或之后不久，将其提供给玩家呢

var Drawable = function () { ... };
var Player = function () { ... };


var player = new Player(new Drawable(), new Controlable(), new Physical());