用途:用于构建 HTML5/WebGL/WebGPU 浏览器游戏、选择浏览器运行时,或搭建混合 DOM+canvas 的嵌入式游戏视图。
主要能力:提供框架选型决策树与对比。2D 游戏:需要完整引擎功能选 Phaser 4,快速原型/Game Jam 选 Kaplay,追求原始渲染性能选 PixiJS 8,极小或无依赖选原生 Canvas/WebGL。3D 游戏:需要完整引擎(物理、XR)选 Babylon.js,偏重渲染选 Three.js。混合方案为自定义外壳加 guest 视口,将 Canvas/Kaplay/Phaser/Pixi 挂载到容器或弹窗中,由 guest 运行本地游戏循环并返回分数或成败结果,随后销毁 guest(RAF、监听器、GL 上下文),且不应让 guest 接管全局路由。叙事优先可用 Ink(inkjs)或 Twine 导出加 DOM 宿主。
WebGPU:2025 年 Chrome/Edge 自 v113、Firefox 自 v131、Safari 自 18.0 支持,全球约 73%。新 GPU 密集型项目可用 WebGPU 并保留 WebGL 回退;广泛兼容或简单 2D 从 WebGL/Canvas 2D 起步;用 navigator.gpu 做特性检测。
性能与资源:应对无本地文件访问、标签页节流、移动数据限制、音频自动播放限制。优化优先级为资源压缩(KTX2、Draco、WebP)、懒加载、对象池、绘制调用批处理、Web Worker 卸载重计算。纹理用 KTX2+Basis Universal(简单 2D 可用 WebP/PNG),音频用 WebM/Opus(回退 MP3),3D 模型用 glTF+Draco/Meshopt。启动加载核心资源小于 2MB,游戏内按需流式加载,后台预取下一关。PWA 可离线游玩、安装、全屏,需要 service worker、manifest 与 HTTPS。音频在首次点击/触摸时创建或恢复 AudioContext,优先 Web Audio API,池化音源并预加载常用音效。
限制:仅在任务明确匹配上述范围时使用;输出不能替代针对具体环境的验证、测试或专家评审;若缺少必要输入、权限、安全边界或成功标准,应停止并请求澄清。