1

位置を除いて、すべて同じ変数を共有する同じオブジェクトを開始する最良の方法は何だろうと思っています。

私は基本的に HTML5 ゲームのシーンに取り組んでおり、オンとオフを切り替える街灯のポストを作成しました。すべてのランプは、イメージ、サイズ、オン/オフ機能など、同じ変数を持ちます。異なるのは、位置 x と y だけです。

変数関数内でランプを作成し ('var = {' と呼ばれていると思います)、実際のゲーム DrawFunction 内で 'LampPost.draw();' を呼び出しています。

このようなことは可能ですか？

LampPost(0,0);
LampPost(100, 0);
LampPost(200, 0);

など ...そして、開始された各ランプを配列内に配置する可能性がありますか?

これはランプのスニペット コードです。

var LampPost = {

    lamp_xsprite : 0,
    lamp_ysprite : 0,

    light_xsprite : 0,
    lightysprite : 0,

    x : 440,
    y : 320,

    //Flicker effects
    lightFlicker : 0,
    seconds_Off : 0,
    seconds_On : 0,

    randomLength_Off : 500,
    randomLength_On : 150,


    draw: function(x, y) {

        this.x = x;
        this.y = y;

        ctxPropsOver.setTransform(1, 0, 0, 1, -Map.x + gameWidth/2, -Map.y + gameHeight/2);
        ctxPropsOver.rotate(Math.PI / -25);
        ctxPropsOver.clearRect(0, 0, 1000, 1000);

        ctxPropsOver.globalAlpha = this.lightFlicker;
        ctxPropsOver.drawImage(imgLights, 0, 36, 500, 463, -60 + this.x, -190 + this.y, 500, 463);
        ctxPropsOver.globalAlpha = 1;
        ctxPropsOver.drawImage(imgLights, 0, 0, 210, 36, 0 + this.x, 0 + this.y, 210, 36);

        this.flicker();

    }
};
4

1 に答える 1

0

目標を達成する一般的な方法は 2 つあります。ファクトリ関数またはプロトタイプを使用したコンストラクタ関数です。ファクトリ関数は非常に簡単に理解できます。基本的には、現在のコードを取得し、return ステートメントとして関数にスローします。

function LampPost(x, y) {
   var lampPost = {
        lamp_xsprite: 0,
        lamp_ysprite: 0,

        light_xsprite: 0,
        lightysprite: 0,

        x: x, //Reference x argument here
        y: y, //Reference y argument here

        //Flicker effects
        lightFlicker: 0,
        seconds_Off: 0,
        seconds_On: 0,

        randomLength_Off: 500,
        randomLength_On: 150,


        draw: function(x, y) { /* Cut for readability */ }
    };

    globalLampPostArray.push(lampPost);

    return lampPost;
}

ただし、これには、作成される LampPost のコピーごとに新しい描画関数 (およびおそらくちらつき関数) を作成するという欠点があります。各関数のコピーを 1 つだけ持つことを可能にするもう 1 つの方法は、プロトタイプでコンストラクター関数を使用することです。

function LampPost(x, y) {

    //Make sure LampPost is called as a constructor
    if(!this instanceof LampPost) {
        return new LampPost(x, y);
    }

    this.lamp_xsprite = 0;
    this.lamp_ysprite = 0;

    this.light_xsprite = 0;
    this.lightysprite = 0;

    this.x = x; //Reference x argument here
    this.y = y; //Reference y argument here

    //Flicker effects
    this.lightFlicker = 0;
    this.seconds_Off = 0;
    this.seconds_On = 0;

    this.randomLength_Off = 500;
    this.randomLength_On = 150;

    globalLampPostArray.push(this);
}

LampPost.prototype.draw = function(x, y) {
    /* Draw function code */
}

LampPost.prototype.flicker = function() {
    /* Flicker code */
}

これで、街灯柱の各コピーが同じ描画関数とフリッカー関数を参照するようになりました。これには、それらすべてまたは 1 つのインスタンスのみで動作を再定義できるという利点もあります。このバージョンの冒頭には、コンストラクターとして呼び出されたことを確認するためのチェックがあります。プロトタイプ プロパティを使用するには、関数をnewキーワードで呼び出す必要があります。これにより、LampPost へのすべての呼び出しが LampPost の新しいインスタンスを返すようになります。

また、各関数の最後に、後で参照できるように各インスタンスを配列にプッシュすることに注意してください。これも質問の一部でした。これにより、次のことが可能になります。

function drawLampPosts() {
    for (var i = 0, len = globalLampPostArray.length; i < n; i++) {
        globalLampPostArray[i].draw();
    };
}

ただし、すべての描画可能なゲーム オブジェクト (ランプ ポスト用に 1 つだけではなく) を含む配列を用意し、それを 1 つのループで行うこともできます。

于 2013-01-30T13:25:46.767 に答える