Question

嗨，我正在制作汽车游戏，我在下面绘制汽车形状矩形。 xP和yP是从JavaScript中的键盘事件动态传递的，因此是旋转。

ctxDrift.clearRect(0, 0, 426, 754);
ctxDrift.save();
ctxDrift.beginPath();
ctxDrift.translate(xP-car.getWidth()/2, yP-car.getHeight()/2);
ctxDrift.rotate((Math.PI / 180) * car.getRotation());
ctxDrift.translate(-xP, -yP);
ctxDrift.rect(xP-car.getWidth()/2, yP-car.getHeight()/2, car.getWidth(), car.getHeight());
ctxDrift.fillStyle = 'yellow';
ctxDrift.fill();
ctxDrift.restore();

现在有一些障碍，矩形形状，没有旋转。现在我该如何检查这两个对象之间的匹配。或者说如何检查矩形点位于另一个矩形内，如果旋转？

Answer 1

最简单的方法是旋转矩形边界框，这样在进行碰撞检查之前它们基本上不再旋转。然后在绘制图像之前将它们向后旋转。

更好的是，有一个不能旋转的边界框可以用于广泛的测试（快速而便宜的检查，看你是否需要进行窄阶段检查）。

这称为轴对齐边界框，简称AABB。这大大简化了碰撞检测代码。

更新：找到可能有用的this link。

Answer 2

甚至在您开始进行碰撞测试之前： 画布不会跟踪画布上对象的位置。您必须手动跟踪用户完成的累积.translate（）和.rotate（）。您可以通过捕获每个用户键盘事件的转换矩阵更改来完成此操作。然后，您将变换累积到一个最终转换矩阵中，您可以使用它来开始命中测试。

从那里开始，碰撞测试的数学变得非常复杂！

您最简单的碰撞测试只是用圆圈包围每个矩形，然后计算圆心点是否在2个圆半径的总和内。代码如下所示：

function CirclesCollide(x1,y1,radius1,x2,y2,radius2){
    return ( Math.sqrt( ( x2-x1 ) * ( x2-x1 )  + ( y2-y1 ) * ( y2-y1 ) ) < ( radius1 + radius2 ) );
}

如果你想要更好的碰撞测试并且你愿意通过 LOTS 数学，这里有3个碰撞测试的良好来源：http://www.sfml-dev.org/wiki/en/sources/simple_collision_detection

也许最好的解决方案是使用像FabricJs这样的画布库来跟踪画布在画布上的位置，并为您提供命中测试。这很容易！

var theyAreColliding = myCar.intersectsWithObject(myObstical);

Answer 3

这就是我正在寻找此查询

http://www.rgraph.net/blog/2012/october/new-html5-canvas-features.html

canvas现在有addHitRegion（）函数，我们可以在这里轻松跟踪。

新人和最好的

http://www.playmycode.com/blog/2011/08/javascript-per-pixel-html5-canvas-image-collision-detection/

Answer 4

我终于添加了自己的逻辑，就在这里

http://jslogic.blogspot.in/2013/02/javascript-bound-rectangle-area-while.html

使用HTML5 + Javascript和Canvas中的固定形状矩形检查旋转矩形命中点

4 个答案: