用于简单碰撞检测的 Javascript 位图答案

【问题标题】：Javascript bit map for simple collision detection用于简单碰撞检测的 Javascript 位图
【发布时间】：2012-01-04 13:50:26
【问题描述】：

我需要帮助/建议来改进/评论我当前的设计：)

这与简单游戏中的碰撞检测有关：动态物体（移动物体）可能与静态物体（即地面、墙壁）发生碰撞。我正在将我的 Obj-C 模型移植到 Javascript，并且在我的实现方式方面面临内存/性能问题。

我正在使用一种非常基本的方法：数组数组代表我在物理不透明度方面的级别。

位设置为0：透明区域，物体可以通过
位设置为 1：不透明区域，物体碰撞

测试一个像素的透明度/不透明度的过程如下：

if (grid[x][y]) {
 // collide!
}

我对 JS 的了解在性能/内存方面非常有限，无法评估这种方法有多好:) 不知道使用数组的效率。

想象一下一个宽 1000 像素、高 600 像素的关卡。这是一个小级别，但这已经意味着一个包含 1000 个数组的数组，每个数组最多包含 600 个条目。此外，我还没有找到一种方法来确保创建像低级语言那样的 1 位大小的元素。

使用以下内容，我可以确定一个条目不是“其他”的东西吗？

grid[x][y] = true;
grid[x][y] = false;

感谢您的宝贵时间和 cmets/建议！

【问题讨论】：

顺便说一句，有没有人参考每个值类型的内存使用情况？我在这里找到了这个，但无法与其他来源确认：stackoverflow.com/questions/1248302/javascript-object-size

标签： javascript arrays performance multidimensional-array bitmap

【解决方案1】：

如果你有一个 1000x600 的网格，你可以保证你在内存中至少有 601 个数组（如果你反过来做，1001 个）。

我会考虑使用 1 个数组或（最好）一个具有映射方案的对象，而不是这样做。

var map = {};
map["1x1"] = 1;
map["1x3"] = 1;
// assume no-hits are empty and free to move through

function canGoIn(x, y) {
    return map.hasOwnProperty(x + "x" + y);
};

交替;

var map = [];
var width = 600;
map.push(0);
map.push(1);
// etc

function canGoIn(x, y) {
    return map[(x * width) + y] == 1;
}

【讨论】：

嘿，这是一个非常有趣的想法，我非常喜欢它。在您的第一个提案中，您使用字符串“1x3”作为数组中的索引。我想“10000x10000”是最长的值，即 11 个字符。就内存而言，这不是仍然很大吗？
@jeM680000：我不会说“巨大”，但它显然会有一些的用法。我刚刚做了一些测试，似乎单个数组是最有效的（~11000k）。接下来是多个数组（~14000kb），地图使用~25000k）。（假设输入为 1000x1000）（有关我使用的测试，请参阅 jsperf.com/quickest-way-to-represent-a-map；我检查了 XP SP3 上 Chrome 16 中选项卡的内存使用情况）
嘿，谢谢，太棒了。感谢您的宝贵时间，让我也了解了 jsperf。非常感谢！

【解决方案2】：

布尔值不会仅存储为一位，对于我知道的任何其他语言（包括 C）也是如此。

如果你有内存问题，你应该考虑实现一个像这样的位数组：https://github.com/bramstein/bit-array/blob/master/lib/bit-array.js

你必须把你的二维数组变成一个简单的向量，然后像这样转换你的 x、y 坐标：offset = x + (y * width);

浏览数组仍然会导致乘法来计算偏移量，因此使用向量等同于数组。

但我怀疑调用函数（如果您使用位数组）并在内部进行一些评估会导致性能下降。

我认为你不能同时获得性能和节省内存。

【讨论】：