# Web Games

> Web 浏览器游戏开发原则。框架选择、WebGPU、优化、PWA。

- Skill: `misonl/web-games` (Agent Skill)
- Install (CLI): `npx skillmds@latest add misonl/web-games`
- Raw SKILL.md: https://api.skillmd.com/api/skills/misonl/web-games/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: misonl (https://skillmd.com/u/misonl)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/misonl/web-games

---


# 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]  推荐 |
| --- | --- |
| 一次性加载所有资产 | 渐进式加载 |
| 忽略标签页可见性 | 隐藏时暂停 |
| 阻塞在音频加载上 | 懒加载音频 |
| 跳过压缩 | 压缩一切 |
| 假设快速连接 | 处理慢速网络 |

---

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