基于LLM与提示词工程：从文本描述到3D游戏原型的快速构建实践-尧图网络科技

在实际 AI 应用开发中，从一段简单的文本描述生成一个可交互的 3D 游戏原型，曾经是遥不可及的构想。如今，以 Claude Opus 为代表的大型语言模型（LLM）正在将这一过程从概念验证推向工程实践。过去，我们可能需要一个完整的团队，包括策划、美术、前端、后端和音效工程师，花费数周时间才能搭建一个粗糙的游戏框架。而现在，通过精心设计的提示词（Prompt），我们可以引导 AI 生成代码、资产描述甚至整合逻辑，将开发周期压缩到以小时计。这不仅仅是效率的提升，更是对创意原型验证流程的根本性变革。

本文面向对 AI 辅助开发、游戏原型快速构建以及提示词工程实践感兴趣的开发者。我们将深入探讨如何利用类似 Claude Opus 这样的高级语言模型，从一个简单的创意描述出发，逐步生成一个包含 3D 场景、基础物理交互和背景音乐的完整可运行游戏原型。我们将重点关注从“粗糙色块”到“完整原型”这一过程中的关键技术环节：如何设计提示词来精确控制 AI 的输出，如何将生成的代码片段整合成一个可运行的项目，以及如何迭代优化以加入物理和音乐等复杂特性。通过本文，你将掌握一套将自然语言创意转化为可执行代码的实用工作流。

1. 理解提示词工程：从模糊描述到精确指令

在 AI 生成内容的语境下，提示词是连接人类意图与模型能力的桥梁。一个粗糙的提示词可能只会得到一段概念性的描述或几行不完整的代码；而一个结构清晰、约束明确的提示词，则能引导模型输出可直接用于构建原型的模块化组件。

1.1 提示词的核心要素：角色、任务、上下文与格式

一个有效的游戏原型生成提示词，通常包含以下四个关键部分：

角色定义：明确告诉 AI 它需要扮演的角色，例如“你是一位经验丰富的全栈游戏开发者，精通 WebGL/Three.js 和游戏物理引擎”。
任务目标：清晰、具体地描述最终产出物。例如“请生成一个在浏览器中运行的 3D 小游戏原型，核心玩法是控制一个方块躲避从天而降的球体”。
上下文与约束：提供必要的背景信息和技术栈限制。这包括目标平台（如浏览器）、使用的框架或库（如 Three.js, Cannon.js, Howler.js）、代码结构要求（如单一 HTML 文件或模块化）、以及需要避免的陷阱。
输出格式：明确要求 AI 以何种形式交付结果。对于代码生成，最有效的方式是要求其输出一个完整的、可复制粘贴并直接运行的代码块，并注明所使用的语言。

一个失败的提示词例子：“做一个游戏”。这过于模糊，AI 无法理解具体需求。一个进阶但仍不完善的提示词：“用 JavaScript 写一个 3D 游戏”。这缺少框架、玩法、视觉风格等关键约束。一个相对有效的提示词示例如下：

你是一位专业的 Web 端 3D 游戏开发者。请创建一个简单的 3D 游戏原型，使用 Three.js 库。玩家控制一个位于屏幕底部的绿色平板，用鼠标左右移动来接住从屏幕上方随机位置落下的红色球体。球体碰到平板会消失并得分，落到地面则游戏结束。请生成一个完整的、独立的 HTML 文件，包含所有必要的 CSS 和 JavaScript 代码，确保它能在现代浏览器中直接打开运行。代码中请添加简要注释。

1.2 迭代与细化：从色块到物理与音乐

初始提示词可能只能生成一个静态场景或非常基础的交互。这就是“粗糙色块”阶段。要达到“带物理和音乐的完整原型”，需要进行提示词迭代：

第一轮：核心交互与视觉。生成一个具有基本 3D 场景（摄像机、灯光、几何体）和键盘/鼠标控制的原型。
第二轮：引入物理。在提示词中明确要求：“为下落的球体和玩家控制的平板添加物理属性（质量、碰撞体）。使用 Cannon.js 物理引擎模拟重力与碰撞。球体与平板碰撞后应被销毁并播放一个音效。”
第三轮：加入音乐与抛光。进一步要求：“为游戏添加背景音乐循环，并在游戏开始时播放。实现一个简单的 UI 来显示分数和游戏状态（进行中/结束）。优化代码结构，将物理模拟、渲染循环和事件处理分离。”

每一次迭代，都是对前一次输出不足的补充和对 AI 指令的精确化。关键在于，你要能识别出当前原型的缺失项（如物理模拟不真实、没有声音反馈），并将其转化为清晰的、可加入提示词的修改要求。

2. 环境准备与核心工具链

在开始提示词驱动开发之前，需要搭建一个本地开发环境，用于测试、运行和迭代 AI 生成的代码。

2.1 基础开发环境

代码编辑器：推荐使用 Visual Studio Code，它轻量且对 Web 开发支持良好。
现代浏览器：Chrome、Firefox 或 Edge 的最新版本，用于运行和调试 Web 端的 3D 原型。
本地 Web 服务器：由于涉及文件加载（如纹理、音效），直接通过file://协议打开 HTML 文件可能会遇到跨域限制。一个简单的解决方案是使用 Node.js 的http-server。
- 安装 Node.js。
- 全局安装http-server：npm install -g http-server
- 在项目目录下运行：http-server -p 8080
- 浏览器访问http://localhost:8080即可。

2.2 核心 JavaScript 库介绍

我们的原型将基于 Web 技术栈，主要依赖以下几个库：

库名	用途	官方地址/安装方式
Three.js	3D 图形渲染库，用于创建场景、摄像机、灯光、几何体和材质。	通过`<script src=”https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js”></script>`引入
Cannon.js	物理引擎，用于模拟刚体物理、重力、碰撞检测和响应。	`<script src=”https://cdn.jsdelivr.net/npm/cannon-es@0.20.0/dist/cannon-es.js”></script>`
Howler.js	音频库，简化 Web Audio API 的使用，便于播放背景音乐和音效。	`<script src=”https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js”></script>`

在提示词中，我们必须明确指定使用这些库及其 CDN 地址，以确保 AI 生成的代码能正确引用它们。

2.3 项目结构规划

虽然初期可能只是一个 HTML 文件，但为后续迭代考虑，建议建立如下目录结构：

3d-game-prototype/ ├── index.html # 主入口文件 ├── js/ │ ├── main.js # 游戏主逻辑、初始化 │ ├── physics.js # 物理世界封装 │ └── audio.js # 音效管理 ├── css/ │ └── style.css # 基本样式 └── assets/ ├── audio/ # 存放背景音乐和音效文件 └── textures/ # 存放纹理图片（可选）

在给 AI 的提示词中，可以要求它按照此结构生成代码，或者先生成单一文件，我们再手动进行模块化拆分。

3. 构建基础 3D 场景：从提示词到可运行代码

让我们从零开始，通过一系列提示词，构建出游戏的原型。

3.1 第一轮提示词：生成静态 3D 场景

首先，我们请求 AI 创建一个最基础的 3D 场景。

提示词示例：

角色：你是一位熟悉 Three.js 的前端开发者。任务：创建一个包含以下元素的、在浏览器中全屏显示的 3D 场景：
一个透视摄像机，位置在 (0, 5, 10)，看向原点。
白色的方向光从上方照射。
一个绿色的立方体（代表玩家）位于世界坐标 (0, 0, 0)。
一个灰色的平面网格作为地面。
使用 OrbitControls 允许用户用鼠标旋转/缩放场景。要求：输出一个完整的 HTML 文件代码，通过 CDN 引入 three.js 和 OrbitControls。代码需包含窗口大小变化的响应式处理。

AI 可能生成的核心代码片段：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Basic 3D Scene</title> <style> body { margin: 0; overflow: hidden; } canvas { display: block; } </style> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/controls/OrbitControls.min.js"></script> <script> // 初始化场景、摄像机、渲染器 const scene = new THREE.Scene(); scene.background = new THREE.Color(0x87CEEB); // 天空蓝背景 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 5, 10); camera.lookAt(0, 0, 0); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 灯光 const light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(5, 10, 5); scene.add(light); scene.add(new THREE.AmbientLight(0x404040)); // 环境光 // 玩家（绿色立方体） const playerGeometry = new THREE.BoxGeometry(1, 1, 1); const playerMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00 }); const player = new THREE.Mesh(playerGeometry, playerMaterial); scene.add(player); // 地面 const groundGeometry = new THREE.PlaneGeometry(20, 20); const groundMaterial = new THREE.MeshPhongMaterial({ color: 0x888888, side: THREE.DoubleSide }); const ground = new THREE.Mesh(groundGeometry, groundMaterial); ground.rotation.x = -Math.PI / 2; // 使平面水平 scene.add(ground); // 控制器 const controls = new THREE.OrbitControls(camera, renderer.domElement); // 动画循环 function animate() { requestAnimationFrame(animate); controls.update(); // 仅在需要时更新控制器 renderer.render(scene, camera); } animate(); // 窗口大小响应 window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); </script> </body> </html>

将这段代码保存为index.html并用本地服务器打开，你就能看到一个可交互的 3D 场景，包含一个绿色立方体和灰色地面。这就是我们的“粗糙色块”。

3.2 第二轮提示词：添加玩家控制与简单交互

接下来，我们需要让立方体（玩家）能够被控制，并添加一些简单的游戏逻辑，比如生成下落的球体。

提示词示例：

基于之前的代码，进行以下增强：
移除 OrbitControls，改为用鼠标的 X 轴位置控制绿色立方体在水平方向（X轴）移动。立方体应被限制在地面范围内。
每隔 2 秒，在屏幕上方随机 X 位置生成一个红色的球体（THREE.SphereGeometry），并让它沿 Y 轴向下运动。
当球体的 Y 坐标低于地面时，将其从场景中移除。
添加一个简单的碰撞检测：如果球体与立方体的包围盒相交，则从场景中移除该球体，并在控制台输出“得分！”。请输出修改后的完整代码。

关键修改与新增代码：

// ... 前面的初始化代码（移除OrbitControls）... const playerSpeed = 0.1; const fallingSpeed = 0.05; const balls = []; // 存储所有下落球体的数组 let score = 0; // 鼠标移动事件监听 document.addEventListener('mousemove', (event) => { // 将鼠标位置映射到世界坐标（简化处理） const x = (event.clientX / window.innerWidth) * 2 - 1; player.position.x = THREE.MathUtils.clamp(x * 10, -9, 9); // 限制移动范围 }); // 生成球体的函数 function createBall() { const geometry = new THREE.SphereGeometry(0.5, 16, 16); const material = new THREE.MeshPhongMaterial({ color: 0xff0000 }); const ball = new THREE.Mesh(geometry, material); ball.position.x = (Math.random() - 0.5) * 18; // 随机X位置 ball.position.y = 10; scene.add(ball); balls.push(ball); } setInterval(createBall, 2000); // 每2秒生成一个 // 修改动画循环，更新球体位置并检测碰撞 function animate() { requestAnimationFrame(animate); // 更新所有球体位置 for (let i = balls.length - 1; i >= 0; i--) { const ball = balls[i]; ball.position.y -= fallingSpeed; // 碰撞检测（简易AABB包围盒） const playerBox = new THREE.Box3().setFromObject(player); const ballBox = new THREE.Box3().setFromObject(ball); if (playerBox.intersectsBox(ballBox)) { scene.remove(ball); balls.splice(i, 1); score++; console.log(`得分！当前分数：${score}`); } // 移除落到地面以下的球体 if (ball.position.y < -1) { scene.remove(ball); balls.splice(i, 1); console.log("球体落地，游戏应结束，此处暂仅移除"); } } renderer.render(scene, camera); } animate();

现在，游戏有了基本的交互：鼠标控制玩家移动，自动生成下落的球体，并实现了简单的几何碰撞检测。但这还不是真正的物理模拟。

4. 集成物理引擎与音频系统

为了让游戏感觉更真实，我们需要用物理引擎替代简单的位置更新和基础碰撞检测，并加入声音反馈。

4.1 第三轮提示词：引入 Cannon.js 物理引擎

提示词示例：

现在，请将游戏升级为使用 Cannon.js 物理引擎。
通过 CDN 引入 Cannon.js。
创建一个物理世界，设置重力为 (0, -9.82, 0)。
为玩家立方体和地面创建对应的刚体（cannon.Body），并设置质量、形状和位置。地面应为静态物体（质量为0）。
为每个下落的红色球体创建对应的刚体。
在动画循环中，同步 Three.js 网格与 Cannon.js 刚体的位置和旋转。
使用物理世界的内置碰撞检测，当球体刚体与玩家刚体发生碰撞时，移除球体并得分。请输出整合后的代码，注意处理好 Three.js 对象与 Cannon.js 刚体的关联。

关键实现步骤与代码：

引入库并初始化物理世界：

<script src="https://cdn.jsdelivr.net/npm/cannon-es@0.20.0/dist/cannon-es.js"></script> <script> // 物理世界 const world = new CANNON.World(); world.gravity.set(0, -9.82, 0); // 设置重力 world.broadphase = new CANNON.NaiveBroadphase(); world.solver.iterations = 10; </script>

创建物理地面和玩家：

// 物理地面 const groundBody = new CANNON.Body({ mass: 0, // 静态物体 shape: new CANNON.Plane(), }); groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2); world.addBody(groundBody); // 物理玩家 const playerShape = new CANNON.Box(new CANNON.Vec3(0.5, 0.5, 0.5)); // 半边长 const playerBody = new CANNON.Body({ mass: 5, shape: playerShape, position: new CANNON.Vec3(0, 0.5, 0), // 初始位置 }); playerBody.linearDamping = 0.9; // 增加阻尼，使其移动更“重” world.addBody(playerBody); // 将 Three.js 的 player 网格与物理刚体关联 player.userData.physicsBody = playerBody;

修改玩家控制，作用于物理刚体：

document.addEventListener('mousemove', (event) => { const targetX = (event.clientX / window.innerWidth) * 2 - 1; const worldTargetX = THREE.MathUtils.clamp(targetX * 10, -9, 9); // 直接设置刚体的位置，或施加力/速度 playerBody.position.x = worldTargetX; playerBody.velocity.x = 0; // 清除X轴速度，防止惯性滑动 });

创建带物理的球体：

function createBall() { // Three.js 网格 const geometry = new THREE.SphereGeometry(0.5, 16, 16); const material = new THREE.MeshPhongMaterial({ color: 0xff0000 }); const ballMesh = new THREE.Mesh(geometry, material); const xPos = (Math.random() - 0.5) * 18; ballMesh.position.set(xPos, 10, 0); scene.add(ballMesh); // Cannon.js 刚体 const ballShape = new CANNON.Sphere(0.5); const ballBody = new CANNON.Body({ mass: 1, shape: ballShape, position: new CANNON.Vec3(xPos, 10, 0), }); world.addBody(ballBody); // 关联 ballMesh.userData.physicsBody = ballBody; balls.push({ mesh: ballMesh, body: ballBody }); // 碰撞事件监听 ballBody.addEventListener('collide', (event) => { if (event.body === playerBody) { // 球体碰到玩家 world.removeBody(ballBody); scene.remove(ballMesh); // 从balls数组中移除 const index = balls.findIndex(b => b.body === ballBody); if (index > -1) balls.splice(index, 1); score++; console.log(`物理碰撞得分！当前分数：${score}`); // 这里可以触发音效 } }); }

修改动画循环，更新物理世界并同步网格：

const clock = new THREE.Clock(); let delta; function animate() { requestAnimationFrame(animate); delta = clock.getDelta(); // 步进物理世界 if (delta > 0.1) delta = 0.1; // 防止过大时间步导致物理不稳定 world.step(delta); // 同步玩家网格位置 player.position.copy(playerBody.position); player.quaternion.copy(playerBody.quaternion); // 同步所有球体网格位置 for (let i = balls.length - 1; i >= 0; i--) { const ball = balls[i]; ball.mesh.position.copy(ball.body.position); ball.mesh.quaternion.copy(ball.body.quaternion); } renderer.render(scene, camera); } animate();

现在，球体的下落、碰撞都由物理引擎计算，运动更加自然。碰撞检测也更为准确和高效。

4.2 第四轮提示词：集成 Howler.js 添加背景音乐与音效

提示词示例：

最后，请使用 Howler.js 为游戏添加声音。
通过 CDN 引入 Howler.js。
准备两个音频文件：background.mp3（背景音乐）和collision.wav（碰撞音效）。假设它们位于assets/audio/目录下。
在游戏开始时，循环播放背景音乐，并允许用户通过一个按钮控制背景音乐的播放/暂停。
在球体与玩家发生物理碰撞时，播放collision.wav音效。请更新代码，集成音频管理功能。

音频集成代码：

引入库并定义音频管理器：

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>

// 音频管理 const audioContext = { bgMusic: null, collisionSound: null, init: function() { // 背景音乐，循环播放 this.bgMusic = new Howl({ src: ['assets/audio/background.mp3'], loop: true, volume: 0.5, }); // 碰撞音效 this.collisionSound = new Howl({ src: ['assets/audio/collision.wav'], volume: 0.7, }); }, playBgMusic: function() { if (this.bgMusic && !this.bgMusic.playing()) { this.bgMusic.play(); } }, pauseBgMusic: function() { if (this.bgMusic && this.bgMusic.playing()) { this.bgMusic.pause(); } }, playCollision: function() { if (this.collisionSound) { this.collisionSound.play(); } } }; audioContext.init();

添加简单的音乐控制 UI：

<!-- 在 body 内添加 --> <div style="position: absolute; top: 10px; left: 10px; z-index: 100;"> <button id="musicToggle">背景音乐：开</button> <div>得分: <span id="scoreDisplay">0</span></div> </div>

// 音乐控制逻辑 const musicToggleBtn = document.getElementById('musicToggle'); const scoreDisplay = document.getElementById('scoreDisplay'); let isMusicPlaying = true; audioContext.playBgMusic(); // 游戏开始播放音乐 musicToggleBtn.addEventListener('click', () => { isMusicPlaying = !isMusicPlaying; if (isMusicPlaying) { audioContext.playBgMusic(); musicToggleBtn.textContent = '背景音乐：开'; } else { audioContext.pauseBgMusic(); musicToggleBtn.textContent = '背景音乐：关'; } });

在碰撞事件中触发音效并更新 UI：

ballBody.addEventListener('collide', (event) => { if (event.body === playerBody) { // ... 移除物理体和网格的代码 ... score++; scoreDisplay.textContent = score; // 更新UI console.log(`物理碰撞得分！当前分数：${score}`); audioContext.playCollision(); // 播放碰撞音效 } });

至此，我们通过四轮逐步细化的提示词，引导 AI 生成了代码，将一个静态的 3D 色块场景，演进为一个具备鼠标控制、物理模拟、碰撞检测、分数统计和背景音乐/音效的完整可交互游戏原型。

5. 运行验证、常见问题与排查

5.1 运行验证步骤

文件准备：将最终生成的完整 HTML 代码保存为index.html。在项目根目录创建assets/audio/文件夹，并放入background.mp3和collision.wav文件（可从免费音效网站获取测试文件）。
启动服务器：在项目根目录打开终端，运行http-server -p 8080。
浏览器访问：打开 Chrome 浏览器，访问http://localhost:8080。
功能验证：
- 视觉：看到 3D 场景，包含绿色立方体（玩家）、灰色地面和蓝色背景。
- 控制：移动鼠标，绿色立方体应跟随鼠标在水平方向移动。
- 生成：每隔约 2 秒，屏幕上方随机位置出现红色球体并自然下落。
- 物理：球体下落应有加速度（重力效果），碰到玩家后应被“弹开”或立即消失（取决于物理参数）。
- 碰撞反馈：球体碰到玩家时，控制台应打印得分信息，UI 上的分数更新，并听到短暂的碰撞音效。
- 音乐：页面加载后应自动播放背景音乐，点击按钮可暂停/播放。

5.2 常见问题排查表

在整合和运行 AI 生成代码时，你可能会遇到以下问题：

问题现象	可能原因	检查与解决方案
页面空白，控制台报错`THREE is not defined`	Three.js 库未正确加载。	检查 CDN 链接是否有效、网络是否通畅。尝试在浏览器中直接打开 CDN 链接看是否能访问。
球体不显示或物理模拟异常	Cannon.js 库未加载或版本不兼容。	检查 Cannon.js CDN 链接。确保物理世界`world.step()`在动画循环中被调用。检查刚体形状与网格几何尺寸是否匹配（如 Box 的半边长）。
没有声音	Howler.js 未加载或音频文件路径错误。	检查浏览器控制台 Network 标签页，看音频文件是否 404。确保使用本地服务器而非`file://`协议。检查音频文件格式浏览器是否支持（MP3, OGG, WAV）。
碰撞检测不生效	Three.js 网格与 Cannon.js 刚体位置未同步。碰撞事件未正确绑定。	在动画循环中确认`mesh.position.copy(body.position)`被执行。检查`addEventListener(‘collide’, …)`是否绑定到了正确的刚体上。使用`console.log`在碰撞事件函数内打印信息，确认事件是否触发。
玩家控制不跟手或滑动	物理刚体的阻尼或速度设置不当。	调整`playerBody.linearDamping`值（如 0.9）。在鼠标移动事件中，尝试使用`playerBody.velocity.x = (targetX - playerBody.position.x) * 10;`施加速度而非直接设置位置，使其运动更平滑。
性能低下，页面卡顿	球体生成后未及时清理，导致场景中对象过多。	确保球体落地或碰撞后被从`world`、`scene`和`balls`数组中移除。可以考虑设置一个最大球体数量限制。
在移动设备上无法控制	控制逻辑仅针对鼠标事件。	增加触摸事件监听 (`touchmove`)，将`event.touches[0].clientX`类似地映射为控制信号。

5.3 提示词迭代中的关键检查点

库依赖：每次提示词要求新增功能（如物理、音频），务必在提示词中明确指定需要引入的新库及其 CDN。
变量作用域：AI 生成的代码有时会重复声明变量或产生作用域冲突。注意检查const/let的使用，确保在函数外声明的全局变量（如scene,camera,world,balls）能被所有函数访问。
生命周期管理：对于动态创建的对象（如球体），必须有对应的销毁逻辑（从物理世界、渲染场景、管理数组中移除），防止内存泄漏。
资源加载：提示 AI 生成代码时，对于外部资源（如图片、音频），最好假设它们已存在，并给出相对路径。实际开发中需确保路径正确，并考虑加载完成回调。

6. 最佳实践与扩展方向

6.1 提示词设计最佳实践

分而治之：不要试图用一个巨型提示词生成所有功能。像本文演示的那样，分阶段（渲染 -> 交互 -> 物理 -> 音频 -> UI）进行迭代。
提供上下文：在后续迭代的提示词中，可以粘贴上一轮生成的关键代码片段作为上下文，让 AI 知道在何处修改。
明确错误处理：可以要求 AI 在代码中加入基本的错误处理，例如资源加载失败、物理引擎初始化失败时的回退或日志。
指定代码风格：如果你有偏好，可以在初始提示词中说明，如“请使用 ES6+ 语法”、“请为函数和变量使用有意义的命名”。

6.2 工程化扩展建议

当原型验证通过后，若想将其发展为更正式的项目，应考虑：

模块化：将main.js、physics.js、audio.js、game.js等逻辑拆分到不同文件，使用 ES6 模块进行组织。
构建流程：引入 Webpack 或 Vite 等构建工具，处理依赖管理、代码压缩、资源打包。
状态管理：使用一个集中的状态对象或类来管理游戏状态（分数、生命值、游戏状态），避免状态分散。
资源管理：实现一个资源加载器，预加载所有纹理和音频，并在加载完成后启动游戏。
输入抽象：将鼠标、触摸、键盘等输入方式抽象为一个统一的输入管理器，提高代码可维护性和多平台支持能力。
使用游戏引擎：对于更复杂的游戏，可以考虑直接使用 Babylon.js、PlayCanvas 或 Unity WebGL 等更成熟的游戏引擎，它们内置了更完善的物理、音频、资源管线和工作流。