javascript - 我应该使用构造函数/原型(prototype)吗？

Question

function setupMapObjects() {
    lootChest = new PIXI.Sprite(frame("images/chest.png", 0, 0, 50, 50));
    lootChest.x = 200;
    lootChest.y = 200;
    lootChest.anchor.x = 0.5;
    lootChest.anchor.y = 0.7;
    lootChest.closed = true;
    lootChest.opening;
    lootChest.frameCycle = 0;
    lootChest.interactive = true;
    lootChest.hitArea = new PIXI.Circle(lootChest.x, lootChest.y, 10);
    lootChest.on('click', openChest);
    Map.addChild(lootChest);    



    lootChest2 = new PIXI.Sprite(frame("images/chest.png", 0, 0, 50, 50));
    lootChest2.x = 400;
    lootChest2.y = 400;
    lootChest2.anchor.x = 0.5;
    lootChest2.anchor.y = 0.7;
    lootChest2.closed = true;
    lootChest2.opening;
    lootChest2.frameCycle = 0;
    lootChest2.interactive = true;
    lootChest2.hitArea = new PIXI.Circle(lootChest2.x, lootChest2.y, 10);
    lootChest2.on('click', openChest);
    Map.addChild(lootChest2);
};


function openingChest() {
    this.texture.frame = new PIXI.Rectangle(this.frameCycle*50, 0, 50, 50);
    if (this.frameCycle === 3) {
        clearInterval(this.opening); 
    } else {
        this.frameCycle++;    
    };
};


function openChest() {
    if (distance(Player.sprite.x, Player.sprite.y, this.x, this.y) < 50) {
        if (this.closed) {
            this.opening = setInterval(openingChest.bind(this), 100);
            this.frameCycle = 1;
            this.closed = false; 
        };
    };
};

我有 2 个宝箱 Sprite ，当点击且玩家靠近时它们会打开。现在我正在尝试找出一种有效的方法来创建其中 50 个。如果继续像我已经做的那样继续制作它们会有多糟糕，有什么替代方案吗？

Answer 1

构造函数似乎是正确的想法。毕竟，您不想为每个箱子命名(lootChest1..lootChest50)。更不用说，你要确保所有的箱子都是平等创建的。所以像这样的东西应该运作良好。

function Chest(x, y) {
  this.x = x;
  this.y = y;
  this.anchor.x = 0.5;
  this.anchor.y = 0.7;
  this.closed = true;
  this.opening;
  this.frameCycle = 0;
  this.interactive = true;
  this.hitArea = new PIXI.Circle(lootChest.x, lootChest.y, 10);
  this.on('click', openChest);
}

// Have them "inherit" from PIXI.Sprite
Chest.prototype = new PIXI.Sprite(frame("images/chest.png", 0, 0, 50, 50));

// How to use it
var lootChest = new Chest(200, 200);

自从我与 PIXI 合作以来已经有一段时间了，所以我不记得这种继承风格是否适用于他们的渲染系统。如果没有，您可以将其设为工厂函数。工厂函数看起来就像您创建第一个箱子的方式一样(除非您希望将其分配给局部变量)，然后从函数返回该箱子。

编辑:工厂方法看起来像这样:

function createChest(x, y) {
  var chest = new PIXI.Sprite(frame("images/chest.png", 0, 0, 50, 50));
  chest.x = x;
  chest.y = y;
  chest.anchor.x = 0.5;
  chest.anchor.y = 0.7;
  chest.closed = true;
  chest.opening;
  chest.frameCycle = 0;
  chest.interactive = true;
  chest.hitArea = new PIXI.Circle(lootChest.x, lootChest.y, 10);
  chest.on('click', openChest);
  return chest;
}

// How to use it
var lootChest = createChest(200, 200);

我有一个example of how to inherit from PIXI.Sprite但有点复杂。这样做的方式是允许可配置性，因为它是在游戏引擎中，但如果您确切地知道您想要的对象是什么样子，那么上述任何一种方法都应该没问题。