画布的面向对象JavaScript

我有这样一个小框架（场景，演员）来建立在我从这本JS书《构建游戏》中得到的基础上。我将在此处显示代码，并在以下情况下提问：

//-------------------------------SCENE CLASS------------------------------//

function Scene(context, width, height, images)
{
    this.context = context;
    this.width = width;
    this.height = height;
    this.images = images;
    this.actors = [];
}

Scene.prototype.register = function(actor)
{
    this.actors.push(actor);
}

Scene.prototype.unregister = function(actor)
{
    var index = this.actors.indexOf(actor);
    if(index >= 0)
    {
        this.actors.splice(index,1);
    }
}

Scene.prototype.draw = function()
{
    this.context.clearRect(0, 0, this.width, this.height);
    for(var i = 0;i < this.actors.length; i++)
    {
        this.actors[i].draw();
    }
}

//-------------------------------ACTOR CLASS-------------------------------//

function Actor(scene, x, y)
{
    this.scene = scene;
    this.x = x;
    this.y = y;
    scene.register(this);
}

Actor.prototype.moveTo = function(x, y)
{
    this.x = x;
    this.y = y;
    this.scene.draw();
}

Actor.prototype.exit = function()
{
    this.scene.unregister(this);
    this.scene.draw();
}

Actor.prototype.draw = function()
{
    var image = this.scene.images[this.type]; // how does this work???
    this.scene.context.drawImage(image, this.x, this.y);
}

Actor.prototype.width = function()
{
    return this.scene.images[this.type].width;
}

Actor.prototype.height = function()
{
    return this.scene.images[this.type].height;
}

//-----------------------------SPACESHIP CLASS------------------------------//

function Spaceship(scene, x, y)
{
    Actor.call(this, scene, x, y);
}

Spaceship.prototype = Object.create(Actor.prototype);

Spaceship.prototype.left = function()
{
    this.moveTo(Math.max(this.x - 10, 0), this.y);
}

Spaceship.prototype.right = function()
{
    var maxWidth = this.scene.width - this.width();
    this.moveTo(Math.min(this.x + 10, maxWidth), this.y);
}

Spaceship.prototype.type = "Spaceship";

---

谢谢！：）

您的Actor构造函数似乎缺少

类型

字段。类型字段是必须传递到场景中的图像数组的标识符

换句话说，您需要从类型/id到图像的映射

Actor.prototype.draw = function()
{
    var image = this.scene.images[this.type]; // how does this work???
    this.scene.context.drawImage(image, this.x, this.y);
}

上述函数通过访问此参与者的类型（这是唯一标识符），从图像数组获取图像数据。然后将图像数据传递给drawImage函数

为了使其工作，每个参与者都需要一个

类型

，因此我更改了以下构造函数：

// Added 'type' property to Actor
function Actor(scene, type, x, y)
{
    this.scene = scene;
    this.type = type;
    this.x = x;
    this.y = y;
    scene.register(this);
}

// Add the image type of this actor
function Spaceship(scene, x, y)
{
    Actor.call(this, 'spaceShipImageId', scene, x, y);
}

设置场景时，需要传入一个包含图像数据的对象（不管图像数据是如何存储的）

下面是一个例子：

var imageData = {'spaceShipImageId': 'IMAGE_DATA...', 'planetImageId': 'DIFFERENT_IMAGE_DATA'};
var scene = new Scene(ctx, 800, 600, imageData);
var spaceship = new Spaceship(scene, 10, 10);
scene.draw();

每次创建新演员时，它都会自动注册到特定场景。

scene.draw（）

方法仅绘制每个演员的图像（基于其

类型

属性）

---

希望能有所帮助。

非常感谢您的回复！我很好奇，您如何指定图像数据？这是图像本身的src吗？它取决于场景上下文类的设置方式。看看这个类的文档，在这里的示例中，您将图像放在HTML的img元素中，id为“spaceShipImageId”，对吗。我只是不知道你所说的图像数据是什么意思。Scene类实际上没有任何文档……与您在代码示例中看到的差不多。drawImage函数很可能包含一个img src字符串。尝试创建从

类型

映射到URL的对象，并将该对象传递到场景中。

var imageData = {'spaceShipImageId': 'IMAGE_DATA...', 'planetImageId': 'DIFFERENT_IMAGE_DATA'};
var scene = new Scene(ctx, 800, 600, imageData);
var spaceship = new Spaceship(scene, 10, 10);
scene.draw();