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";

私の質問は、この宇宙船の例やその他のアクター オブジェクトの Scene コンストラクターに画像をプラグインするにはどうすればよいですか? 本では「データテーブル」を作成することは非常に漠然と述べられていますが、どうすればよいかわかりません。このクラスを利用したい場合は、次のようにする必要があると思います。

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

ありがとうございました！:)

4

1 に答える 1

0

typeActor コンストラクターにフィールドがないようです。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 に答える