Serve How to Make a Browser Game (Phaser Path 2026)

Browser games have shipped continuously since Earth 2025 opened in 1995 (per en.wikipedia.org/wiki/Browser_game verified 2026-08-16), and every question of the form “how to make a browser game” still comes back to the same four moving parts thirty-one years later: a static index.html that boots a canvas, a game loop that runs once per animation frame, an asset pack that fills the canvas with something worth watching, and a static host that serves the whole bundle at a URL a player can share. The 2026 stack has not changed those primitives, but everything above them — the sprite atlas, the loop-ready music, the punchy SFX, and the code that wires the loop — is now a one-prompt problem instead of a one-month problem. That means WizardGenie to scaffold the Phaser 4 game loop or the vanilla-canvas one, AI Image Gen for the hero sprite and background, Music Gen for the loopable soundtrack, and SFX Gen for the jump, coin, and hit stingers that separate a coding demo from a game. This guide is the honest end-to-end for how to make a browser game that ships in a browser tab in a weekend in 2026, under two dollars in Sorceress credits.

What “how to make a browser game” actually means in 2026

The query “how to make a browser game” hides three related but different intents. Some searchers want a browser-native arcade game — a self-contained HTML5 build that runs entirely client-side, hosted at a public URL, playable by clicking a link. That is the shape most first browser games take, and it is the shape this guide targets. Some searchers want a browser MMO or .io game — the same client-side canvas plus a websocket server that syncs many players in real time (Agar.io in April 2015 kicked off the .io wave per the same Wikipedia entry). And some searchers want a hybrid PWA game — a browser game that also installs on mobile home screens via a Web App Manifest. The core is identical across all three: <canvas> + requestAnimationFrame + input listeners + a static host. Get that base right and the .io server layer or the PWA install prompt are additive.

Four things make how to make a browser game still the best home for a first game in 2026. First, distribution is a URL: a player clicks a link, the game loads, they play. No App Store review, no signing certificate, no installer, no update prompt. Second, the tooling is free and mature: HTML5 shipped in 2008 (with the canvas element), WebGL landed in 2011, and WebGPU landed in 2021, and each layer is now stable and Baseline-widely-available. Third, the hosts are free: itch.io hosts HTML5 games for free with a browser embed player, and GitHub Pages and Netlify both host any static folder for free. Fourth, assets are now generative: sprites, music loops, and SFX stingers used to take three weeks of art-and-audio hire; on Sorceress they take under two hours and under two dollars.

The browser game loop in one minute

Every browser game is the same three-line skeleton on top of the browser''s requestAnimationFrame API (Baseline widely available since July 2015, verified 2026-08-16 on MDN). Read input — drain the keys object that keydown/keyup listeners have been populating since page load. Update — advance every game object by its velocity times dt (the seconds elapsed since the previous frame), apply gravity, and resolve collisions. Draw — clear the canvas with ctx.clearRect(0, 0, W, H) and call ctx.drawImage once per sprite. That is the whole loop, and in modern JavaScript it fits in about thirty lines with zero dependencies.

The critical discipline is the same one that keeps a text-based game honest: the draw function never mutates state and the update function never touches the DOM. Concretely: keep a state record as a plain JS object (hero position and velocity, an array of enemies, an array of collectibles, the score, the number of lives), the keys object populated by input listeners, and a small ctx reference to the canvas 2D context. The update function reads keys, mutates state. The draw function reads state, calls drawImage. Everything else — the audio playback, the pause menu, the score persistence via the browser''s localStorage API verified 2026-08-16 — is layered on top of those three pieces.

Pick your engine for how to make a browser game: vanilla JS, Phaser 4, or WizardGenie

Three good targets in 2026, each with a very different trade-off. Vanilla HTML plus a single JavaScript file on a plain <canvas> is the right pick when the game is small: a single scene, a single mechanic, under 500 lines of gameplay code. You get zero build step, zero framework to learn, a bundle under 20 KB before art, and a debugger session that reads exactly like the source. This is the honest default for a game jam entry, a mechanic prototype, or a js13kGames submission where the whole build must fit in 13 kilobytes. Everything the game needs is in the browser standard: the Canvas API verified 2026-08-16, the input event listeners, the Audio constructor.

Phaser 4.2.1 “Giedi” (released 9 July 2026, verified against phaser.io/download/stable on 2026-08-16) is the right pick when the game grows past a single scene. Phaser gives you a scene manager (title screen, gameplay, game over), an asset loader with a progress bar, a physics engine (Arcade physics for platformers, Matter for rigid-body sim), a sprite class with animation frames, a keyboard/gamepad input abstraction, a tween system, and an audio manager — all in one library. Include Phaser from jsDelivr with a single script tag pointing to https://cdn.jsdelivr.net/npm/phaser@4.2.1/dist/phaser.min.js and you skip the entire bundler setup. Phaser''s game config is exactly one object: { type: Phaser.AUTO, width: 960, height: 540, physics: { default: ''arcade'', arcade: { gravity: { y: 900 } } }, scene: { preload, create, update } }, and new Phaser.Game(config) boots the loop.

