Web Games

1---
2name: web-games
3description: Web browser game development principles. Framework selection, WebGPU, optimization, PWA.
4allowed-tools: Read, Write, Edit, Glob, Grep
5---
6 
7# Web Browser Game Development
8 
9> Framework selection and browser-specific principles.
10 
11---
12 
13## 1. Framework Selection
14 
15### Decision Tree
16 
17```
18What type of game?
19│
20├── 2D Game
21│   ├── Full game engine features? → Phaser
22│   └── Raw rendering power? → PixiJS
23│
24├── 3D Game
25│   ├── Full engine (physics, XR)? → Babylon.js
26│   └── Rendering focused? → Three.js
27│
28└── Hybrid / Canvas
29    └── Custom → Raw Canvas/WebGL
30```
31 
32### Comparison (2025)
33 
34| Framework | Type | Best For |
35|-----------|------|----------|
36| **Phaser 4** | 2D | Full game features |
37| **PixiJS 8** | 2D | Rendering, UI |
38| **Three.js** | 3D | Visualizations, lightweight |
39| **Babylon.js 7** | 3D | Full engine, XR |
40 
41---
42 
43## 2. WebGPU Adoption
44 
45### Browser Support (2025)
46 
47| Browser | Support |
48|---------|---------|
49| Chrome | ✅ Since v113 |
50| Edge | ✅ Since v113 |
51| Firefox | ✅ Since v131 |
52| Safari | ✅ Since 18.0 |
53| **Total** | **~73%** global |
54 
55### Decision
56 
57- **New projects**: Use WebGPU with WebGL fallback
58- **Legacy support**: Start with WebGL
59- **Feature detection**: Check `navigator.gpu`
60 
61---
62 
63## 3. Performance Principles
64 
65### Browser Constraints
66 
67| Constraint | Strategy |
68|------------|----------|
69| No local file access | Asset bundling, CDN |
70| Tab throttling | Pause when hidden |
71| Mobile data limits | Compress assets |
72| Audio autoplay | Require user interaction |
73 
74### Optimization Priority
75 
761. **Asset compression** - KTX2, Draco, WebP
772. **Lazy loading** - Load on demand
783. **Object pooling** - Avoid GC
794. **Draw call batching** - Reduce state changes
805. **Web Workers** - Offload heavy computation
81 
82---
83 
84## 4. Asset Strategy
85 
86### Compression Formats
87 
88| Type | Format |
89|------|--------|
90| Textures | KTX2 + Basis Universal |
91| Audio | WebM/Opus (fallback: MP3) |
92| 3D Models | glTF + Draco/Meshopt |
93 
94### Loading Strategy
95 
96| Phase | Load |
97|-------|------|
98| Startup | Core assets, <2MB |
99| Gameplay | Stream on demand |
100| Background | Prefetch next level |
101 
102---
103 
104## 5. PWA for Games
105 
106### Benefits
107 
108- Offline play
109- Install to home screen
110- Full screen mode
111- Push notifications
112 
113### Requirements
114 
115- Service worker for caching
116- Web app manifest
117- HTTPS
118 
119---
120 
121## 6. Audio Handling
122 
123### Browser Requirements
124 
125- Audio context requires user interaction
126- Create AudioContext on first click/tap
127- Resume context if suspended
128 
129### Best Practices
130 
131- Use Web Audio API
132- Pool audio sources
133- Preload common sounds
134- Compress with WebM/Opus
135 
136---
137 
138## 7. Anti-Patterns
139 
140| ❌ Don't | ✅ Do |
141|----------|-------|
142| Load all assets upfront | Progressive loading |
143| Ignore tab visibility | Pause when hidden |
144| Block on audio load | Lazy load audio |
145| Skip compression | Compress everything |
146| Assume fast connection | Handle slow networks |
147 
148---
149 
150> **Remember:** Browser is the most accessible platform. Respect its constraints.
151