Question

我只是想知道最好的方法是启动所有共享相同变量的相同对象，除了它们的位置。

我基本上正在研究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();

    }
};

Answer 1

实现目标有两种常用方法：工厂函数或带原型的构造函数。工厂函数很容易理解，你基本上把你现在拥有的代码，并作为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的每个副本具有新的绘制功能（并且可能是闪烁功能）的缺点。允许您只拥有每个函数的一个副本的另一种方法是使用带有原型的构造函数。

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

尽管如此，你可能还有一个包含所有可绘制游戏对象的数组（而不仅仅是一个用于灯柱的对象），只需在一个循环中完成。

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

1 个答案: