从一句话到可玩 Demo：使用华为云码道对话创作网页游戏实践

一、前言

以前开发一个网页小游戏，即使功能并不复杂，也需要经历需求分析、编写 HTML、设计 CSS 样式、实现 JavaScript 逻辑、调试程序等步骤。对于有编程经验的开发者来说，这是一项基础工作；但对于初学者而言，往往需要花费不少时间才能完成一个可以正常运行的作品。

随着 AI 编程工具的发展，我们可以尝试一种新的开发方式：用自然语言描述需求，让 AI 帮助生成代码，再通过多轮对话持续完善作品。

华为云码道 CodeArts 代码智能体支持通过自然语言发起开发任务，并根据任务描述生成相应的代码实现。码道网页端可以直接通过浏览器使用；对于需要操作本地项目文件、反复运行和调试的场景，也可以使用码道桌面端或 CLI 等开发形态。

本文以开发一个 HTML5 贪吃蛇小游戏为例，完整记录从需求描述、代码生成到功能迭代和浏览器验证的实践过程。

二、实践目标与开发思路

本次实践不追求复杂的游戏架构，而是希望通过自然语言对话，快速完成一个能够运行、交互完整、界面美观的网页游戏。

最终目标包括以下功能：

• 基础玩法： 控制蛇移动，吃到食物后增长，并累计得分。
• 操作方式： 支持键盘方向键和 WASD 按键。
• 游戏状态： 支持开始、暂停、继续和重新开始。
• 碰撞检测： 蛇碰到自身或游戏边界时结束游戏。
• 界面展示： 显示游戏区域、当前分数和最高分。
• 视觉体验： 使用简洁的游戏布局、清晰的颜色区分和适当的动效。

技术上采用原生 HTML、CSS 和 JavaScript，将代码集中在一个 snake.html 文件中，不依赖外部框架和在线资源，方便保存、查看源码和在浏览器中运行。

整个开发流程可以概括为：

需求描述 → AI 生成 → 浏览器验证 → 对话迭代 → 功能测试。

三、第一步：进入华为云码道并创建任务

首先，进入华为云码道 CodeArts 相关页面，登录账号并按照当前页面提示完成所需的开通或授权操作。

如果希望快速体验，可以优先使用码道网页端，无须专门安装桌面客户端。

进入工作界面后，选择“新建任务”，在对话输入框中描述需要开发的内容，然后发送任务。

这里需要注意：不要只输入“帮我写一个游戏”。这样的描述过于简单，AI 可能只生成基本玩法，却遗漏暂停、重新开始、最高分等细节。

为了提高首次生成的完整度，应尽量把游戏目标、操作方式、功能要求和技术约束写清楚。

四、第二步：通过第一轮对话生成游戏

在码道的任务输入框中，输入以下提示词。

实战提示词一：创建完整的贪吃蛇游戏

请帮我开发一个完整的 HTML5 贪吃蛇网页小游戏。

一、技术要求
1. 使用原生 HTML、CSS 和 JavaScript。
2. 将所有代码写在一个 snake.html 文件中。
3. 不使用前端框架，不依赖外部 CDN 或在线资源。
4. 页面打开后可以直接开始游戏。

二、游戏功能
1. 使用键盘方向键或 WASD 控制蛇的移动。
2. 蛇吃到食物后身体增长，分数增加。
3. 蛇不能直接反向移动。
4. 蛇碰到自身或游戏边界后，游戏结束。
5. 提供开始、暂停、继续和重新开始按钮。
6. 显示当前分数、最高分和游戏结束提示。
7. 最高分使用浏览器 localStorage 保存。

三、界面设计
1. 使用现代、简洁的游戏风格。
2. 页面居中布局，游戏区域清晰醒目。
3. 使用不同颜色区分蛇、食物和背景。
4. 按钮具有悬停和点击反馈。
5. 页面适配常见桌面浏览器。

四、代码质量
1. 将游戏初始化、移动、碰撞检测、
   分数更新等逻辑合理拆分。
2. 避免重复启动多个游戏定时器。
3. 游戏结束后停止移动更新。
4. 为关键逻辑添加必要的注释。
5. 完成后说明如何运行和操作游戏。

请先检查需求是否完整，再实现代码。
如果能够直接创建文件，请生成 snake.html；
如果当前环境只能返回代码，请提供完整的文件内容。

这段提示词把游戏需求拆分成技术、功能、界面和代码质量四个部分，既能减少遗漏，也有助于后续针对具体问题进行修改。

发送后，等待码道完成任务。检查其输出，确认是否已经生成完整代码、文件或相应的实现方案。

这里不需要一开始就追求完美。第一轮的主要目标，是得到一个具备基本玩法的可运行版本。

五、第三步：检查初始版本并进行功能迭代

获得第一版代码后，不要只看代码是否生成成功，还需要验证游戏是否真正可玩。

如果当前码道使用方式可以直接生成项目文件，就检查对应文件；如果对话返回的是代码，则将完整内容保存为 snake.html。

通过浏览器打开文件，测试蛇能否移动、食物能否正常生成、分数是否变化，以及游戏结束后能否重新开始。

在验证过程中发现问题时，继续沿用当前会话进行对话，比重新生成整个项目更容易保持需求上下文。

1. 第二轮对话：优化游戏视觉效果

初始版本的功能可能已经正常，但界面比较普通。此时可以提出明确的视觉优化要求。

提示词示例：

请在现有贪吃蛇游戏的基础上优化 UI，
保留所有已经实现的游戏功能。

