Crate How to Make a Physics Game (Browser Stack Loop 2026)

Most beginners who search “how to make a physics game” want crates that tip when you stack them wrong, a mouse drag that feels weighty, and a settle-or-collapse verdict — not a soft-body cloth thesis on day one. A full racing-sim solver with tire models and vehicle suspension is a specialist craft. A browser stack loop is different. A coding agent scaffolds gravity, rigid bodies, and mouse constraints from one prompt, and AI generation covers chunky props and impact audio. On desktop or web, that means WizardGenie for the spawn-drag-settle interpreter, Voxel Studio for crate and barrel props, and SFX Gen for thud and crash clips. This guide is the honest end-to-end for how to make a physics game in 2026, as a weekend build you can finish once.

What how to make a physics game actually means in 2026

The query “how to make a physics game” hides three intents. Some searchers want a Unreal Chaos or Unity PhysX asset pack with ragdoll templates and vehicle prefabs — that is engine shopping, not a minimal playable loop. A second intent is a platformer that happens to fall with gravity — that is a movement tutorial, and the sibling guide on how to make a platformer game already owns that loop. A third intent is pinball flippers and bumper impulse — covered in how to make a pinball game. The intent this guide targets is a browser stack loop: spawn a crate, drag it onto a tower, release, wait for sleep, then score a stable stack or reset on collapse. That is a weekend build, it demos the Sorceress toolset, and it is the format most physics game tutorial and javascript physics game searchers actually want.

The presentation contract is small and strict. A title screen shows the stage name, control hints (drag to place, release to drop, keep the tower above the red line), and Play. The play screen shows a floor, a preview crate following the cursor, score top-left, best height top-right, and optional mute toggle. When the settle window passes with every body asleep, award a point and spawn the next crate. When any body crosses the kill line, play a crash and show Retry. The physics engine overview on Wikipedia (verified 2026-08-28) defines real-time engines as approximate classical dynamics tuned for perceptually correct play — cite that page when you write your itch.io blurb so players know you shipped a browser physics game stack loop, not a cinematic soft-body reel.

The physics stack loop in one minute (spawn, drag, release, settle, score)

Five moving parts, repeated until the tower collapses. First, spawn — create a rigid rectangle (or rounded box) above the playfield with mass, friction, and restitution. Second, drag — attach a mouse constraint so the player can slide the crate horizontally without punching it through the tower. Third, release — drop the constraint and let gravity take over. Fourth, settle — measure max speed across bodies for a short window; sleep means stable. Fifth, score — award a point and raise the next spawn height, or detect kill-line collapse and reset. Joints, explosives, and destructible mesh are polish layered after one honest three-crate tower is readable at sixty frames per second.

Pick your engine for how to make a physics game: Matter.js, Phaser, or WizardGenie

Three good targets in 2026, each with a different trade-off. Matter.js is the honest default and the pick this guide recommends for a first build. The Matter.js 0.20.0 API docs (verified 2026-08-28) cover Engine, Bodies, MouseConstraint, and Events — enough for a working html5 physics game in under 200 lines including gravity, floor, drag, and sleep checks. Pair Matter’s renderer for prototypes, or draw bodies yourself on a canvas using the MDN Canvas API docs once you want custom crate sprites.

Sleep thresholds versus always-on simulation matter for jam scope: after each release, gate scoring on a settle window so a wobbling tower does not award points mid-tip. Checking body.speed and body.angularSpeed against a small epsilon (for example 0.05) for 1.2 seconds is the single habit that separates a fair stacking game browser build from a score that increments while crates are still sliding.

Phaser v4.2.1 “Giedi” (released 9 July 2026, verified 2026-08-28 on the official Phaser stable download page) becomes the right pick if you want Matter or Arcade Physics wired to Scene stacks, cameras that follow tower height, particle dust on impact, or a level select. Phaser does not invent your stability rule — you still need the same settle window and kill line. Use Phaser when Scene stacks and cameras are the product; use raw Matter.js when the product is a physics game tutorial people can read in one sitting. A phaser matter physics campaign is a fine v2 once the Matter prototype proves the stack feel.