WizardGenie is not a separate engine — it scaffolds whichever of the two above you pick from a single natural-language prompt. WizardGenie is the Sorceress game-native coding agent, and it ships as both a Windows desktop app (installer with auto-update, available to Early Access supporters and above) and a no-install web build at the same URL. Its coding-model lineup (verified 2026-08-16 in src/app/_home-v2/_data/tools.ts lines 767 through 774) 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. For a first browser game, any model in the lineup writes the whole skeleton in under two minutes. If you want to run cheap on a long build session, pair a frontier planner (Claude Opus 4.7 or GPT-5.5) with a budget executor (DeepSeek V4 Pro or Kimi K2.5) — the planner designs the scenes and the mechanic, the executor types the code and wires the sprite atlas. That pairing runs at roughly one-fifth the cost of a single-frontier session.

Step 1 — scaffold the index.html, main.js, and asset atlas

Every browser game starts with the same four-file layout. Open a fresh directory and create index.html, main.js, style.css, and an assets/ folder. The HTML file is the entry point — it declares the canvas, sets the character encoding, and loads the game script. A minimal working host page is fifteen lines: a doctype, an html root, a head with a meta charset=utf-8 tag and a title, and a body with a single <canvas id="game" width="960" height="540"></canvas> followed by the game script tag. If you''re picking Phaser, add a second <script src="https://cdn.jsdelivr.net/npm/phaser@4.2.1/dist/phaser.min.js"></script> before your main.js tag — Phaser boots off window.Phaser once that CDN URL resolves.

