Source facts
- Repository
- Tugoukezhang/workbuddy-skills
- Last source activity
- June 18, 2026 at 05:44
- Detected SKILL.md language
- Chinese
- Stars
- 13
- Forks
- 3
Install options
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Review the source files
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Showing SKILL.md
SKILL.md
Source instructions · Read-only preview- name
- web-games
- description
- Web浏览器游戏开发 - 框架选择与浏览器特定原则，包括Phaser、PixiJS、WebGPU、优化、PWA。
- read_when
- ["开发Web/H5游戏时","选择游戏引擎时","优化Web游戏性能时"]
# 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
> **记住：** 浏览器是最易访问的平台。尊重它的限制。
View on GitHub