HTML5 - 启动共享相同变量的游戏对象

Question

我只是想知道启动相同对象的最佳方法是什么，这些对象都共享相同的变量，除了它们的位置。

我基本上是在制作 HTML5 游戏的场景，并且我已经构建了一个可以打开和关闭的路灯柱。所有的灯都将具有相同的变量，例如图像、尺寸、开/关功能。唯一不同的是位置 x 和 y。

我在一个变量函数中构建了我的灯（我认为它们被称为 'var = {'），在我的实际游戏 DrawFunction 中，我调用的是 'LampPost.draw();'。

有可能做这样的事情吗？

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

等...然后可能将每个启动的 Lamp 放在一个数组中？

这是灯的sn-p代码：

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

    }
};

Answer 1

实现目标的常用方法有两种：工厂函数或带有原型的构造函数。工厂函数很容易理解，你基本上把你现在拥有的代码，作为返回语句扔到一个函数中。

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 副本制作一个新的绘图功能（并且可能是闪烁功能）。另一种允许每个函数只有一个副本的方法是使用带有原型的构造函数。

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 */
}

现在每个灯柱副本都将引用相同的绘图和闪烁函数，这还具有能够重新定义所有这些或仅一个实例的行为的好处。这个版本的开头有一个检查，以确保它被称为构造函数。为了使用原型属性，必须使用 new 关键字调用函数。这只是确保所有对 LampPost 的调用都将返回一个新的 LampPost 实例。

还要注意在每个函数的末尾我将push 每个实例放入一个数组中以供将来参考，因为这也是您问题的一部分。这让你可以这样做：

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

尽管如此，您也可以拥有一个包含所有可绘制游戏对象（而不仅仅是一个用于灯柱）的数组，然后在一个循环中完成。