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

【问题标题】：canvas image collision with side detection带有侧面检测的画布图像碰撞
【发布时间】：2017-06-30 19:32:49
【问题描述】：

我正在制作一款在线游戏，我使用 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);

}

【问题讨论】：

标签： javascript html5-canvas collision-detection

【解决方案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 是您要测试的三角形的三个点。

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

【讨论】：