0

我在构建游戏时从这本 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";

我的问题是，对于这个宇宙飞船示例或可能出现的任何其他演员对象，您如何将图像插入到场景构造函数中？它在书中非常含糊地说要创建一个“数据表”，但我不知道该怎么做。如果我想利用这个类，我想我必须做这样的事情：

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

谢谢！:)

4

1 回答 1

0

您的 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);
}

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

为了使它起作用，每个演员都需要一个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();

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

希望有帮助。

于 2013-03-14T08:26:50.060 回答