web-games

name	web-games
description	Web 浏览器游戏开发原则。框架选择、WebGPU、优化、PWA。
allowed-tools	Read, Write, Edit, Glob, Grep

Web 浏览器游戏开发

框架选择与浏览器特定原则。

---

1. 框架选择

决策树

什么类型的游戏？
|
+-- 2D 游戏
|   +-- 完整的游戏引擎功能？ -> Phaser
|   +-- 原始渲染能力？ -> PixiJS
|
+-- 3D 游戏
|   +-- 完整引擎（物理、XR）？ -> Babylon.js
|   +-- 渲染聚焦？ -> Three.js
|
+-- 混合 / Canvas
    +-- 自定义 -> Raw Canvas/WebGL

对比（2025）

框架	类型	最适合
Phaser 4	2D	完整游戏功能
PixiJS 8	2D	渲染、UI
Three.js	3D	可视化、轻量级
Babylon.js 7	3D	完整引擎、XR

---

2. WebGPU 采用

浏览器支持（2025）

浏览器	支持
Chrome	[OK] 自 v113 起
Edge	[OK] 自 v113 起
Firefox	[OK] 自 v131 起
Safari	[OK] 自 18.0 起
总计	~73% 全球

决策

• 新项目：使用 WebGPU，并提供 WebGL 回退
• 遗留支持：从 WebGL 开始
• 特性检测：检查 navigator.gpu

---

3. 性能原则

浏览器限制

限制	策略
无本地文件访问	资产打包、CDN
标签页节流	隐藏时暂停
移动数据限制	压缩资产
音频自动播放	需要用户交互

优化优先级

1. 资产压缩 - KTX2、Draco、WebP
2. 懒加载 - 按需加载
3. 对象池 - 避免 GC
4. 绘制调用合批 - 减少状态变更
5. Web Workers - 卸载繁重计算

---

4. 资产策略

压缩格式

类型	格式
纹理	KTX2 + Basis Universal
音频	WebM/Opus（回退：MP3）
3D 模型	glTF + Draco/Meshopt

加载策略

阶段	加载
启动	核心资产，<2MB
游戏过程	按需流式传输
后台	预取下一关

---

5. 游戏的 PWA

优势

• 离线游玩
• 安装到主屏幕
• 全屏模式
• 推送通知

要求

• Service worker 用于缓存
• Web app manifest
• HTTPS

---

6. 音频处理

浏览器要求

• 音频上下文需要用户交互
• 在首次点击/轻触时创建 AudioContext
• 如果挂起则恢复上下文

最佳实践

• 使用 Web Audio API
• 池化音频源
• 预加载常用声音
• 使用 WebM/Opus 压缩

---

7. 反模式

[FAIL] 禁止	[OK] 推荐
一次性加载所有资产	渐进式加载
忽略标签页可见性	隐藏时暂停
阻塞在音频加载上	懒加载音频
跳过压缩	压缩一切
假设快速连接	处理慢速网络

---

记住： 浏览器是最易访问的平台。尊重它的限制。