本文档旨在提供一种解决 JavaScript 中轴对齐矩形（AABB）碰撞后产生穿透现象的方案。我们将介绍一种基于最小位移向量（Minimum Translation Vector, MTV）的碰撞解析方法，并提供详细的代码示例，帮助开发者避免物体碰撞后互相穿透的问题，提升游戏或应用的物理交互体验。
矩形碰撞检测与穿透问题
在游戏开发和一些图形应用中，矩形碰撞检测是非常常见的需求。通常，我们使用简单的 AABB（Axis-Aligned Bounding Box，轴对齐包围盒）碰撞检测来判断两个矩形是否发生碰撞。这种方法简单高效，但如果处理不当，会导致物体碰撞后互相穿透的现象。
基本的矩形碰撞检测如下：
function rectangleToRectangleCollision(obj1, obj2) {
if (obj1.x + obj1.width > obj2.x &&
obj1.y + obj1.height > obj2.y &&
obj1.x < obj2.x + obj2.width &&
obj1.y < obj2.y + obj2.height) {
return true;
}
return false;
}上述代码仅仅判断了两个矩形是否相交，并没有解决碰撞后的物体位置调整问题，因此会产生穿透。
立即学习“Java免费学习笔记（深入）”；
碰撞解析：最小位移向量（MTV）
解决穿透问题的一种有效方法是使用最小位移向量（Minimum Translation Vector, MTV）。 MTV 指的是将一个物体从碰撞状态中移出的最小向量。通过计算 MTV，我们可以将发生碰撞的物体沿着 MTV 的方向移动，从而避免穿透。
以下代码展示了如何计算 MTV 并进行碰撞解析：
function rectangleToRectangleCollisionResolution(obj1, obj2) {
// 计算两个矩形中心点的距离
var vx = (obj1.x + obj1.width / 2) - (obj2.x + obj2.width / 2);
var vy = (obj1.y + obj1.height / 2) - (obj2.y + obj2.height / 2);
// 判断在哪个轴向上重叠更多
if (Math.abs(vx / obj2.width) > Math.abs(vy / obj2.height)) {
// X 轴方向重叠更多
if (vx < 0) {
// obj1 在 obj2 左侧，将 obj1 移动到 obj2 左侧
obj1.x = obj2.x - obj1.width;
} else {
// obj1 在 obj2 右侧，将 obj1 移动到 obj2 右侧
obj1.x = obj2.x + obj2.width;
}
} else {
// Y 轴方向重叠更多
if (vy < 0) {
// obj1 在 obj2 上方，将 obj1 移动到 obj2 上方
obj1.y = obj2.y - obj1.height;
} else {
// obj1 在 obj2 下方，将 obj1 移动到 obj2 下方
obj1.y = obj2.y + obj2.height;
}
}
}这段代码的核心思想是：
- 计算中心点距离：计算两个矩形中心点在 x 和 y 轴上的距离差。
- 判断重叠轴向：比较 x 轴和 y 轴方向上的重叠程度，选择重叠较多的轴向。
- 移动物体：根据重叠轴向和距离差的方向，将物体移动到不重叠的位置。
代码集成与示例
将上述碰撞解析函数集成到你的游戏循环中。在 updateTank 函数中，当检测到碰撞时，调用 rectangleToRectangleCollisionResolution 函数：
function updateTank(tank, isEnemy = false) {
// ... 其他代码 ...
for (var i = 0; i < infoLevel.map.walls.length; i++) {
var wall = infoLevel.map.walls[i];
if (rectangleToRectangleCollision(tank, wall)) {
rectangleToRectangleCollisionResolution(tank, wall);
}
}
// ... 其他代码 ...
}注意事项
- 性能优化：在复杂的场景中，碰撞检测可能成为性能瓶颈。可以考虑使用空间分区技术（如四叉树）来减少需要检测的物体数量。
- 碰撞响应：上述代码仅仅解决了穿透问题，并没有实现真实的物理碰撞响应。如果需要更真实的物理效果，可以考虑加入速度反弹、摩擦力等因素。
- 边缘情况：在一些特殊情况下，上述代码可能无法完美解决碰撞问题。例如，当两个物体完全重叠时，需要额外的处理逻辑。
总结
通过使用最小位移向量（MTV）方法，可以有效地解决 JavaScript 中 AABB 碰撞后的穿透问题。这种方法简单易懂，易于实现，并且可以满足大多数游戏和图形应用的需求。在实际开发中，可以根据具体情况进行优化和扩展，以获得更好的性能和更真实的物理效果。
