Making Web Games (Phaser)

Quest Toolkit · Guide 3

Phaser is a JavaScript game framework for 2D browser games — sprites, physics, and input without building an engine from scratch.

When to use Phaser

• You want a real game loop in the browser (arcade, platformer, puzzle).
• You need sprite sheets, tilemaps, and simple physics.
• You're fine with JavaScript or TypeScript.

Setup (minimal)

1. Create a folder with index.html and game.js.
2. Include Phaser from a CDN or npm.
3. Make a config object with type, width, height, and scene functions.
4. Run locally with any static server (npx serve, VS Code Live Server).

Quest-sized scope

One scene, one mechanic: click to collect, dodge for 30 seconds, or match three tiles. Export a zip and upload to itch.io as HTML.

Tips

• Use arcade physics for jams — it's forgiving.
• Load sprites as a sheet; Phaser can slice frames if you set frameWidth and frameHeight.
• Keep canvas size modest (e.g. 480×270) so it runs on phones.
• Mute audio until the player clicks — browsers block autoplay.

Official docs and examples: phaser.io. Pair with our spritesheet cut and animate guides for art.