Matter.js Hill Climb Car Game — Boost, Coins and Flips

Hill Climb Racing's charm is pure physics: a floppy little car, bumpy hills and a driver whose head must never touch the ground. This snippet rebuilds that loop with Matter.js and turns it into a complete game with a start screen, a 500 m summit to reach, coins, a nitro boost, flip bonuses, dust and flame particles, screen shake, a parallax landscape and optional engine sound. Everything is plain JavaScript on one canvas.

The car: three bodies and some springs

The chassis is a chamfered rectangle; each wheel is a circle joined to it by two constraints, a soft short spring from above (the suspension) and a diagonal one that stops the wheel sliding along the body. A small head body sits on a stiff neck. All parts share a negative collision group from Body.nextGroup(true), so wheels never collide with their own chassis. The car is drawn by hand each frame from the bodies' positions and angles.

Driving by spinning wheels, and boost

The engine never pushes the car. While a pedal is held, the wheels' angular velocity is eased toward a maximum with Body.setAngularVelocity, and wheel friction turns that spin into motion. Boost raises the target spin by 70% and adds a forward force along the chassis. It drains its own meter in about three seconds and refills slowly; collecting a coin gives a little back. Flame particles stream from the exhaust while it burns.

Air control and flip bonuses

When neither wheel touches the terrain (Query.collides), the pedals tilt the chassis instead of driving. While airborne, the game adds up the chassis rotation each step; if you land upright after turning roughly a full revolution, you earn 100 points per flip with a "Front flip" or "Back flip" popup. Landing upside down just counts as a crash.

Coins, fuel and the finish

Coin arcs follow the hills, and the middle of each arc floats high enough to reward a jump. Coins are plain objects checked by distance, so there are no extra physics bodies; the fuel cans are static sensors. Fuel drains while a pedal is held, a can refills it, and the run ends when your head hits the ground, you are upside down for 1.5 seconds, you stop with an empty tank, or you pass 500 m and reach the checkered flag. The score is distance plus 10 per coin plus flip bonuses, and your best is saved in localStorage.

Terrain without poly-decomp

Hills are summed sine waves whose amplitude grows with distance. Instead of one huge concave body, the ground is 520 thin static rectangles, each rotated to the slope between two sample points. The visible ground is drawn separately as a filled path with a dark lip and a grass stroke.

Camera, parallax and feel

With hasBounds: true, the renderer only draws what is inside render.bounds. Each frame the bounds ease toward the car, leading slightly in the direction of travel, and crashes add a decaying shake. The sun, clouds and two hill layers are painted last with destination-over at different scroll speeds, so they sit behind the world and give depth.

Sound and controls

Sound is off until you press the button, which is also what lets browsers start audio. An oscillator through a low-pass filter follows the car's speed and throttle, and short beeps mark coins, fuel, flips and crashes. Keyboard, on-screen touch pedals and a restart key are all supported.