game-engine

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Game Engine Skill

游戏引擎技能

Build web-based games and game engines using HTML5 Canvas, WebGL, and JavaScript. This skill includes starter templates, reference documentation, and step-by-step workflows for 2D and 3D game development with frameworks such as Phaser, Three.js, Babylon.js, and A-Frame.

使用HTML5 Canvas、WebGL和JavaScript构建基于网页的游戏与游戏引擎。本技能包含入门模板、参考文档，以及使用Phaser、Three.js、Babylon.js和A-Frame等框架进行2D和3D游戏开发的分步工作流程。

When to Use This Skill

何时使用本技能

Building a game engine or game from scratch using web technologies
Implementing game loops, physics, collision detection, or rendering
Working with HTML5 Canvas, WebGL, or SVG for game graphics
Adding game controls (keyboard, mouse, touch, gamepad)
Creating 2D platformers, breakout-style games, maze games, or 3D experiences
Working with tilemaps, sprites, or animations
Adding audio to web games
Implementing multiplayer features with WebRTC or WebSockets
Optimizing game performance
Publishing and distributing web games

使用网页技术从零构建游戏引擎或游戏
实现游戏循环、物理效果、碰撞检测或渲染功能
使用HTML5 Canvas、WebGL或SVG制作游戏图形
添加游戏控制（键盘、鼠标、触摸、游戏手柄）
创建2D平台游戏、打砖块类游戏、迷宫游戏或3D体验项目
处理瓦片地图、精灵或动画
为网页游戏添加音频
使用WebRTC或WebSockets实现多人游戏功能
优化游戏性能
发布与分发网页游戏

Prerequisites

前置要求

Basic knowledge of HTML, CSS, and JavaScript
A modern web browser with Canvas/WebGL support
A text editor or IDE
Optional: Node.js for build tooling and local development servers

具备HTML、CSS和JavaScript的基础知识
支持Canvas/WebGL的现代网页浏览器
文本编辑器或IDE
可选：用于构建工具和本地开发服务器的Node.js

Core Concepts

核心概念

The following concepts form the foundation of every web-based game engine.

以下概念是所有基于网页的游戏引擎的基础。

Game Loop

游戏循环

Every game engine revolves around the game loop -- a continuous cycle of:

Process Input - Read keyboard, mouse, touch, or gamepad input
Update State - Update game object positions, physics, AI, and logic
Render - Draw the current game state to the screen

Use

requestAnimationFrame

for smooth, browser-optimized rendering.

每个游戏引擎都围绕游戏循环运转——这是一个持续的循环流程：

处理输入 - 读取键盘、鼠标、触摸或游戏手柄的输入
更新状态 - 更新游戏对象的位置、物理效果、AI和逻辑
渲染画面 - 将当前游戏状态绘制到屏幕上

使用

requestAnimationFrame

实现流畅、浏览器优化的渲染效果。

Rendering

渲染技术

Canvas 2D - Best for 2D games, sprite-based rendering, and tilemaps
WebGL - Hardware-accelerated 3D and advanced 2D rendering
SVG - Vector-based graphics, good for UI elements
CSS - Useful for DOM-based game elements and transitions

Canvas 2D - 最适合2D游戏、基于精灵的渲染和瓦片地图
WebGL - 硬件加速的3D和高级2D渲染
SVG - 基于矢量的图形，适用于UI元素
CSS - 可用于基于DOM的游戏元素和过渡效果

Physics and Collision Detection

物理与碰撞检测

2D Collision Detection - AABB, circle, and SAT-based collision
3D Collision Detection - Bounding box, bounding sphere, and raycasting
Velocity and Acceleration - Basic Newtonian physics for movement
Gravity - Constant downward acceleration for platformers

2D碰撞检测 - 基于AABB、圆形和SAT的碰撞检测
3D碰撞检测 - 包围盒、包围球和光线投射
速度与加速度 - 用于移动的基础牛顿物理
重力 - 平台游戏中使用的恒定向下加速度

Controls

控制方式

Keyboard - Arrow keys, WASD, and custom key bindings
Mouse - Click, move, and pointer lock for FPS-style controls
Touch - Mobile touch events and virtual joysticks
Gamepad - Gamepad API for controller support

键盘 - 方向键、WASD和自定义按键绑定
鼠标 - 点击、移动和用于FPS风格控制的指针锁定
触摸 - 移动端触摸事件和虚拟摇杆
游戏手柄 - 用于控制器支持的Gamepad API

Audio

音频处理

Web Audio API - Programmatic sound generation and spatial audio
HTML5 Audio - Simple audio playback for music and sound effects

Web Audio API - 程序化声音生成和空间音频
HTML5 Audio - 用于音乐和音效的简单音频播放

