Kinematics and Bounding-Box Navigation in Parking Fury: Steering Geometry in 2D Canvas

Introduction: Why Top-Down Parking is a Geometry Problem, Not a Racing Game

Most driving games focus on top-speed maintenance, apex clipping, and draft aerodynamics. Games like Parking Fury and Crazy Parking on dianyingsir deconstruct driving into something far more unforgiving: low-velocity rigid-body kinematics in confined geometric spaces.

In these titles, you are not racing an opponent. You are navigating an oriented bounding box (OBB) through tight corridors obstructed by static obstacles (curbs, light posts, other parked cars) into a painted rectangular slot with single-pixel tolerances.

Understanding why your rear bumper clips the wall or why reversing feels sluggish requires peeling back the simple 2D physics approximations powering browser-based driving engines.

1. The Kinematic Bicycle Model in HTML5 Canvas

In browser games rendered via 2D Canvas or lightweight physics engines (such as Matter.js or custom tick loops), vehicles are rarely simulated with full four-wheel suspension and tire friction curves. Instead, they utilize a simplified Kinematic Bicycle Model.

         Front Axle (Steered)
              [====]
                |
                |  Wheelbase (L)
                |
              [====]
          Rear Axle (Fixed Pivot)

In this model, the two front wheels are collapsed into a single steerable wheel at angle $\delta$, and the two rear wheels are collapsed into a fixed wheel aligned with the vehicle’s heading $\theta$.

The Governing Equations of Motion

At low parking speeds where tire slip is negligible ($\approx 0$), the vehicle moves along circular arcs centered on the Instantaneous Center of Rotation (ICR):

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

Where:

$(x, y)$ is the Cartesian coordinate of the rear axle center (not the center of the car!).
$v$ is the longitudinal linear velocity.
$\theta$ is the vehicle’s current heading orientation angle.
$L$ is the wheelbase distance between front and rear axles.
$\delta$ is the front steering angle.

Why This Matters to the Player: The Asymmetric Pivot

The single most critical takeaway from these equations is that the car pivots around its rear axle, not its geographic center.

When you turn your wheels while moving forward:

The front bumper sweeps a wide outward arc.
The rear wheels track a much tighter radius on the inside of the curve.
The rear overhang (the bodywork behind the rear wheels) swings outward in the opposite direction.

This geometric asymmetry explains why pulling into a tight parking stall forward almost always results in clipping the adjacent car with your inside rear wheel. Reversing into the stall, by contrast, gives you direct angular control over your heading while the steering axle remains on the open, unconstrained side of the maneuver.

2. Oriented Bounding Boxes (OBB) and the Separating Axis Theorem (SAT)

Collision detection in Parking Fury is binary: any touch with an obstacle results in an immediate audio crunch and an irreversible deduction from your 3-star score.

Under the hood, both your car and the parking bays are represented as Oriented Bounding Boxes (OBB). Unlike Axis-Aligned Bounding Boxes (AABB) which remain locked to screen coordinates $(x, y)$, an OBB rotates dynamically with the car’s heading $\theta$.

    AABB (Screen Aligned):         OBB (Rotated with Car):
          +--------+                     /\
          |        |                    /  \
          |  CAR   |                   /CAR \
          |        |                   \    /
          +--------+                    \  /
                                         \/

The game engine checks for collisions on every frame using the Separating Axis Theorem (SAT). SAT states that two convex 2D polygons do not intersect if there exists a 1D projection axis along which their projected shadows do not overlap.

The Corner Clip Phenomenon

Because testing occurs along the normal vectors of each bounding box face:

A car aligned squarely with a curb can approach within 2 pixels without triggering a collision.
A car rotated at a 45-degree angle will present sharp corner vertices to the obstacle. Even a micro-drift of 1 pixel will project an overlapping shadow, triggering an instant collision penalty.

Heuristic Takeaway: Whenever approaching tight gaps, straighten your wheels ($\delta = 0$) and align your heading parallel to the corridor walls before passing obstacles.

3. Reversing Kinematics: Managing the Inverted Steering Dilemma

The human brain struggles with reversing in top-down games because the mapping between screen coordinates, vehicle heading, and user key presses is inverted.

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

Pressing the RIGHT arrow key while reversing shifts your front bumper to the right, but swings the rear end of the car to the LEFT.

The Reversing Rule of Thumb

To reverse into a bay located to your right:

Pull forward past the stall until your rear bumper is aligned with the far post of the bay.
Turn your steering wheel fully toward the stall.
Apply reverse throttle in short, distinct pulses rather than holding the key down. Short pulses prevent angular velocity $\dot{\theta}$ from overshooting the target alignment.
The moment your car reaches an angle parallel to the stall lines, center your steering ($\delta = 0$) and reverse straight back.

4. Input Polling and Deceleration Curves

On desktop browsers running at 60Hz, input events are typically polled once per requestAnimationFrame tick ($\Delta t \approx 16.66\text{ms}$).

Browser parking engines implement a simulated rolling resistance (friction decay): $$v_{t+1} = v_t \cdot (1 - \mu \Delta t)$$

When you release the accelerator key, your car does not halt instantly; it coasts across a deceleration curve. In Parking Fury, coasting is your most powerful tool:

Never accelerate all the way to the stop line.
Release the gas key when your vehicle is approximately 1.5 car lengths away from the destination.
Allow the friction coefficient to bring the car to a natural halt inside the parking bounding zone.

5. Summary: The Precision Driver’s Mental Protocol

Mastering Parking Fury on dianyingsir requires treating your car as a kinematic pendulum:

Remember that the vehicle pivots around the rear axle; front overhang sweeps wide, rear axle cuts inside.
Reverse into tight spaces whenever possible to maximize angular maneuverability.
Straighten your heading parallel to obstacles before entering narrow channels to eliminate corner-vertex SAT collisions.
Tap directional keys in short cadence bursts to prevent angular overshoot.
Rely on friction coasting rather than abrupt braking to stop cleanly within the goal box.