canvas 带侧面检测的图像碰撞

Question

我正在制作在线游戏，我使用 HTML5 canvas 和 Javascript 来构建我的游戏。
我有一些形状和一个移动的球，当碰撞形状时，形状应该消失。
形状和球是图像，我的大问题是如何检测球和形状之间的碰撞，因为我的形状是矩形、三角形、多边形和...例如：This Shape

这是我检测碰撞的代码，但它只适用于矩形：

function collide(r1, r2) {
var dx = (r1.x + r1.width / 2) - (r2.x + r2.width / 2);
var dy = (r1.y + r1.height / 2) - (r2.y + r2.height / 2);
var width = (r1.width + r2.width) / 2;
var height = (r1.height + r2.height) / 2;
var crossWidth = width * dy;
var crossHeight = height * dx;
var collision = 'none';

if (Math.abs(dx) <= width && Math.abs(dy) <= height) {
    if (crossWidth > crossHeight) {
        collision = (crossWidth > (-crossHeight)) ? 'bottom' : 'left';
    } else {
        collision = (crossWidth > -(crossHeight)) ? 'right' : 'top';
    }
}

return (collision);

}

Answer 1

只需让您的碰撞代码适用于三角形，然后它就会适用于所有形状！这是用于执行此操作的 Javascript 代码中的公式，取自（大部分）this question.

function sign(p1, p2, p3) {
  return (p1[0] - p3[0]) * (p2[1] - p3[1]) - (p2[0] - p3[0]) * (p1[1] - p3[1]);
}

function inTriangle(point, trip1, trip2, trip3) {
  var b1 = sign(point, trip1, trip2) < 0.0;
  var b2 = sign(point, trip2, trip3) < 0.0;
  var b3 = sign(point, trip3, trip1) < 0.0;

  return  ((b1 == b2) && (b2 == b3));
}

使用此代码，您只需运行、inTriangle(p, v1, v2, v3)，其中 p 是您测试的点，在碰撞检测中，它是一个形状的每个角，带有一个球或圆只是测试圆周上的一些点，v1； v2; v3 是您要测试的三角形的三个点。

请记住，测试矩形的碰撞效率更高，因此如果您有一个可以像矩形一样分割的形状，您应该这样做，而不是将其分割成三角形。

canvas 带侧面检测的图像碰撞

canvas image collision with side detection

javascript

collision-detection

html5-canvas