# Web Games

> Web浏览器游戏开发原则。框架选择、WebGPU、优化、PWA。当用户要求'Web游戏开发'时使用。

- Skill: `kscz0000/web-games` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kscz0000/web-games`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kscz0000/web-games/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: kscz0000 (https://skillmd.com/u/kscz0000)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/kscz0000/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应用清单
- HTTPS

---

## 6. 音频处理

### 浏览器要求

- 音频上下文需要用户交互
- 首次点击/点击时创建AudioContext
- 如果暂停则恢复上下文

### 最佳实践

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

---

## 7. 反模式

| ❌ 不要 | ✅ 要 |
|----------|-------|
| 预先加载所有资产 | 渐进式加载 |
| 忽略标签页可见性 | 隐藏时暂停 |
| 阻塞音频加载 | 懒加载音频 |
| 跳过压缩 | 压缩所有内容 |
| 假设快速连接 | 处理慢网络 |

---

> **记住：** 浏览器是最易访问的平台。尊重其约束。

## 何时使用
此技能适用于执行概述中描述的工作流程或操作。

## 限制
- 仅当任务明确匹配上述范围时使用此技能。
- 不要将输出替代特定环境的验证、测试或专家审查。
- 如果缺少必要的输入、权限、安全边界或成功标准，请停止并请求澄清。