web-games

Web 浏览器游戏开发

框架选择和浏览器专属原则。有关技术栈选择的详细信息，请参阅 game-development/engine-selection。

---

1. 框架选择

决策树

What type of game?
│
├── 2D Game
│   ├── Full game engine features? → Phaser 4
│   ├── Fast prototype / jam?      → Kaplay
│   ├── Raw rendering power?       → PixiJS 8
│   └── Tiny / no dependency?      → Raw Canvas / WebGL
│
├── 3D Game
│   ├── Full engine (physics, XR)? → Babylon.js
│   └── Rendering focused?         → Three.js
│
├── Hybrid (DOM UI + canvas moments)
│   └── Custom shell + guest viewport
│       (Canvas/Kaplay/Phaser/Pixi inside a region/modal)
│
└── Narrative-first
    └── Ink (inkjs) or Twine export + DOM host

对比

框架	类型	适用场景
Raw Canvas / WebGL	2D / 底层	小型项目，需要完全掌控
Kaplay	2D 工具包	快速原型
Phaser 4	2D 引擎	完整的游戏功能
PixiJS 8	2D 渲染器	渲染、自定义系统
Three.js	3D 渲染器	可视化、轻量级 3D
Babylon.js	3D 引擎	完整引擎、XR

混合外壳 + 内嵌游戏

当外层界面使用 HTML（菜单、库存、文本、仪表板），但游戏过程中需要使用画布时采用：

1. 将内嵌游戏挂载到容器中；传入上下文。
2. 在内嵌游戏中运行本地游戏循环。
3. 返回结果（分数、通过/失败）；按需销毁内嵌游戏（RAF、监听器、GL 上下文等）。

除非产品本身就是全屏游戏，否则不要让内嵌游戏管理全局应用路由。

---

2. WebGPU 采用情况

浏览器支持情况（2025）

浏览器	支持情况
Chrome	✅ 自 v113 起
Edge	✅ 自 v113 起
Firefox	✅ 自 v131 起
Safari	✅ 自 18.0 起
总计	全球约 73%

决策

• 新的 GPU 密集型项目：使用 WebGPU，并提供 WebGL 回退方案
• 需要广泛兼容旧设备 / 简单的 2D 项目：从 WebGL 或 Canvas 2D 开始
• 功能检测：检查 navigator.gpu

---

3. 性能原则

浏览器限制

限制	策略
无法访问本地文件	打包资源、使用 CDN
标签页限流	页面隐藏时暂停（visibilitychange）
移动网络流量限制	压缩资源
音频自动播放	要求用户交互

优化优先级

1. 资源压缩 - KTX2、Draco、WebP
2. 延迟加载 - 按需加载
3. 对象池 - 避免 GC
4. 绘制调用批处理 - 减少状态变化
5. Web Workers - 分担繁重计算

---

4. 资源策略

类型	格式
纹理	KTX2 + Basis Universal（或简单 2D 使用 WebP/PNG）
音频	WebM/Opus（回退格式：MP3）
3D 模型	glTF + Draco/Meshopt

阶段	加载内容
启动	核心资源，<2MB
游戏过程中	按需流式加载
后台	预取下一关

---

5. 游戏的 PWA

优点： 离线游玩、安装、全屏、可选推送。 要求： service worker、Web 应用清单、HTTPS。

---

6. 音频处理

• 在首次点击或轻触时创建/恢复 AudioContext
• 优先使用 Web Audio API；复用音源池；预加载常用音效
• 尽可能使用 WebM/Opus 压缩

---

7. 反模式

❌ 不要	✅ 应该
一次性加载所有资源	渐进式加载
忽略标签页可见性	页面隐藏时暂停
等待音频加载完成	延迟加载音频
不进行压缩	压缩所有内容
假设网络连接很快	兼容慢速网络
让画布引擎在屏幕外持续运行	拆除内嵌游戏

---

请记住： 浏览器是最易于使用的平台。请尊重其限制。

适用场景

构建 HTML5/WebGL/WebGPU 游戏、选择浏览器运行时，或连接 DOM + 画布混合内嵌游戏时使用。

限制

• 仅当任务明确符合上述范围时，才使用此技能。
• 不要将输出视为环境专属验证、测试或专家审查的替代品。
• 如果缺少必要输入、权限、安全边界或成功标准，请暂停并请求澄清。