# Web Games

> Web浏览器游戏开发 - 框架选择与浏览器特定原则，包括Phaser、PixiJS、WebGPU、优化、PWA。

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

---


# Web Browser Game Development

## 框架选择

### 决策树

```
游戏类型？
│
├── 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 |

## 性能原则

### 浏览器限制

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

### 优化优先级

1. **资源压缩** - KTX2、Draco、WebP
2. **懒加载** - 按需加载
3. **对象池** - 避免垃圾回收
4. **绘制调用批处理** - 减少状态变更
5. **Web Workers** - 卸载重计算

## PWA 游戏

### 优势
- 离线游玩
- 安装到主屏幕
- 全屏模式
- 推送通知

### 要求
- Service Worker 缓存
- Web 应用清单
- HTTPS

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