tugoukezhang Web Browser Game Development
框架选择
决策树
游戏类型？
│
├── 2D游戏
│ ├── 需要完整游戏引擎功能？ → Phaser
│ └── 追求原始渲染性能？ → PixiJS
│
├── 3D游戏
│ ├── 完整引擎（物理、XR）？ → Babylon.js
│ └── 专注于渲染？ → Three.js
│
└── 混合/Canvas
└── 自定义方案 → 原生 Canvas/WebGL
框架对比（2025年）
| 框架 | 类型 | 最佳适用场景 |
|---|---|---|
| Phaser 4 | 2D | 完整游戏功能 |
| PixiJS 8 | 2D | 渲染、UI |
| Three.js | 3D | 可视化、轻量级 |
| Babylon.js 7 | 3D | 完整引擎、XR |
性能原则
浏览器限制
| 限制 | 应对策略 |
|---|---|
| 无法访问本地文件 | 资源打包、CDN |
| 标签页节流 | 隐藏时暂停 |
| 移动数据限制 | 压缩资源 |
| 音频自动播放 | 需要用户交互 |
优化优先级
- 资源压缩 - KTX2、Draco、WebP
- 懒加载 - 按需加载
- 对象池 - 避免垃圾回收
- 绘制调用批处理 - 减少状态变更
- Web Workers - 卸载重计算
PWA 游戏
优势
- 离线游玩
- 安装到主屏幕
- 全屏模式
- 推送通知
要求
- Service Worker 缓存
- Web 应用清单
- HTTPS
记住： 浏览器是最易访问的平台。尊重它的限制。