画布图像与侧面检测碰撞

Question

我正在制作一款在线游戏，我使用HTML5画布和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是你测试的三角形的三个点。

请记住，测试矩形的碰撞效率更高，所以如果你的形状可以像矩形那样划分，你应该这样做，而不是将它分成三角形。