web-games

Web Browser Game Development

Framework selection and browser-specific principles. For stack choice details see game-development/engine-selection.

---

1. Framework Selection

Decision Tree

What type of game?
│
├── 2D Game
│   ├── Full game engine features? → Phaser 4
│   ├── Fast prototype / jam?      → Kaplay
│   ├── Raw rendering power?       → PixiJS 8
│   └── Tiny / no dependency?      → Raw Canvas / WebGL
│
├── 3D Game
│   ├── Full engine (physics, XR)? → Babylon.js
│   └── Rendering focused?         → Three.js
│
├── Hybrid (DOM UI + canvas moments)
│   └── Custom shell + guest viewport
│       (Canvas/Kaplay/Phaser/Pixi inside a region/modal)
│
└── Narrative-first
    └── Ink (inkjs) or Twine export + DOM host

Comparison

Framework	Type	Best For
Raw Canvas / WebGL	2D / low-level	Small scope, full control
Kaplay	2D toolkit	Rapid prototypes
Phaser 4	2D engine	Full game features
PixiJS 8	2D renderer	Rendering, custom systems
Three.js	3D renderer	Visualizations, lightweight 3D
Babylon.js	3D engine	Full engine, XR

Hybrid shell + guest

Use when chrome is HTML (menus, inventories, text, dashboards) but bursts of play need a canvas:

1. Mount guest in a container; pass context in.
2. Run a local game loop in the guest.
3. Return r