Matter.js Slingshot Game — Levels, Critters and Aim Preview

Pull back, let go, watch a tower collapse: slingshot games are the classic physics-engine showcase. This version turns the mechanics into a small game with three levels, a limited number of stones, green critters to pop, blocks of wood, stone and glass, a dotted aim preview that matches the shot exactly, star ratings and particle effects, all on one canvas with plain JavaScript and Matter.js.

An aim preview that is actually accurate

Instead of letting a spring fling the stone and guessing where it goes, the launch is computed. While you drag, the stone is held at your pointer up to 130px from the anchor. On release, Body.setVelocity gives it a speed of pull distance times a constant (POWER). Because that speed is known, the preview can replay the engine's own per-step maths: multiply by the air friction (1 minus 0.004), add gravity (0.2778 per step), move, and draw a dot every fourth step until the path meets the ground. The dots land where the stone will.

Release detection with enddrag

MouseConstraint fires an enddrag event when you let go. If the dragged body is the stone, the state is "play" and the pull is at least 28px, the spring is detached, the velocity is set and one stone is spent. A smaller pull just lets the spring return it. A new stone is loaded 900ms later with a short grow-in, and startdrag rejects every body that is not the loaded stone.

Three materials

Wood, stone and glass differ in density and fragility. Stone is four times heavier than glass, so it barely moves when hit. Glass shatters when it collides above a speed threshold (lower for another body, higher for the ground), spraying blue shards and giving 50 points, which makes glass floors a way to bring a structure down.

Critters that pop on impact

Each green critter is a circle that pops when something hits it hard enough: the relative speed from collisionStart must exceed 3.6 for a moving body or 7.5 for the ground, so a gentle landing is safe but a falling block is not. A pop gives 500 points, a burst of confetti and a short screen shake. The faces blink, and are drawn along with every other body by hand in afterRender.

Levels, stones and stars

Each level is a function that returns bodies placed relative to the platform: a pillar frame, a two-tower fort with glass and stone floors, and a stepped pyramid built with Composites.pyramid. A level is won when no critters remain and lost when the stones run out and the scene settles. Finishing with two or more stones left earns three stars, and every unused stone is worth 300 bonus points.

Housekeeping

Spent stones are removed once they leave the scene or have lain around for nine seconds, particles and floating text are capped, and the background, clouds and hills are painted last with destination-over.