带侧面检测的画布图像碰撞

Question

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

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代码中的公式，主要来自这个问题。

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 是您测试的三角形的三个点。

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