WizardGenie is not a separate physics solver — it scaffolds whichever of the two you pick from a single natural-language prompt. WizardGenie ships as both a desktop app (Windows installer with auto-update, available to Early Access supporters and above) and a no-install web build. Its coding-model lineup covers Claude Opus 4.7, Claude Sonnet 4.6, GPT-5.5, Gemini 3.1 Pro, DeepSeek V4 Pro, Kimi K2.5, Grok 4.2, and MiniMax M2.7 (verified 2026-08-28 in src/app/_home-v2/_data/tools.ts). For physics loops, any frontier model scaffolds Engine setup, MouseConstraint, and settle timers in one prompt. Pair a frontier planner with a budget executor like DeepSeek V4 Pro or Kimi K2.5 for the typing pass — the Dual-agent pattern lands most projects at roughly one-fifth the single-frontier cost.

Step 1 — model gravity, rigid crates, and mouse drag

Nothing else in the pipeline matters if crates tunnel through the floor or the mouse flings them at orbital speed. Start with a small, testable Matter.js model:

const { Engine, Render, Runner, Bodies, Composite, Mouse, MouseConstraint, Events } = Matter;

const W = 480, H = 640;
const engine = Engine.create();
engine.gravity.y = 1.1;

const floor = Bodies.rectangle(W / 2, H - 20, W - 40, 40, { isStatic: true, friction: 0.9 });
const wallL = Bodies.rectangle(10, H / 2, 20, H, { isStatic: true });
const wallR = Bodies.rectangle(W - 10, H / 2, 20, H, { isStatic: true });
Composite.add(engine.world, [floor, wallL, wallR]);

const crates = [];
let active = null;
let score = 0;
let settling = false;
let settleT = 0;

function spawnCrate() {
  const crate = Bodies.rectangle(W / 2, 60, 64, 48, {
    density: 0.002,
    friction: 0.8,
    restitution: 0.05,
    label: "crate",
  });
  Composite.add(engine.world, crate);
  crates.push(crate);
  active = crate;
  settling = false;
}

function allSleeping(eps = 0.05) {
  return crates.every((b) => b.speed < eps && b.angularSpeed < eps);
}

function anyFallen() {
  return crates.some((b) => b.position.y > H + 40);
}

Events.on(engine, "afterUpdate", () => {
  if (!settling) return;
  settleT += engine.timing.lastDelta / 1000;
  if (anyFallen()) {
    settling = false;
    // show collapse UI, reset world
    return;
  }
  if (settleT >= 1.2 && allSleeping()) {
    settling = false;
    score += 1;
    spawnCrate();
  }
});

function onRelease() {
  if (!active) return;
  active = null;
  settling = true;
  settleT = 0;
}

spawnCrate();
Runner.run(Runner.create(), engine);

Wire MouseConstraint with a stiff constraint and a low max force so drag feels precise instead of slingshot. Unit-test three cases before you generate art: a centered three-crate tower settles inside 1.2 seconds; an overhanging top crate tips past the kill line; and releasing with zero mouse velocity does not spawn a duplicate body. Those three tests catch ninety percent of javascript physics game bugs. Keep restitution near 0.05 so stacks do not bounce into chaos.

Step 2 — wire stack stability and HUD in WizardGenie

With body helpers drafted, open WizardGenie. Drop in a bare index.html shell that loads Matter.js from a CDN, a 480×640 canvas, and placeholder HUD labels for score and best height. Give the agent one paragraph: Build a browser physics stacking game with Matter.js. Gravity 1.1. Static floor and side walls. Spawn 64×48 crates with high friction and low restitution. MouseConstraint for drag. On mouseup, start a 1.2s settle window; if all crates sleep, score +1 and spawn the next crate higher. If any crate falls below the canvas, show COLLAPSE and a Retry button that resets the world. Autosave best score to localStorage. Show score and tower height in the HUD. Feed that to any coding model in the lineup and the interpreter scaffolds in under five minutes.

The remaining hour is polish via follow-up prompts. Add a ghost preview — translucent outline under the cursor before spawn — eight lines. Add a height meter — track max crate top Y each settle — ten lines. Add a wind gust — optional button that applies a small lateral force for chaos mode — twelve lines. Add a results screen — crates placed, max height, retry — ten lines. Each item is a follow-up prompt, and the whole browser physics game comes together over a Saturday afternoon.

Optional siblings: if your jam needs falling-block grids instead of free rigid stacking, borrow the grid loop from how to make Tetris — same weekend scope, different solver. For paddle-and-ball impulse without stacking, the related post on how to make a breakout game covers bounce rules. For free-build placement without gravity toys, see how to make a sandbox game.

Step 3 — Voxel Studio crates, SFX Gen impacts

Flat colored rectangles read as a tech demo even when the solver is perfect. Three asset passes cover the whole rigid body game experience:

• Crate props — two chunky wooden crates from Voxel Studio. Generate a reference still (or upload a photo), then run Hunyuan 3.1 image→voxel. Prompt the reference for “wooden shipping crate, metal corners, voxel friendly, orthographic, game prop”. Hunyuan 3.1 costs 25 credits per generation (VOXEL_HUNYUAN_CREDITS in src/lib/voxelgen-hunyuan.ts). Snapshot an orthographic view and use it as the Matter body sprite so mass reads in silhouette.
• Alternate barrel — optional second Voxel Studio pass for a taller barrel body (another 25 credits) so later levels mix shapes.
• Stage backdrop — one warehouse floor from AI Image Gen. Prompt for “empty warehouse floor against a dark wall, soft overhead light, 480x640, game backdrop, no characters”. Nano Banana Pro costs 18 credits per generation per src/lib/models.ts.

Open SFX Gen, describe each clip in plain language (“short wood thud on place”, “soft creak when stack settles”, “crate crash collapse”, “bright win chime”), and export WAV into your assets/audio/ folder. Billing is 1 credit per second of generated audio per src/app/sfx-gen/page.tsx — four short clips land around 5 credits total. Mute by default with a toggle — mobile browsers often block autoplay until the first click anyway.

Step 4 — playtest the browser stack loop like a jam judge

Before you share the build, run a five-minute checklist borrowed from game-jam judging:

1. Drag feels precise — mouse constraint does not slingshot crates; release velocity stays near zero when the cursor is still.
2. Settle is fair — a centered three-crate tower awards a point; a deliberate overhang collapses without false positives.
3. Sleep gate works — score never increments while bodies are still sliding.
4. Kill line is honest — crates past the floor trigger COLLAPSE once; Retry clears the world without leftover constraints.
5. Best score persists — refresh the page; best score restores from localStorage.

Log issues as WizardGenie follow-ups, not rewrites. “Raise friction to 0.9 and cut restitution to 0.02” is one prompt. “Spawn the next crate 40 pixels above the current tower top” is another. The Sorceress tools guide lists every asset tool if you want to swap Voxel Studio for Quick Sprites on a flatter 2D art pass.

What how to make a physics game costs on Sorceress in 2026

A honest budget for the stack above against the 2026 Sorceress rate card (verified 2026-08-28 against local source):

• Two Voxel Studio Hunyuan crate props: 50 credits (0.50 USD)
• One AI Image Gen warehouse backdrop: 18 credits (0.18 USD)
• Four SFX Gen clips (~5 seconds total): ~5 credits (0.05 USD)
• Coding-model API time for WizardGenie scaffolding: under 0.40 USD with a planner plus budget executor pair

Total art and audio: roughly 73 credits or 0.73 USD. The free 100-credit signup grant (src/app/api/admin/credits/route.ts) covers the full stack outright. Lifetime access remains 49 USD (LIFETIME_PRICE in src/app/plans/page.tsx) if you want ongoing credit packs later. If you already built a pinball game or breakout game in the same jam week, reuse the SFX Gen impact thud — collision audio generalizes well across rigid body toys.