web-games

# Web 浏览器游戏开发 > 框架选择与浏览器特定原则。 --- ## 1. 框架选择 ### 决策树 游戏类型？ │ ├── 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 | --- ## 2. WebGPU 采用 ### 浏览器支持 (2025) | 浏览器 | 支持情况 | |---------|---------| | Chrome | ✅ v113 起 | | Edge | ✅ v113 起 | | Firefox | ✅ v131 起 | | Safari | ✅ 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 需要用户交互 - 在首次点击/触摸时创建 AudioContext - 如果被挂起则恢复上下文 ### 最佳实践 - 使用 Web Audio API - 池化音频源 - 预加载常用音效 - 使用 WebM/Opus 压缩 --- ## 7. 反模式 | ❌ 错误做法 | ✅ 正确做法 | |----------|-------| |