HTML5自上而下的赛车游戏

Question

我正在创建一个基于HTML5的自上而下的赛车游戏，为了让汽车绕过赛道，我研究了两种可能的解决方案（我已经在一定程度上工作）：

1. Paper JS
2. Pathanimator

我已经将这两者都单独工作，因为我可以让物体在路径上移动，但我遇到的绊脚石是每辆车在赛道的两侧都有自己的起始位置（所以不会总是从路径中的同一点开始）。在第一个弯道之后，汽车还需要单个文件。

另一个因素是超车。我已经设法使用一些Javascript来解决两个物体相交的问题，但是需要使物体有效地“绕过”前面的物体，然后再回到赛道上。

在这里锻炼相当多但是想知道是否有人有一些狡猾的想法来完成上述任何工作？

非常感谢您的帮助!!

由于

Answer 1

通常寻路工​​作无国籍;你选择哪个起点并不重要。如果使用算法，目的实际上是失败的，不能将一般点作为起始值。我没有参与你提到的那些，他们可能会支持它。

如果您只在轨道周围构建一条可能的路径，那么每辆车都会跟随。为了能够让汽车在不同的轨道上开始，您可以通过标量（例如他们的车号）来抵消他们的位置。也就是说，相对于路线偏移路径的位置（模拟轨道变化）。

为了让他们都选择相同的曲目，就像有一个点告诉＆＃34;现在转到相同的曲目＆＃34;，这将为每个人设置标量为1。

对于超车，通常使用Pythagorean theorem计算两辆车之间的线性距离，当车A接近车厢B时，车辆A的偏移标量设置为车辆B＆＃39; s offset + 1，这将使它选择外部轨道。当然，这种过渡将被内插/外推以提供平滑的体验。然后当它通过时，再次重置为1.

Answer 2

您需要一个清晰的坐标系统以避免混淆 在这种情况下，你应该有＆＃39; x＆＃39;作为从起点到当前位置的basePoint的距离。 而且，在汽车和曲线之间，局部垂直于曲线的位移。

这样，很多事情变得容易看/做 如果y = 0，你知道汽车在中心曲线上 要知道你是否可以超车，你必须做一些数学计算（overTaker.y + - overtaker.width / 2，overTaken.y + - overTaken.width / 2，roadWidth）。
实际上，使用此坐标系的常规BBox测试应该足以测试碰撞。