Parking Fury 的运动学与包围盒导航:2D Canvas 中的转向几何

从架构层面考察俯视车辆物理、阿克曼转向近似与浏览器停车游戏中的碰撞检测容差。

在线试玩: Parking Fury免安装即开即玩

引言:为什么俯视停车是几何问题,而不是竞速游戏

大多数驾驶游戏聚焦于极速维持、切弯顶点与尾流空气动力学。像 dianyingsir 上的 Parking Fury 和 Crazy Parking 这样的游戏,则把驾驶解构成一个更加严苛的东西:在受限几何空间中的低速刚体运动学。

在这些作品中,你不是在和对手竞速。你要操控一个有向包围盒(OBB),穿过被静态障碍物(路缘、灯柱、其他停放车辆)阻塞的狭窄走廊,以像素级容差开进一个绘制好的矩形车位。

要理解为什么你的后保险杠会蹭墙,或者为什么倒车感觉迟钝,就需要揭开驱动浏览器驾驶引擎的那些简单 2D 物理近似。


1. HTML5 Canvas 中的运动学自行车模型

在由 2D Canvas 或轻量物理引擎(如 Matter.js 或自定义 tick 循环)渲染的浏览器游戏中,车辆几乎从不用完整四轮悬挂与轮胎摩擦曲线来模拟。取而代之,它们使用一个简化的运动学自行车模型。

         前轴(转向)
              [====]
                |
                |  轴距(L)
                |
              [====]
          后轴(固定枢转点)

在该模型中,两个前轮被坍缩成一个转向角为 $\delta$ 的单一可转向轮,两个后轮被坍缩成一个与车辆航向 $\theta$ 对齐的固定轮。

运动主方程

在轮胎打滑可忽略($\approx 0$)的低速停车场景中,车辆沿以瞬时旋转中心(ICR)为圆心的圆弧运动:

$$\dot{x} = v \cos(\theta)$$ $$\dot{y} = v \sin(\theta)$$ $$\dot{\theta} = \frac{v}{L} \tan(\delta)$$

其中:

  • $(x, y)$ 是后轴中心的笛卡尔坐标(不是车子的几何中心!)。
  • $v$ 是纵向线速度。
  • $\theta$ 是车辆当前的航向角。
  • $L$ 是前后轴之间的轴距。
  • $\delta$ 是前轮转向角。

这对玩家意味着什么:非对称枢转

这些方程中最关键的一点是,车辆绕后轴枢转,而不是绕几何中心。

当你前进时转动车轮:

  • 前保险杠扫出宽阔的外侧弧线。
  • 后轮沿曲线内侧以更小的半径行进。
  • 后悬(后轮后方的车身)朝相反方向向外甩出。

这种几何不对称解释了为什么正面开进狭窄车位几乎总是会用内侧后轮蹭到旁边的车。相比之下,倒车入库让你在转向轴位于机动开放无约束一侧的同时,对航向拥有直接的角控制。


2. 有向包围盒(OBB)与分离轴定理(SAT)

Parking Fury 中的碰撞检测是二元的:与任何障碍物接触都会立刻产生一声听觉撞击,并从你的 3 星评分中扣除不可逆转的一分。

在底层,你的车与车位都被表示为有向包围盒(OBB)。与锁定在屏幕坐标 $(x, y)$ 上的轴向包围盒(AABB)不同,OBB 会随车辆航向 $\theta$ 动态旋转。

    AABB(屏幕对齐):         OBB(随车辆旋转):
          +--------+                     /\
          |        |                    /  \
          |  CAR   |                   /CAR \
          |        |                   \    /
          +--------+                    \  /
                                         \/

游戏引擎在每一帧都使用**分离轴定理(SAT)**检查碰撞。SAT 指出:如果存在某个一维投影轴,使得两个凸 2D 多边形在该轴上的投影阴影互不重叠,那么这两个多边形不相交。

角落擦碰现象

因为检测是沿每个包围盒面的法向量进行的:

  • 一辆与路缘完全对齐的车,可以逼近到 2 像素而不触发碰撞。
  • 一辆旋转了 45 度的车,会向障碍物露出尖锐的角顶点。即使是 1 像素的微小漂移,也会投影出重叠阴影,瞬间触发碰撞惩罚。

启发式要点: 每当通过狭窄间隙时,先回正车轮($\delta = 0$),并把航向与走廊墙壁对齐,再通过障碍物。


3. 倒车运动学:应对反向转向困境

人脑在俯视游戏中倒车时会挣扎,因为屏幕坐标、车辆航向与用户按键之间的映射是反向的。

倒车时: $$v < 0 \implies \dot{\theta} = -\frac{|v|}{L} \tan(\delta)$$

倒车时按右方向键,会让你的前保险杠向右移动,但会把车尾甩向左侧。

倒车经验法则

要倒进你右侧的车位:

  1. 向前驶过车位,直到你的后保险杠与车位远端立柱对齐。
  2. 把方向盘朝车位方向打满。
  3. 用短促、清晰的脉冲施加倒车油门,而不是一直按住按键。短脉冲可以防止角速度 $\dot{\theta}$ 过冲目标对准。
  4. 当你的车达到与车位线平行的角度时,回正方向盘($\delta = 0$),径直向后倒。

4. 输入轮询与减速曲线

在 60Hz 运行的桌面浏览器中,输入事件通常每个 requestAnimationFrame 节拍($\Delta t \approx 16.66\text{ms}$)轮询一次。

浏览器停车引擎会实现一个模拟滚动阻力(摩擦衰减): $$v_{t+1} = v_t \cdot (1 - \mu \Delta t)$$

当你松开油门键时,你的车不会瞬间停下;它会沿一条减速曲线滑行。在 Parking Fury 中,滑行是你最强大的工具:

  • 永远不要一路加速到停止线。
  • 在距离目的地大约 1.5 个车长时松开油门键。
  • 让摩擦系数把车自然减速停在停车包围区内。

5. 总结:精准驾驶者的心智协议

掌握 dianyingsir 上的 Parking Fury,要求你把车当作一个运动学摆锤:

  • 记住车辆绕后轴枢转;前悬扫出宽阔弧线,后轴向内切弯。
  • 只要可能就倒车进入狭窄空间,最大化角机动性。
  • 进入狭窄通道前,把航向与障碍物对齐,消除角落顶点的 SAT 碰撞。
  • 用短促的节奏轻点方向键,防止角速度过冲。
  • 依靠摩擦滑行而不是急刹车,在目标框内干净停车。
dianyingsir 独立游戏研究实验室网页游戏机制与认知体验分析专员

dianyingsir 独立游戏研究实验室发表的所有文章均经过 WebGL、Canvas 2D 与 HTML5 游戏包的严格真机测试。我们实测碰撞判定、状态转移空间并在桌面与移动浏览器上对输入延迟进行基准测试,确保带来真实可信、免作弊的通关启发与机制洞察。

发布于 2026年8月30日•8 分钟阅读