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

HTML5 - Initiate Game Objects that Share Same Variable

本文关键字：变量 游戏 对象 启动 共享 HTML5      更新时间：2023-09-26

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

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

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

有可能做这样的事情吗？

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

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

这是灯的片段代码：

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

有两种常见的方法可以实现您的目标：工厂函数或带有原型的构造函数。 工厂函数相当容易理解，你基本上把你现在拥有的代码，作为 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 的新实例。

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

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

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

相关文章：