我重新问这个问题是因为我在上一个问题中没有明确说明我想要什么。
有谁知道如何使用矩形在 Canvas 中进行弹性碰撞或处理碰撞？或者能给我指出正确的方向吗？
我创建了一个具有多个正方形的画布，并希望每个正方形在接触时发生偏转。
这是我整理的一个快速小提琴，显示在黑色缓冲画布上http://jsfiddle.net/claireC/Y7MFq/10/
第 39 行是我开始碰撞检测的地方，第 59 行是我尝试执行它的地方。我将有超过 3 个方块四处移动，并希望它们在相互接触时偏转
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d");
context.fillStyle = "#FFA500";
context.fillRect(0, 0, canvas.width, canvas.height);
var renderToCanvas = function (width, height, renderFunction) {
var buffer = document.createElement('canvas');
buffer.width = width;
buffer.height = height;
renderFunction(buffer.getContext('2d'));
return buffer;
};
var drawing = renderToCanvas(100, 100, function (ctx) {
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
});
var drawing2 = renderToCanvas(100, 100, function (ctx) {
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
});
var x = 0,
y = 0,
x2 = 200,
y2 = 10,
vx = .80,
vy = .80,
vx2 = .80,
vy2 = .80;
function collides(rectA, rectB) {
return !(rectA.x + rectA.width < rectB.x2 ||
rectB.x2 + rectB.width < rectA.x ||
rectA.y + rectA.height < rectB.y2 ||
rectB.y2 + rectB.height < rectA.y);
};
function executeFrame() {
x+=vx;
y+=vy;
x2+=vx2;
y2+=vy2;
if( x < 0 || x > 579) vx = -vx;
if( y < 0 || y > 265) vy = -vy;
if( x2 < 0 || x2 > 579) vx2 = - vx2;
if( y2 < 0 || y2 > 233) vy2 = - vy2;
if(collides(drawing, drawing2)){
//move in different direction
};
context.fillStyle = "#FFA500";
context.fillRect(0, 0, canvas.width, canvas.height);
context.drawImage(drawing, x, y);
context.drawImage(drawing2, x2, y2);
requestAnimationFrame(executeFrame);
}
//start animation
executeFrame();
进行矩形碰撞检测可能比看起来更复杂。
这不仅仅是弄清楚两个矩形是否相交或重叠，而且我们还需要知道它们碰撞的角度以及它们移动的方向，以便正确地偏转它们，理想情况下将“速度”传递给彼此（质量/能量）等等。
我在这里介绍的方法将执行以下步骤：
检测交点和角度的代码如下，其中r1 and r2这里是具有属性的对象x, y, w and h.
function collides(r1, r2) {
/// classic intersection test
var hit = !(r1.x + r1.w < r2.x ||
r2.x + r2.w < r1.x ||
r1.y + r1.h < r2.y ||
r2.y + r2.h < r1.y);
/// if intersects, get angle between the two rects to determine hit zone
if (hit) {
/// calc angle
var dx = r2.x - r1.x;
var dy = r2.y - r1.y;
/// for simplicity convert radians to degree
var angle = Math.atan2(dy, dx) * 180 / Math.PI;
if (angle < 0) angle += 360;
return angle;
} else
return null;
}
该函数将返回一个angle or null然后我们用它来确定循环中的偏转（即：在我们的例子中，角度用于确定击中区域）。这是必要的，以便它们朝正确的方向反弹。
只需进行简单的相交测试和偏转，您就可能面临盒子偏转的风险，如右图所示，这对于 2D 场景来说是不正确的。您希望方框继续朝左侧没有影响的方向移动。
以下是我们如何确定要反转的速度矢量（提示：如果您想要更多physical正确的偏转你可以让矩形“吸收”其他矩形的一些速度，但我不会在这里介绍）：
var angle = collides({x: x, y: y, w: 100, h: 100}, /// rect 1
{x: x2, y: y2, w: 100, h: 100}); /// rect 2
/// did we have an intersection?
if (angle !== null) {
/// if we're not already in a hit situation, create one
if (!hit) {
hit = true;
/// zone 1 - right
if ((angle >= 0 && angle < 45) || (angle > 315 && angle < 360)) {
/// if moving in + direction deflect rect 1 in x direction etc.
if (vx > 0) vx = -vx;
if (vx2 < 0) vx2 = -vx2;
} else if (angle >= 45 && angle < 135) { /// zone 2 - bottom
if (vy > 0) vy = -vy;
if (vy2 < 0) vy2 = -vy2;
} else if (angle >= 135 && angle < 225) { /// zone 3 - left
if (vx < 0) vx = -vx;
if (vx2 > 0) vx2 = -vx2;
} else { /// zone 4 - top
if (vy < 0) vy = -vy;
if (vy2 > 0) vy2 = -vy2;
}
}
} else
hit = false; /// reset hit when this hit is done (angle = null)
差不多就是这样了。
The hit使用标志是为了当我们受到撞击时，我们将“情况”标记为撞击情况，这样我们就不会得到内部偏转（例如，这可能会在高速时发生）。只要我们在命中设置为真后得到一个角度，我们仍然处于相同的命中情况（无论如何理论上）。当我们收到 null 时，我们会重置并准备好迎接新的命中情况。
另外值得一提的是，这里的主要矩形（我们检查其侧面）是第一个矩形（在本例中为黑色）。
如果您想放入两个以上的矩形，那么我建议在矩形本身方面采用与此处使用的不同的方法。我建议创建一个长方形object它在位置、大小、颜色方面是独立的，并且还嵌入了更新速度、方向和绘画的方法。例如，矩形对象可以由执行清除并调用对象的更新方法的主机对象来维护。
要检测碰撞，您可以使用这些对象迭代数组，以找出哪个矩形与当前正在测试的矩形发生碰撞。这里重要的是你“标记”（使用标志）一个已经测试过的矩形，因为碰撞中总是至少有两个，如果你测试 A，然后测试 B，你最终将在不使用用于跳过每帧碰撞“伙伴”对象测试的标志。
Note：这里没有介绍一些特殊情况，例如精确角上的碰撞，或者矩形被困在一个边缘和另一个矩形之间（您也可以使用上面提到的命中标志进行边缘测试）。
我没有优化任何代码，但试图使其尽可能简单，以使其更容易理解。
希望这可以帮助！