首页 文章

画布图像与侧面检测碰撞

提问于
浏览 次
0

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

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

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 回答

  • 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是你测试的三角形的三个点 .

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

    回复于

相关问题