0

嗨，我正在制作一个汽车游戏，其中我绘制了一个汽车形状矩形，如下所示。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();

现在有一些障碍物，矩形形状，没有旋转。现在我怎么能检查这两个对象之间的命中。或者说如何检查矩形点是否位于另一个矩形内，如果旋转？

4

4 回答 4

1

这就是我正在寻找的这个查询

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/

于 2013-02-21T10:59:28.210 回答
1

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

更好的是，有一个不旋转的边界框，可用于宽相位测试（快速且便宜的检查，看看您是否需要进行窄相位检查）。

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

更新：发现此链接可能有用。

于 2013-02-20T21:55:15.160 回答
1

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

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

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

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

如果您想要更好的碰撞测试并且您愿意涉足大量数学，这里是 3 个碰撞测试的良好来源： http : //www.sfml-dev.org/wiki/en/sources/simple_collision_detection

也许最好的解决方案是使用像 FabricJs 这样的画布库，它可以跟踪对象在画布上的位置并为您提供命中测试。就这么简单！

var theyAreColliding = myCar.intersectsWithObject(myObstical);
于 2013-02-21T01:10:24.857 回答
0

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

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

于 2013-02-26T14:10:18.357 回答