如何检测快速移动物体之间的碰撞答案

【问题标题】：How to detect collisions between fast moving objects如何检测快速移动物体之间的碰撞
【发布时间】：2013-05-09 12:56:59
【问题描述】：

通常为了检测画布游戏中的碰撞，我使用类似的方法：

function collides(a, b) {
   return a.x < b.x + b.width &&
     a.x + a.width > b.x &&
     a.y < b.y + b.height &&
     a.y + a.height > b.y;
}

但这仅在处理帧时对象正在接触时才检测到碰撞。如果我有一个精灵，其速度（以像素/帧为单位）大于其路径中障碍物的宽度，它将通过障碍物而不会检测到碰撞。

我将如何检查精灵与其目的地之间的内容？

【问题讨论】：

在每一帧上，检查一个与你的精灵速度长度相同的向量是否与对象相交。
您可以考虑在Game Development 上提问。
也相关：stackoverflow.com/questions/7364884/…

标签： javascript html canvas

【解决方案1】：

这通常是一个难题，对于高质量的解决方案，像 Box 2D 库这样的东西会很有用。

一个快速而肮脏的解决方案（在对角线移动的对象上给出误报）——检查覆盖当前和前一个帧中对象位置的边界框之间的碰撞。

用min(a.x, a.x - a.velocity_x)代替a.x，用max(a.x + a.width, a.x + a.width - a.velocity_x)代替a.x + a.width等

如果快速移动的对象很小（子弹），则测试线（从其原点到原点+速度）与其他对象的盒子之间的碰撞。

【讨论】：

【解决方案2】：

您应该使用移动对象扫过的整个区域（在更新间隔内）作为边界框来检查障碍物。

【讨论】：

【解决方案3】：

看看这个。尝试用箭头键移动 rect 1，如果碰到 rect 2，它会提示“碰撞”。

var rect1x = 0;
var rect1y = 0;
var rect1height = 10;
var rect1width = 10;
var rect2x = 200;
var rect2y = 0;
var rect2height = 10;
var rect2width = 10;
var speedX = 0;
var speedY = 0;
var ctx = document.getElementById("canvas").getContext("2d");
var interval = setInterval(function() {
document.addEventListener("keydown", function(e) {
if (e.key == "ArrowLeft") {
speedX = -1;
}
if (e.key == "ArrowRight") {
speedX = 1;
}
if (e.key == "ArrowUp") {
speedY = -1;
}
if (e.key == "ArrowDown") {
speedY = 1;
}
});
document.addEventListener("keyup", function() {
speedX = 0;
speedY = 0;
});
ctx.clearRect(rect1x, rect1y, rect1width, rect1height);
rect1x += speedX;
rect1y += speedY;
ctx.fillStyle = "blue";
ctx.fillRect(rect1x, rect1y, rect1width, rect1height);
ctx.fillStyle = "red";
ctx.fillRect(rect2x, rect2y, rect2width, rect2height);
if (((rect1x + rect1width > rect2x) && (rect1x < rect2x + rect2width)) && ((rect1y + rect1height > rect2y) && (rect1y < rect2y + rect2height))) {
clearInterval(interval);
alert("collided");
}
}, 0);

&lt;canvas id="canvas" height="400" width="400" style="border: 1px solid black"&gt;&lt;/canvas&gt;

【讨论】：