游戏引擎技能
使用 HTML5 Canvas、WebGL 和 JavaScript 构建基于 Web 的游戏和游戏引擎。此技能包含入门模板、参考文档，以及使用 Phaser、Three.js、Babylon.js 和 A-Frame 等框架进行 2D 和 3D 游戏开发的分步工作流。
何时使用此技能
- 使用 Web 技术从零开始构建游戏引擎或游戏
- 实现游戏循环、物理、碰撞检测或渲染
- 使用 HTML5 Canvas、WebGL 或 SVG 处理游戏图形
- 添加游戏控制（键盘、鼠标、触摸、游戏手柄）
- 创建 2D 平台跳跃游戏、打砖块风格游戏、迷宫游戏或 3D 体验
- 使用瓦片地图、精灵或动画
- 为 Web 游戏添加音频
- 使用 WebRTC 或 WebSockets 实现多人游戏功能
- 优化游戏性能
- 发布和分发 Web 游戏
前置条件
- HTML、CSS 和 JavaScript 基础知识
- 支持 Canvas/WebGL 的现代 Web 浏览器
- 文本编辑器或 IDE
- 可选：Node.js，用于构建工具和本地开发服务器
核心概念
以下概念构成了每个基于 Web 的游戏引擎的基础。
游戏循环
每个游戏引擎都围绕游戏循环展开——一个持续循环：
- 处理输入 - 读取键盘、鼠标、触摸或游戏手柄输入
- 更新状态 - 更新游戏对象位置、物理、AI 和逻辑
- 渲染 - 将当前游戏状态绘制到屏幕
使用 requestAnimationFrame 实现平滑且浏览器优化的渲染。
渲染
- Canvas 2D - 最适合 2D 游戏、基于精灵的渲染和瓦片地图
- WebGL - 硬件加速的 3D 和高级 2D 渲染
- SVG - 基于矢量的图形，适合 UI 元素
- CSS - 适用于基于 DOM 的游戏元素和过渡
物理与碰撞检测
- 2D 碰撞检测 - 基于 AABB、圆形和 SAT 的碰撞检测
- 3D 碰撞检测 - 包围盒、包围球和光线投射
- 速度与加速度 - 用于运动的基础牛顿物理
- 重力 - 平台跳跃游戏中的恒定向下加速度
控制
- 键盘 - 方向键、WASD 和自定义键绑定
- 鼠标 - 点击、移动以及用于 FPS 风格控制的指针锁定
- 触摸 - 移动设备触摸事件和虚拟摇杆
- 游戏手柄 - 用于控制器支持的 Gamepad API
音频
- Web Audio API - 程序化声音生成和空间音频
- HTML5 Audio - 用于音乐和音效的简单音频播放
分步工作流
创建基础 2D 游戏
- 设置包含
<canvas>元素的 HTML 文件 - 获取 2D 渲染上下文
- 使用
requestAnimationFrame实现游戏循环 - 创建具有位置、速度和大小属性的游戏对象
- 处理键盘/鼠标输入以实现玩家控制
- 实现游戏对象之间的碰撞检测
- 添加得分、生命和胜负条件
- 添加音效和音乐
构建 3D 游戏
- 选择框架（Three.js、Babylon.js、A-Frame 或 PlayCanvas）
- 设置场景、相机和渲染器
- 加载或创建 3D 模型和纹理
- 实现光照和着色器
- 添加物理和碰撞检测
- 实现玩家控制和相机移动
- 添加音频和视觉效果
发布游戏
- 优化资源（压缩图像、压缩代码）
- 跨浏览器和设备测试
- 选择分发平台（Web、应用商店、游戏门户）
- 如有需要，实现变现
- 通过游戏社区和社交媒体推广
游戏模板
入门模板位于 assets/ 文件夹中。每个模板都提供一个完整、可工作的示例，可作为新项目的起点。
| 模板 | 描述 | |----------|-------------| | paddle-game-template.md | 使用纯 JavaScript 的 2D 打砖块风格游戏 | | 2d-maze-game.md | 使用设备方向控制的迷宫游戏 | | 2d-platform-game.md | 使用 Phaser 框架的平台跳跃游戏 | | gameBase-template-repo.md | 游戏基础模板仓库结构 | | simple-2d-engine.md | 带碰撞检测的简单 2D 平台跳跃引擎 |
参考文档
详细参考材料位于 references/ 文件夹中。查阅这些文件以深入了解特定主题。
| 参考 | 涵盖主题 | |-----------|---------------| | basics.md | 游戏开发介绍和结构 | | web-apis.md | Canvas、WebGL、Web Audio、Gamepad 和其他 Web API | | techniques.md | 碰撞检测、瓦片地图、异步脚本、音频 | | 3d-web-games.md | 3D 理论、框架、着色器、WebXR | | game-control-mechanisms.md | 触摸、键盘、鼠标和游戏手柄控制 | | game-publishing.md | 分发、推广和变现 | | algorithms.md | 光线投射、碰撞、物理、向量数学 | | terminology.md | 游戏开发术语表 | | game-engine-core-principles.md | 游戏引擎核心设计原则 |
故障排查
| 问题 | 解决方案 | |-------|----------| | Canvas 为空白 | 检查是否在获取上下文之后以及游戏循环内部调用了绘制方法 | | 游戏运行速度不一致 | 在更新计算中使用 delta time，而不是固定值 | | 碰撞检测不一致 | 对快速移动的对象使用连续碰撞检测或减少时间步长 | | 音频无法播放 | 浏览器在播放音频前需要用户交互；从点击处理程序触发播放 | | 性能较差 | 使用浏览器开发工具进行性能分析，减少绘制调用，使用对象池，并优化资源大小 | | 触摸控制无响应 | 阻止默认触摸行为，并将触摸事件与鼠标事件分开处理 | | WebGL 上下文丢失 | 处理 webglcontextlost 事件，并在 webglcontextrestored 时恢复状态 |