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

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

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 的新实例。

另请注意，在每个函数的末尾，我将每个实例推送到一个数组中以供将来参考，因为这也是您问题的一部分。这使您可以这样做：

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

虽然，您还不如拥有一个包含所有可绘制游戏对象（而不仅仅是一个用于灯柱）的数组，并且只需在一个循环中完成。

于 2013-01-30T13:25:46.767 回答