Javascript 如何在2d中表示使用过的空间？

我有固定面积的二维空间填充矩形。我想移动矩形，添加新的，删除一些，但不允许它们重叠。如果所有矩形的高度和宽度相同（50x50px），我应该用什么样的数据结构来存储它们的位置和它们所使用的空间，以及在向场景添加新的记录时我应该使用什么样的查询方法？

< P>我不确定我完全理解你的环境，但是你可以考虑使用一个基本上是矩阵的二维数组。每个点代表二维空间中的一个正方形。

这是经典问题的简单部分。大多数情况下（不确定这是否是最佳链接，但无论如何，这就是名称）用于有效地解决该问题，但查找用于边界框碰撞检测的任何碰撞检测算法。AABB（轴对齐边界框）树用于“对齐”的矩形，即不能旋转的矩形

对于非对齐矩形，只需选取包含旋转矩形的最小轴对齐矩形。事实上，AABB树通过获取任意多边形的边界框来加速碰撞检测。如果轴对齐的边界框等于所有对象，则效果更好

但是，如果您不介意性能，使用矩形的平面列表并执行O（n2）搜索将非常容易：在伪代码中：

function intersection_free(rectangles)
    for rect in rectangles
        for rect2 in rectangles
            if intersects(rect, rect2)
                return false;

    return true;

---

简单是件好事，不是吗？

一般来说，在处理此类问题时，应该使用多维数据结构。是学习这门学科的良好起点。因为这些结构比较复杂，所以只有在需要处理1000的矩形/做快速计算时考虑使用它。 但是，在您的特定情况下，如果平面大小受到限制，您可以使用网格（比如100x100）单元划分平面，并根据每个矩形的左上角对应关系在每个单元中存储矩形列表。搜索碰撞时，只搜索相关单元格及其相邻单元格。由于矩形的大小是恒定的，因此这可能是最适合您的解决方案。 请注意，您可以将二维数组存储在一维数组中，其中每个网格单元索引为100X+Y。现在，您可以将网格单元存储在地图中以节省内存

---

如果您正在处理小规模/缓慢规模的问题，只需将矩形存储在列表中，然后遍历列表以搜索冲突。

是否需要将矩形对齐到给定网格？