The style.css file is optional but nice-to-have. Two rules cover the common case: body { margin: 0; background: #111; display: flex; align-items: center; justify-content: center; min-height: 100vh; } to center the canvas on a dark page, and canvas { image-rendering: pixelated; } when the game is pixel art (otherwise browsers bilinearly filter the sprites and the pixels smear). If the game is HTML-DOM-driven instead of canvas-driven (a puzzle grid, a card game, a text-based game), skip the canvas rule and style your grid with flexbox or CSS grid.

The assets/ folder is where the sprite PNGs, the music OGG or WAV files, and the SFX files live. Keep the file names lowercase-kebab-case (hero-run.png, coin-pickup.wav, loop-track.ogg) so file loading is case-safe across the various static hosts. This is also the folder you''ll drop the Sorceress-generated assets into in Step 3.

Step 2 — wire the tick loop, input, and state save with WizardGenie

Open WizardGenie. If you picked vanilla canvas, give the agent one paragraph: “Wire the browser game skeleton for a 960x540 canvas. Build it as one ES module: (1) a boot function that grabs document.getElementById(''game'').getContext(''2d''), adds keydown/keyup listeners that flip a keys[e.code] = true/false map, initializes state as { hero: { x: 100, y: 300, vx: 0, vy: 0, onGround: false }, coins: [ ...20 random positions ], enemies: [ ...5 random positions ], score: 0, lives: 3 }, and starts the animation loop; (2) an update(dt) function that reads keys, applies gravity to hero.vy (900 px/s/s), applies velocity times dt to hero.x and hero.y, resolves ground collision at y = 500, and resolves coin/enemy collisions with a simple AABB test; (3) a draw function that calls ctx.clearRect(0, 0, 960, 540), then ctx.drawImage for the background, each coin, each enemy, and the hero, plus an HUD with score and lives; (4) a rAF tick that computes dt from the previous timestamp, calls update then draw, and re-schedules itself.”

If you picked Phaser, the prompt changes but the structure does not: “Wire a Phaser 4 game with a preload() that loads hero.png as a spritesheet (32x32 frames), coin.png, enemy.png, and background.png. create() adds a static background, an Arcade-physics hero sprite with drag and world bounds, a static ground rectangle, a group of coins, a group of enemies, keyboard cursor keys, and an animation for the hero walk cycle. update() reads cursors and sets hero.setVelocityX / setVelocityY on input, checks hero.body.blocked.down for jump, and calls physics.overlap(hero, coins, onCoin) and physics.overlap(hero, enemies, onEnemy). Add a scoreText that updates on coin pickup and a livesText that decrements on enemy overlap.” Any coding model in the lineup writes the whole file in under three minutes.

The tick loop is where the game lives, and its six lines in the vanilla case do almost all of the work: let last = 0; function tick(now) { const dt = (now - last) / 1000; last = now; update(dt); draw(); requestAnimationFrame(tick); } requestAnimationFrame(tick);. In the Phaser case the tick is invisible — Phaser owns the rAF loop and you just fill in preload, create, and update as scene lifecycle methods. Both patterns land at the same 60 frames-per-second target on a 60Hz screen and stay smooth on a 144Hz monitor because dt normalizes the frame duration.

Step 3 — AI Image Gen sprites, Music Gen loop, SFX Gen stingers

A canvas full of colored rectangles boots the loop, but a browser game with a hero sprite, a music loop, and a handful of SFX stingers on jumps and pickups feels like an entirely different medium. Sorceress covers all three in under an hour of hands-on time.

Sprites first. Open Sorceress AI Image Gen for the hero, enemies, coins, and background, or open Quick Sprites for a batched sprite atlas. Quick Sprites bills 9 credits per generation (verified 2026-08-16 in src/app/quick-sprites/page.tsx line 21 as CREDITS_PER_GEN = 9), so 4 sprite generations for a hero walk cycle, coin, enemy, and background is 36 credits (about $0.36 at the standard 100-credits-per-dollar rate documented in src/lib/models.ts line 69 as CREDITS_PER_DOLLAR = 100). Download each PNG into the assets/ folder and reference it from Phaser''s preload() or from a vanilla const img = new Image(); img.src = ''assets/hero.png'';. Two habits that pay off enormously: keep the sprite atlas to a single power-of-two-sized PNG per character (32x32 or 64x64 frames) so GPU sampling stays fast, and use a transparent PNG so the browser''s canvas compositor handles the alpha for you.

Music second. Open Music Gen. A browser game rewards one calm loop track for gameplay and optionally a tension bed for combat or boss scenes. Music Gen bills 10 credits per generation (verified 2026-08-16 in src/app/music-gen/page.tsx line 28 as MUSIC_CREDIT_COST = 10). One track with two tries is 20 credits (about $0.20). Add 2 credits per WAV export (WAV_CREDIT_COST = 2, same file line 31) if you want lossless. Play the track with a single Audio object per the MDN HTMLAudioElement reference verified 2026-08-16, set audio.loop = true, and start it on the first user click so browser autoplay policy stays happy.

SFX third. A browser game feels alive when small stingers punctuate every meaningful action: a bright chime on coin pickup, a soft thud on hero jump, a heavier crunch on enemy hit, a warm swell on level end, a muted click on menu selection. Open SFX Gen. SFX Gen bills 1 credit per second on the seed-audio tier (verified 2026-08-16 in src/app/sfx-gen/page.tsx line 23 as SEED_AUDIO_CREDITS_PER_SECOND = 1). A full browser-game SFX kit is roughly 5 short stingers times 2 seconds each, so 10 credits (about $0.10). Trigger each stinger from the update function on the event that owns it (a new Audio(''assets/jump.wav'').play() on the jump input, a coin chime on physics.overlap(hero, coins), and so on).

What a how to make a browser game project costs on Sorceress in 2026

Concrete asset and generation budget for a first browser game with a 4-sprite atlas, one music loop, a 5-stinger SFX kit, and working canvas or Phaser loop, from empty repo to zip-and-share playable, all numbers verified 2026-08-16 against local Sorceress source:

• Sprites (Quick Sprites): 9 credits per generation, 4 generations (hero walk cycle, coin, enemy, background) = 36 credits ($0.36 USD).
• Music (Music Gen): 10 credits per generation, 1 track with 2 tries = 20 credits ($0.20 USD). Add 2 credits per WAV export.
• SFX (SFX Gen, seed-audio tier): 1 credit per second, 5 stingers at 2 seconds each = 10 credits ($0.10 USD).
• WizardGenie coding time: effectively free on the Sorceress side (bring your own model API key, or use one of the built-in trial-key options for the smaller models). Model-side API cost for a 1-to-2-hour prompt session on a cheap Executor like DeepSeek V4 Pro is typically under $0.60.
• Hosting: $0 on itch.io, GitHub Pages, or Netlify for a static browser-game bundle. All three platforms host HTML5 builds for free and serve them from a global CDN.
• Total for one complete how to make a browser game build (4-sprite atlas, 1 music loop, 5 SFX stingers, working Phaser or canvas loop, deployed to a free static host): 66 credits, or roughly $0.66 USD in Sorceress credits, plus under $0.60 in model API time. Under $2 end-to-end for a first playable browser game.

New Sorceress accounts start with 100 free credits (SIGNUP_GRANT = 100 in src/app/api/admin/credits/route.ts line 12), which is enough for the whole sprite pack, the music loop, the SFX kit, and 34 credits of headroom for a second sprite iteration. The Sorceress Lifetime tier at $49 one-time (LIFETIME_PRICE = 49 in src/app/plans/page.tsx line 51) covers unlimited Quick Sprites, Music Gen, and SFX Gen use, which matters if the browser game is the first entry in a series or a monthly jam pipeline.

For related browser-first pipelines that share the canvas-and-loop spine, the closest reads are Code How to Make a Game in JavaScript (Browser Loop 2026) for the pure-vanilla counterpart, Wire a Browser Game Engine (Phaser AI Loop 2026) for the deeper Phaser-specific engine architecture, and Host How to Make a Web Game (Browser AI 2026) for the sibling web-game angle with more hosting detail. The Sorceress Tools Guide is the master index for every tool the guide referenced. Under two dollars in credits, one weekend of writing code and generating assets, and how to make a browser game is a done deal on Sorceress in 2026.