Matter.js Stacking Tower Game — Perfect Drops and Wind

Stacking games look simple: drop a block and don't let the tower fall. Underneath they depend on real physics, because floors that land off-centre tip and a tall stack sways. Matter.js handles that, and this snippet adds the game around it: a pendulum that swings each new floor, a Perfect-landing combo, wind that pushes falling floors sideways, lives, a score and best saved in localStorage, particles, and a camera that climbs from dusk into a starry sky. It is all plain JavaScript on one canvas.

A pendulum that is not a physics body

While it hangs, the next floor is only a position: an angle that follows a sine of phase, converted to x = centre + sin(theta) * length and y = pivot + cos(theta) * length, with the floor tilted against the swing. Keeping it out of the physics world means nothing can knock it. The phase is accumulated each step, so speeding the swing up as the tower grows never makes the floor jump, and the swing gets wider as well as faster.

Dropping honestly

On click, tap or Space the floor becomes a real rectangle at the same position and tilt and falls straight down. Carrying over the swing's sideways speed looks realistic but drifts the block far from the faint drop guide over a long fall, so timing is the skill. The fall speed is also capped (MAX_FALL, 6px per step): a long drop at full speed hits the stack hard enough to shake a tall tower apart. Floors also get narrower as the tower grows, down to 70px.

Perfect landings and combos

Once a floor is asleep, or slow after the first 30 steps, it counts as landed and judge() compares it with the floor beneath (or the base). Within 8px of centre and nearly level it is Perfect: the combo rises, the floor glows, gold sparks fire and the bonus is 25 times the combo on top of 10 points. Any other landing resets the combo and kicks up dust.

Wind

From the fifth floor, a gust target is picked every few seconds and the wind eases toward it. It is applied as a small Body.applyForce to floors that have not landed, so it only matters while a floor is falling; the drop guide leans with the gust and a meter in the corner shows the strength. Wind never touches landed floors, which keeps tall towers stable.

Stable stacking

Tall stacks are a stress test for a 2D engine, so the snippet raises positionIterations and velocityIterations, uses high static friction and zero restitution, and turns on enableSleeping so settled floors stop jittering. A floor that falls below the base platform or off its sides costs a life.

A camera that climbs

With hasBounds, the renderer draws only what is inside render.bounds, whose vertical position eases toward the tower top. Everything else is painted by hand in afterRender: floors with lit windows, the podium, height lines every 5 m, and the background last with destination-over, where the sky fades from dusk to deep space and the stars twinkle more with altitude.