具体要求：
1. 采用深色背景和青绿色霓虹主题。
2. 游戏区域使用适度的圆角和阴影。
3. 将当前分数和最高分设计成清晰的状态卡片。
4. 优化开始、暂停和重新开始按钮。
5. 添加适度的过渡动画，但不要影响游戏响应速度。
6. 保证文字与背景之间有足够的对比度。

请优先修改 CSS 和必要的界面结构，
不要随意重写游戏核心逻辑。
完成后说明修改了哪些内容。

这一轮的重点是限定修改范围。我们希望改变的是界面，而不是让原本正常工作的移动、碰撞和计分逻辑发生意外变化。

2. 第三轮对话：补充移动端操作

如果希望游戏不局限于电脑键盘操作，可以继续添加触控控制功能。

提示词示例：

请继续完善现有游戏，增加移动端操作支持。

要求：
1. 在游戏区域下方增加上下左右四个控制按钮。
2. 支持手机和平板触控操作。
3. 可以通过滑动手势改变蛇的移动方向。
4. 防止快速连续点击导致蛇直接反向移动。
5. 调整页面布局，避免按钮挤压游戏区域。
6. 兼容桌面端原有键盘操作。

请尽量在现有代码上增量修改，
不要删除原有计分、暂停和重新开始功能。
修改后检查事件绑定是否重复。

这个阶段能够体现 AI 对话开发的优势：不需要一次把所有细节想清楚，可以先完成核心玩法，再逐步扩展交互体验。

3. 第四轮对话：修复问题并提升稳定性

即使代码由 AI 生成，也不意味着程序一定没有问题。尤其是涉及定时器、键盘事件、触控事件和游戏状态切换时，更应该主动检查。

例如，可以提出：

请检查当前贪吃蛇游戏的运行逻辑，
重点排查以下问题：

1. 快速点击暂停和继续时，是否会启动多个定时器。
2. 游戏结束后，蛇是否仍然继续移动。
3. 重新开始后，分数和游戏状态能否正确重置。
4. 蛇移动时是否可能穿过自身。
5. 食物是否可能生成在蛇的身体上。
6. 本地最高分能否正确保存和读取。

请逐项检查现有代码，修复能够确认的问题。
尽量只修改必要部分，并说明修复原因。
不要仅通过文字声称测试通过；
能够运行测试时，请执行相应验证，
否则请明确列出尚未验证的情况。

相比“帮我修复 Bug”这样的宽泛指令，这种逐项检查的方式更容易形成清晰的问题清单，也方便人工复核修改结果。

六、第四步：运行游戏并验证成果

代码生成和优化完成后，就进入最终验证阶段。

如果使用码道 CLI 或桌面端的本地工作目录开发，可以找到生成的 snake.html 文件，然后使用浏览器打开。华为云官方 CLI 快速入门也提供了通过对话生成贪吃蛇 HTML 文件、在浏览器中预览，并继续对话修改蛇的颜色的示例。

如果使用网页端进行任务创作，则依据当前页面实际提供的文件或代码结果进行保存，再在本地浏览器中打开。网页端和本地开发环境的文件操作方式可能不同，不应将代码已经生成等同于游戏已经完成部署。

运行后，建议按照以下清单进行检查。

如果某一项验证没有通过，就将实际表现、预期结果和复现步骤告诉码道，请它针对问题定位和修改。

例如：

我发现点击暂停后，再点击继续，
蛇的移动速度明显加快。

请检查游戏循环和定时器的实现，
分析问题产生的原因，
在保留现有功能的前提下修复。

修复后说明修改位置，
并提供建议的回归测试步骤。

这样的反馈比单纯要求重新生成整个游戏更具有针对性，可以减少不必要的代码改动。

七、实践总结：怎样让 AI 更好地参与网页游戏创作？

通过这次实践，可以总结出几个值得复用的经验。

第一，需求越明确，首次生成越容易接近预期。 提示词应包含游戏目标、操作方式、功能清单、技术约束以及交付形式。对于单页小游戏，可以明确要求所有代码集中在一个 HTML 文件中。

第二，采用多轮迭代，而不是追求一次生成全部完成。 先实现核心玩法，再调整视觉效果，之后增加新功能并检查边界情况。这种方式能够让每次对话都有明确目标，也方便定位问题。

第三，修改已有作品时，要明确需要保留的功能。 例如要求“保留现有游戏逻辑，仅修改 CSS”，可以帮助限制修改范围，但仍然需要检查改动是否影响其他功能。

第四，AI 生成代码后，仍然需要实际运行和测试。 代码结构看起来完整，不代表交互一定正确。尤其是碰撞检测、定时器管理、输入事件和浏览器存储等环节，应通过实际操作进行验证。

第五，要区分本地运行和正式上线。 在浏览器中打开 HTML 文件，只能说明本地演示可以运行，并不代表游戏已经对外发布。如果需要让其他人通过网址访问，还需要选择合适的静态网站托管方式，并完成部署和访问验证。

八、结语

通过华为云码道 CodeArts 的自然语言对话开发方式，一个原本需要手动编写多段代码的贪吃蛇小游戏，可以按照“描述需求、生成代码、验证结果、持续迭代”的流程逐步实现。

这种方式并不是让开发者完全放弃代码，而是把更多精力从重复性的基础编写转移到需求表达、方案选择、交互设计和质量验证上。

对于初学者，可以利用它理解一个网页游戏由哪些模块构成；对于有经验的开发者，则可以把它作为快速验证创意、构建原型和探索新玩法的辅助工具。

从一个简单的贪吃蛇开始，后续还可以尝试开发打砖块、记忆翻牌、扫雷、数字合并、答题闯关等小游戏。

让想法先变成可以运行的作品，再通过不断对话和测试把作品打磨好，这正是 AI 辅助开发最值得实践的地方。