DEV Community: Sorceress

How to Make an HTML5 Game (Browser Loop, 2026)

Sorceress — Sun, 23 Aug 2026 00:40:54 +0000

Originally published on the Sorceress blog.

TL;DR: an HTML5 game is four things — an index.html host page, a JS module that owns the loop, a folder of sprites and audio, and a static zip anyone can open in a tab.

What people actually mean

Three deliverables share one core:

A plugin-free canvas arcade — HTML/CSS/JS drawing to a <canvas>, shipped as a static folder.
A mobile HTML5 game — same bundle plus a viewport meta tag and a web app manifest.
An itch.io HTML export — a zip whose root contains index.html.

All three need a canvas, a requestAnimationFrame tick, relative asset paths, and zero installer.

The loop in one minute

Read input — drain a keys object that keydown/keyup listeners keep updated; mirror pointer events for mobile.
Update — advance each object by velocity x dt (seconds since last frame), apply gravity, resolve collisions.
Draw — ctx.clearRect(0, 0, W, H), then one ctx.drawImage per sprite.

Start audio on the first user gesture so autoplay policy stays happy. About thirty lines, zero dependencies.

The discipline that keeps it honest

Draw never mutates state; update never touches the DOM. Keep a plain state object, a keys map, and a ctx reference. Update reads keys and mutates state; draw reads state and paints.

One trap: size the canvas with its width/height attributes, not CSS alone, or the bitmap stretches and smears.

Why it is still the best first-game target

Distribution is a URL or a zip: no store review, no signing certificate. Canvas, Web Audio and localStorage are stable across browsers, and itch.io, GitHub Pages and Netlify serve static folders free.

Full guide: sorceress.games

How to Make a Snake Game in the Browser (Grid Loop, 2026)

Sorceress — Sun, 23 Aug 2026 00:36:20 +0000

Originally published on the Sorceress blog.

TL;DR: a fixed-tick grid, a growing body, food on empty cells, death on wall or self-collision. Under ~350 lines of vanilla JS.

Scope it first

"Snake" covers three builds: a Python turtle classroom demo, a multiplayer .io arena (weeks of backend), or a single-player browser snake — fixed grid, fixed tick, arrow/WASD turns, respawning food, growth on eat, death on wall or self. The last is the weekend build.

The grid loop in one minute

Input — read arrow/WASD presses into a one-slot nextDirection buffer; reject reverses.
Tick — every N ms, take direction from the buffer, compute the next head cell, advance.
Eat — if the next cell holds food, push a new head without dropping the tail, then respawn food on a random empty cell. Otherwise push head and shift tail.
Collide — if the next cell is out of bounds or in the body, stop and show Game Over.
Score — increment on eat; optionally shrink tickMs every few points so tension ramps.

Portals, wrap-around walls and power-ups are polish added after one apple feels fair.

Two details that bite beginners

One-slot direction buffer. Writing direction on keydown lets a fast double-tap reverse the snake into itself. Queue one turn per tick, validated against the current direction.
Food respawn. Pick from the set of empty cells, not a random cell retried until free — the retry loop degenerates as the board fills.

Picking an engine

Vanilla JS + canvas — the default. Fill rects per segment, fixed tick, paint with requestAnimationFrame.
DOM grid with CSS cells — accessible labels per tile; heavy at larger boards.
Phaser 4 — Scene lifecycle and tweens; you still write the tick and reverse-guard.

Full guide: sorceress.games

How to Make a Platformer Game in the Browser (Run Loop, 2026)

Sorceress — Sun, 23 Aug 2026 00:31:20 +0000

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