Side-view run-and-jump is what most beginners mean when they search “how to make a platformer game”: gravity that sticks, solid platforms that don’t leak, a jump that forgives near-misses, and a goal flag you can reach in under a minute. Full Metroidvanias with ability gates and map screens are a different sport — weeks of systems work before the first honest room feels good. A browser run loop is different. A coding agent scaffolds the tile collider, coyote timer, and camera follow from one prompt, and AI generation covers sprite sheets, terrain tiles, and jump audio. In a browser, that means WizardGenie for the physics loop, Quick Sprites for the runner sheet, Sorceress AI Image Gen for tiles and backdrop, SFX Gen for jump and land stings, and Music Gen for a run bed. This guide is the honest end-to-end for how to make a platformer game in 2026, in a browser, in a weekend.
What how to make a platformer game actually means in 2026
The query “how to make a platformer game” hides three intents. Some searchers want a full Metroidvania with ability unlocks, a world map, and backtracking — that is a multi-week project, not a weekend jam. A second intent is a one-button endless runner with procedural gaps — useful, but a narrower skill set (spawn timing, not free roam). The third intent, and the one this guide targets, is a single-player browser side-view platformer: a tilemap of solid platforms, a player with gravity and a jump, coyote time plus jump buffer, coin pickups, a camera that follows on wider levels, and a win screen when the goal flag is touched. That is a weekend build, it demos the whole Sorceress toolset, and it is the format most platformer tutorial and browser platformer searchers actually want.
The presentation contract is small and strict. A title screen shows the level name, Start Run, and optionally a “ghost trail” toggle that records your best path. The play screen shows the side view, the runner sprite, HUD for coins and deaths, Pause, and Restart. On win, freeze input, play a short flourish, show time and deaths, and offer Retry or Next Level. The platform game overview on Wikipedia still separates classic jump-and-run from endless runners and puzzle-platformers cleanly — cite it when you write your itch.io blurb so players know which promise you kept.
The platformer loop in one minute (input, integrate, collide, camera, win)
Five moving parts, repeated until the flag. First, input — read left/right hold and jump press; set a short jump-buffer timer on keydown. Second, integrate — add gravity to vy, clamp fall speed, apply horizontal acceleration and friction. Third, collide — move on X and resolve solid tiles, then move on Y and resolve; update onGround and coyote frames. Fourth, camera — lerp the view toward the player so wide levels stay readable. Fifth, win — when the player AABB overlaps the goal flag, stop the clock and show the completion card. That is the entire run loop. Double-jump, wall-slide, dash, and moving platforms are polish layered after one honest jump feels sticky.
Pick your engine for how to make a platformer game: canvas, Phaser, or WizardGenie
Three good browser targets in 2026, each with a different trade-off. Vanilla JavaScript on a 2D canvas is the honest default and the pick this guide recommends for a first build. Store the level as a 2D tile array, blit terrain from a tileset image, and draw the player sprite at world coordinates minus camera offset. Total code footprint for a working javascript platformer is under 700 lines including collision and coyote timers. No engine to install, ships as a static HTML file, deploys anywhere. The MDN Canvas API docs cover the drawing surface; pair it with requestAnimationFrame for the frame loop.
DOM rectangles with CSS transforms become the right pick if you want accessible focus targets and screen-reader labels on HUD buttons. You trade blit speed for semantics — fine for a short single-screen puzzle-platformer, heavier once you scroll a long world with many tiles.
Phaser 4.1.0 (verified 2026-08-20 on the official Phaser API documentation page) becomes the right pick if you want arcade physics colliders, tweens on coin pop, or Scene lifecycle for title-play-victory. Phaser’s arcade body API removes a weekend of hand-rolled AABB math — use it when motion polish is the product, not when the product is understanding gravity and tile resolution. A phaser platformer tutorial that skips the feel timers still feels wrong; the engine does not invent coyote time for you.
WizardGenie is not a separate rendering engine — it scaffolds whichever of the three 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, GPT-5.5, Gemini 3.1 Pro, DeepSeek V4 Pro, Kimi K2.5, Grok 4.2, and MiniMax M2.7 (verified 2026-08-20 in src/app/_home-v2/_data/tools.ts). For platformers, any frontier model scaffolds the physics and tile collider 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 player physics, gravity, and solid tiles
Nothing else in the pipeline matters if the player sinks through floors or snags on corners. Start with a tilemap and a player body:
const TILE = 32;
const GRAVITY = 0.55;
const MAX_FALL = 12;
const MOVE_ACCEL = 0.6;
const MOVE_MAX = 4.2;
const JUMP_FORCE = -9.2;
const COYOTE_MS = 100;
const BUFFER_MS = 100;
const map = [
[1,1,1,1,1,1,1,1,1,1,1,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,1,1,0,0,1],
[1,0,0,1,1,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1],
];
function makePlayer(x, y) {
return {
x, y, w: 20, h: 28,
vx: 0, vy: 0,
onGround: false,
coyoteMs: 0,
jumpBufferMs: 0,
};
}
function solidAt(tx, ty) {
const row = map[ty];
return !row || row[tx] === 1;
}
Game state is { map, player, cameraX, coins, goal, dead }. Resolve movement in two passes: apply vx, then push out of solid tiles on the X axis using the four corners of the AABB; then apply vy (after gravity), then resolve Y and set onGround when a downward collision sticks. Separate axes prevent the classic “corner teleport” bug that makes side scroller tutorial clones feel broken. Unit-test a standing floor (player rests with vy === 0), a head-bonk ceiling, and a one-tile gap the player must clear with a buffered jump. Those asserts are the difference between a jump and run game people trust and one they rage-quit after clipping into a wall.
Feel timers live on the player: when onGround flips false, start coyoteMs = COYOTE_MS and count down each frame; on jump keydown set jumpBufferMs = BUFFER_MS. Consume both when a jump actually fires (vy = JUMP_FORCE). Skip wall-jump and double-jump until single-jump landings feel sticky for ten clean runs in a row.
