Web 浏览器游戏开发
本技能介绍浏览器游戏开发的框架选型与浏览器特定原则。
一、框架选型
决策树：
游戏类型 │ ├── 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
二、WebGPU 采用
2025 年浏览器支持：
浏览器 | 支持情况 Chrome | ✅ 自 v113 起 Edge | ✅ 自 v113 起 Firefox | ✅ 自 v131 起 Safari | ✅ 自 18.0 起 总计 | 全球约 73%
决策：
新项目：使用 WebGPU 并回退到 WebGL 旧版支持：从 WebGL 开始 特性检测：检查 navigator.gpu
三、性能原则
浏览器约束：
约束 | 策略 无本地文件访问 | 资源打包、CDN 标签页节流 | 隐藏时暂停 移动数据限制 | 压缩资源 音频自动播放 | 需要用户交互
优化优先级：
资源压缩 - KTX2、Draco、WebP 懒加载 - 按需加载 对象池 - 避免 GC 绘制调用批处理 - 减少状态切换 Web Workers - 卸载繁重计算
四、资源策略
压缩格式：
类型 | 格式 纹理 | KTX2 + Basis Universal 音频 | WebM/Opus（回退：MP3） 3D 模型 | glTF + Draco/Meshopt
加载策略：
阶段 | 加载内容 启动 | 核心资源，<2MB 游戏过程 | 按需流式加载 后台 | 预取下一关
五、游戏 PWA
优势：
离线游玩 安装到主屏幕 全屏模式 推送通知
要求：
用于缓存的服务工作线程（Service Worker） Web 应用清单（manifest） HTTPS
六、音频处理
浏览器要求：
音频上下文需要用户交互 在首次点击/触摸时创建 AudioContext 如果上下文被挂起则恢复
最佳实践：
使用 Web Audio API 池化音频源 预加载常用音效 使用 WebM/Opus 压缩
七、反模式
❌ 不要 | ✅ 应该 一次性加载所有资源 | 渐进式加载 忽略标签页可见性 | 隐藏时暂停 阻塞等待音频加载 | 懒加载音频 跳过压缩 | 压缩一切 假设网络很快 | 处理慢速网络
记住：浏览器是最易访问的平台。尊重它的约束。