| name | web-games |
| description | Build and verify browser games with Phaser 3 or PixiJS on Vite: scaffold, scene lifecycle, assets, input, arcade physics, logic tests with vitest, dev-server playtest through the browser, production build, static hosting and itch.io HTML5 zips. Use when the owner mentions Phaser, Pixi, an HTML5 or browser game, or the project has a package.json with phaser/pixi.js.
|
| version | 1.0.0 |
| author | Remedy |
| tags | ["game","web","phaser","pixi","vite","html5","browser"] |
| requires | [] |
| tools | ["game_project_info","bash_exec","file_read","file_write","file_edit","repo_search","list_dir","computer_navigate","computer_screenshot","computer_key","computer_click","vision_decode","game_playtest"] |
| triggers | ["\\b(phaser|pixi(js|\\.js)?|browser game|html5 game|web game|itch\\.io)\\b"] |
Web games (Phaser 3 / PixiJS + Vite)
Everything here is plain Node tooling, so you can verify nearly all of it
headless. The only window is the browser — drive it with computer_navigate.
Fingerprint
game_project_info(path); file_read package.json → phaser or
pixi.js in deps, vite in devDeps, scripts (dev, build, test).index.html at the root (Vite entry), src/main.(ts|js), public/
for static assets served at /.- No
node_modules/ → npm install first (ask if offline is a concern).
Scaffold (new project)
npm create vite@latest <name> -- --template vanilla-ts
cd <name> && npm install && npm install phaser # or: npm install pixi.js
Phaser also offers npm create @phaserjs/game@latest (interactive — run
it only if the owner wants its templates; otherwise the Vite route above).
Then write src/main.ts per references/phaser-scenes.md or
references/pixi-basics.md, and references/vite-setup.md for config.
Core loop (Phaser)
Scenes own the lifecycle: preload() queues assets, create() builds
objects, update(time, delta) runs every frame. Use delta (ms) for
movement. Arcade physics for most 2D; Matter for polygons/constraints.
Input via this.input.keyboard.createCursorKeys() or addKeys. Details and
a runnable skeleton: references/phaser-scenes.md.
Core loop (Pixi)
Pixi is a renderer, not a game framework: Application, Container,
Sprite, app.ticker.add((ticker) => ...). You write your own scene/state
management and physics. Skeleton: references/pixi-basics.md.
Verify — cheap to expensive
npx tsc --noEmit (TS projects) — type errors without a build.npx vitest run — pure logic (scoring, grid, AI, inventory). Keep that
logic in modules that never import /; see
for the split and a jsdom note.
