Question

我有这种迷你框架（场景，演员）可以建立在我从这本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";

我的问题是，您如何将图像插入此太空船示例的Scene构造函数或可能出现的任何其他actor对象？它在书中非常模糊地说，创建一个“数据表”，但我不知道如何去做。如果我想利用这个课程，我想我必须做这样的事情：

var scene = new Scene(ctx,800,600, //not sure here)
var spaceship = new Spaceship(scene,10,10);
scene.draw();

谢谢！：）

Answer 1

您的Actor构造函数似乎缺少type字段。 type字段是必须传递到场景中的图像数组的标识符。

换句话说，您需要从类型/ 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);
}

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

为了使其工作，每个actor都需要type，所以我改变了以下构造函数：

// 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();

每次创建新actor时，它都会自动注册到特定场景。 scene.draw()方法只是绘制每个actor的图像（基于它的type属性）。

希望有所帮助。

面向对象的Canvas JavaScript

1 个答案: