Originally published on the Sorceress blog.
TL;DR: model a side-view run loop with gravity, solid tiles, and a jump buffer. Get one honest jump feeling sticky before adding double-jump, dash, or wall-slide.
Scope it first
"Make a platformer" hides three projects: a Metroidvania (ability gates, world map, weeks of systems work), a one-button endless runner, or a single-player side-view platformer with solid tiles, gravity, coyote time, pickups, a following camera and a goal flag. The third is the weekend build.
The run loop in one minute
- Input — read left/right hold and jump press; set a jump-buffer timer on keydown.
-
Integrate — add gravity to
vy, clamp fall speed, apply acceleration and friction. -
Collide — move on X and resolve solid tiles, then move on Y. Only the Y pass sets
onGround. - Camera — lerp the view toward the player so wide levels stay readable.
- Win — when the player AABB overlaps the goal flag, stop the clock.
Resolving both axes in one pass is the classic cause of leaking through corners and sticking to walls. Split it.
Two timers do most of the "feel"
- Coyote time — allow a jump a few frames after walking off a ledge.
- Jump buffer — if jump is pressed just before landing, fire it on touchdown.
No engine invents these for you. Phaser gives you colliders and tweens; you still write the timers.
Picking an engine
- Vanilla JS + canvas — the honest default. Level as a 2D tile array, blit from a tileset, draw at world coords minus camera offset. Under ~700 lines, ships as static HTML.
- DOM + CSS transforms — accessible focus targets, but trades blit speed for semantics.
- Phaser 4 — when motion polish is the product: arcade bodies, tweens, Scene lifecycle.
Full guide: sorceress.games
Top comments (0)