画布游戏 - 存储/计算位置/迭代粒子/子弹/游戏元素的最有效方法

Question

让我们说我想存储所有子弹，任何人都在我的游戏中射击以计算每帧的新位置等。

如果有10个玩家，每个人的射击速度是每秒10次射击，我们可能需要在10秒后追踪1000个物体。

我们知道，对数组进行迭代非常有效。

我应该添加这样的新子弹吗？

// "bullets" is an array
bullets.push({
    x_position: 5, // x position from which bullet was shot
    y_position: 10, // same as above but for y
    x_speed: 2, // count of pixels that bullet is travelling on x axis per frame
    y_speed: 10 // as above but for y
});

我应该删除击中界限的子弹，还是其他像这样的玩家？

delete bullets[i] // i -> currently processed bullet index

如果我试图从子弹阵列中取出该元素，那么对于长数组来说效率不高。

老实说，我没有更好的想法来解决子弹问题。通过这种数组进行迭代可能会在几分钟之后变得很痛苦，因为如果我们删除旧的子弹，数组长度保持不变，我们最终会迭代数百万条记录，其中99％只是空的。

Answer 1

我相信你想要实现链表而不是使用JavaScript数组。

JS数组的真相

首先，您可能对数组有误解。当我们想到JavaScript数组时，我们实际上是在讨论关键字恰好是整数的哈希映射。这就是为什么数组可以有非数字索引：

L = [];
L[1] = 4
L["spam"] = 2;

对于数组而言迭代速度很快（至少在C / C ++意义上），但是通过散列映射的迭代相当差。

在您的情况下，如果满足certain constraints，某些浏览器可能会将您的数组实现为真正的数组。但我相当肯定你也不想要一个真正的阵列。

阵列性能

即使是一个真正的阵列也不是特别适合你想做的事情（正如你所指出的那样，你的数组只会不断填充undefined元素，即使你删除了子弹！）

想象一下，如果你确实要从真实数组中删除子弹并删除undefined元素：我能想到的最有效的算法是在完全扫射子弹后创建一个新阵列，复制所有子弹尚未删除到这个新数组。这很好，但我们可以做得更好。

JavaScript中的链接列表！

根据您的问题，我认为您需要以下内容：

• 快速创作
• 快速迭代
• 快速删除

提供恒定时间创建，迭代和删除的简单数据结构是链接列表。 （也就是说，链接列表不允许您快速获取随机项目符号。如果这对您很重要，请改用树！）

那么如何实现链表呢？我最喜欢的方法是给每个对象一个next引用，以便每个项目符号指向或链接到列表中的下一个项目符号。

初始化

以下是关闭链接列表的方法：

first_bullet = {
    x_position: 5,
    y_position: 10,
    x_speed: 2,
    y_speed: 10,
    next_bullet: undefined, // There are no other bullets in the list yet!
};

// If there's only one bullet, the last bullet is also the first bullet.
last_bullet = first_bullet;

附加

要在列表末尾添加项目符号，您需要设置旧next的{​​{1}}引用，然后移动last_bullet：

last_bullet

迭代

迭代链表：

new_bullet = {
    x_position: 42,
    y_position: 84,
    x_speed: 1,
    y_speed: 3,
    next_bullet: undefined, // We're going to be last in the list
};

// Now the last bullet needs to point to the new bullet
last_bullet.next_bullet = new_bullet;

// And our new bullet becomes the end of the list
last_bullet = new_bullet;

删除

现在删除。在此处，for (b = first_bullet; b; b = b.next_bullet) { // Do whatever with the bullet b // We want to keep track of the last bullet we saw... // you'll see why when you have to delete a bullet old = b; } 表示要删除的项目符号，b表示链接列表中的项目符号 - 因此old等同于old.next_bullet。

b

请注意，我没有使用function delete_bullet(old, b) { // Maybe we're deleting the first bullet if (b === first_bullet) { first_bullet = b.next_bullet; } // Maybe we're deleting the last one if (b === last_bullet) { last_bullet = old; } // Now bypass b in the linked list old.next_bullet = b.next_bullet; }; 删除子弹。那是因为delete doesn't do what you think it does.

Answer 2

这是我删除项目符号或集合中任何对象的方法。从未发现它是游戏的瓶颈 - 它始终是渲染。

游戏

game = {
  dirty: false,
  entities: [ ],
  clean: function() {
    this.dirty = false;
    clean(this.entities, "_remove");
  },
  step: function() {
    if(this.dirty) this.clean();
  }
}

子弹

Bullet = function() { 
  this._remove = false;
}

Bullet.prototype = {
  kill: function() {
    this.game.dirty = true;
    this._remove = true;
  }
}

清洁功能

function clean(array, property) {

  var lastArgument = arguments[arguments.length - 1];
  var isLastArgumentFunction = typeof lastArgument === "function";

  for(var i = 0, len = array.length; i < len; i++) {
    if(array[i] === null || (property && array[i][property])) {
      if(isLastArgumentFunction) {
        lastArgument(array[i]);
      }
      array.splice(i--, 1);
      len--;
    }
  }
}