Step-by-Step Workflows

分步工作流程

Creating a Basic 2D Game

创建基础2D游戏

Set up an HTML file with a
```
<canvas>
```
element
Get the 2D rendering context
Implement the game loop using
```
requestAnimationFrame
```
Create game objects with position, velocity, and size properties
Handle keyboard/mouse input for player control
Implement collision detection between game objects
Add scoring, lives, and win/lose conditions
Add sound effects and music

搭建包含
```
<canvas>
```
元素的HTML文件
获取2D渲染上下文
使用
```
requestAnimationFrame
```
实现游戏循环
创建包含位置、速度和尺寸属性的游戏对象
处理键盘/鼠标输入以实现玩家控制
实现游戏对象之间的碰撞检测
添加得分、生命值和胜负条件
添加音效和音乐

Building a 3D Game

构建3D游戏

Choose a framework (Three.js, Babylon.js, A-Frame, or PlayCanvas)
Set up the scene, camera, and renderer
Load or create 3D models and textures
Implement lighting and shaders
Add physics and collision detection
Implement player controls and camera movement
Add audio and visual effects

选择框架（Three.js、Babylon.js、A-Frame或PlayCanvas）
设置场景、相机和渲染器
加载或创建3D模型和纹理
实现光照和着色器
添加物理效果和碰撞检测
实现玩家控制和相机移动
添加音频和视觉效果

Publishing a Game

发布游戏

Optimize assets (compress images, minify code)
Test across browsers and devices
Choose distribution platform (web, app stores, game portals)
Implement monetization if needed
Promote through game communities and social media

优化资源（压缩图片、压缩代码）
在不同浏览器和设备上进行测试
选择分发平台（网页、应用商店、游戏门户）
如有需要，实现商业化
通过游戏社区和社交媒体进行推广

Game Templates

游戏模板

Starter templates are available in the

assets/

folder. Each template provides a complete, working example that can be used as a starting point for a new project.

Template	Description
`paddle-game-template.md`	2D Breakout-style game with pure JavaScript
`2d-maze-game.md`	Maze game with device orientation controls
`2d-platform-game.md`	Platformer game using Phaser framework
`gameBase-template-repo.md`	Game base template repository structure
`simple-2d-engine.md`	Simple 2D platformer engine with collisions

入门模板可在

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平台游戏引擎

Reference Documentation

参考文档

Detailed reference material is available in the

references/

folder. Consult these files for in-depth coverage of specific topics.

Reference	Topics Covered
`basics.md`	Game development introduction and anatomy
`web-apis.md`	Canvas, WebGL, Web Audio, Gamepad, and other web APIs
`techniques.md`	Collision detection, tilemaps, async scripts, audio
`3d-web-games.md`	3D theory, frameworks, shaders, WebXR
`game-control-mechanisms.md`	Touch, keyboard, mouse, and gamepad controls
`game-publishing.md`	Distribution, promotion, and monetization
`algorithms.md`	Raycasting, collision, physics, vector math
`terminology.md`	Game development glossary
`game-engine-core-principles.md`	Core design principles for game engines

详细的参考资料可在

references/

文件夹中获取。如需深入了解特定主题，请查阅这些文件。

参考文档	涵盖主题
`basics.md`	游戏开发入门与结构解析
`web-apis.md`	Canvas、WebGL、Web Audio、Gamepad及其他网页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`	游戏引擎核心设计原则

Troubleshooting

故障排除

Issue	Solution
Canvas is blank	Check that you are calling drawing methods after getting the context and inside the game loop
Game runs at different speeds	Use delta time in update calculations instead of fixed values
Collision detection is inconsistent	Use continuous collision detection or reduce time steps for fast-moving objects
Audio does not play	Browsers require user interaction before playing audio; trigger playback from a click handler
Performance is poor	Profile with browser dev tools, reduce draw calls, use object pooling, and optimize asset sizes
Touch controls are unresponsive	Prevent default touch behavior and handle touch events separately from mouse events
WebGL context lost	Handle the `webglcontextlost` event and restore state on `webglcontextrestored`

问题	解决方案
Canvas显示空白	检查是否在获取上下文后且在游戏循环内调用绘图方法
游戏运行速度不一致	在更新计算中使用增量时间而非固定值
碰撞检测不一致	使用连续碰撞检测或减少快速移动对象的时间步长
音频无法播放	浏览器要求用户交互后才能播放音频；从点击处理程序触发播放
性能不佳	使用浏览器开发者工具分析性能，减少绘制调用，使用对象池，并优化资源大小
触摸控件无响应	阻止默认触摸行为，并将触摸事件与鼠标事件分开处理
WebGL上下文丢失	处理 `webglcontextlost` 事件，并在 `webglcontextrestored` 时恢复状态