# 使用OpenClaw开发贪吃蛇
对于希望快速开发前端小游戏或工具页面的开发者来说，手动编写大量代码不仅耗时而且容易出错。使用ModelArts Notebook中的OpenClaw工具，可以通过自然语言提示词快速生成并迭代一个网页版贪吃蛇游戏。
OpenClaw是ModelArts Notebook内置的AI Agent开发工具，能够根据用户输入的自然语言提示词自动生成代码文件。其工作原理是：用户在聊天界面输入需求描述，OpenClaw调用大模型理解需求并生成代码，将代码文件保存到Notebook指定目录，并提供可访问的URL地址供用户预览效果。通过使用OpenClaw，开发者可以显著提高开发效率，减少错误，快速迭代和测试应用。
![](https://support.huaweicloud.com/bestpractice-modelarts/public_sys-resources/warning_3.0-zh-cn.png)
Notebook是容器运行时环境，运行环境会在关机时被清理。请通过保存镜像及时保留npm install、apt-get install、yum install、pip install和OpenClaw安装后的配置对话等，以避免Notebook运行环境中的数据或对话session丢失。关于如何保存镜像，请参见[保存镜像](https://support.huaweicloud.com/devtool-modelarts/devtool-modelarts_0008.html)。
#### 约束限制
Notebook OpenClaw功能仅支持"华北-北京四"、"西南-贵阳一"、"华北-乌兰察布一"、"华东-上海一"和"华南-广州"区域。
#### 前提条件
已完成[在Notebook中安装配置OpenClaw](https://support.huaweicloud.com/bestpractice-modelarts/modelarts_10_0038.html)。
#### 计费说明
- 在ModelArts开发环境中运行Notebook实例时，会使用计算资源和存储资源，产生计算资源和存储资源的累计值计费。计费详情请参见[开发环境计费项](https://support.huaweicloud.com/price-modelarts/price-modelarts-0010.html)。
- OpenClaw本身不收费，但调用大模型API会产生费用。具体计费方式取决于您选择的API Provider。
 
#### 在OpenClaw生成贪吃蛇
1. 登录[ModelArts管理控制台](https://console.huaweicloud.com/modelarts/)，在左侧导航栏按需选择以下操作。
   - 新版控制台：选择"模型开发与训练 \> Notebook"，进入"Notebook"页面。
   
   - 旧版控制台：选择"开发空间 \> Notebook"，进入"Notebook"页面。
    
2. 在"状态"为"运行中"的Notebook实例的操作列，单击"接入环境"，在"接入方式"对话框的"WebIDE"页签，单击"JupyterLab 接入"右侧的"接入"。
3. 在"ModelArts Launcher"页面的"AI Agent"区域，单击"OpenClaw"，打开OpenClaw。
4. 在OpenClaw左侧导航栏，单击"聊天"，输入生成贪吃蛇游戏的提示词。示例如下：
   ```
   请生成一个网页版贪吃蛇游戏，要求如下：
   ## 文件输出
   - 生成的HTML文件存放路径：/home/ma-user/work/game/claw/
   - 如路径不存在需自动创建目录
   ## 核心要求
   - 单个HTML文件，浏览器直接打开即可游玩，无需任何外部依赖
   - 包含完整的游戏循环：开始界面 → 游戏进行 → 游戏结束 → 重新开始
   ## 浏览器兼容性（必须严格遵守）
   - **禁止使用** `ctx.roundRect()`，需手动实现圆角矩形绘制函数
   - **禁止使用** ES6+ 语法：箭头函数 `=>`、模板字符串、`let/const`（用 `var` + `function`）
   - **禁止使用** `Set`、`Map` 等新对象（用普通对象 `{}` 替代）
   - **禁止使用** `forEach`（用 `for` 循环替代）
   - `localStorage` 必须用 `try/catch` 包裹，因为在 iframe/沙盒环境中会被禁止并抛出异常导致整个脚本崩溃
   - 所有事件绑定使用 `onclick`/`onkeydown` 属性或 `addEventListener`，确保不依赖脚本执行顺序
   ## 游戏功能
   - 方向键/WASD控制蛇的移动方向
   - 空格键暂停/继续
   - 吃到食物蛇身变长，得分+1
   - 撞墙或撞自己游戏结束
   - 随得分增加逐步加速
   - 最高分持久化存储（localStorage 安全降级）
   - 手机端支持触屏滑动控制
   ## 界面要求
   - 深色主题，Canvas绘制游戏区域
   - 开始界面和游戏结束界面用overlay覆盖层，按钮触发游戏开始/重启
   - 显示当前得分和最高分
   - 蛇身渐变色 + 头部带眼睛（朝向移动方向）
   - 食物带发光效果
   ## 调试保障
   - 页面右上角放一个JS运行状态指示灯：默认红色"JS 未运行"，脚本加载后变绿色"JS 正常"
   - 整个 JS 代码用`try/catch`包裹，出错时在页面显示红色错误信息（含`err.message`），便于排查
   ## 如何打开游戏
   生成完成后，需告知用户以下打开方式（按优先级排序）：
   1. **HTTP服务 + 浏览器访问（推荐）**：在HTML文件所在目录启动HTTP服务（如 `python3 -m http.server 8080`），然后通过浏览器新标签页访问。在ModelArts Notebook环境中，访问地址格式为：
      `https://<Notebook域名>/<Notebook实例ID>/proxy/8080/snake.html`
      需要从环境变量 `BASE_URL` 和 `LABCONSOLE_URL` 中提取域名和实例ID来拼接完整URL。
   2. **下载到本地打开**：将HTML文件下载到本地电脑，双击用浏览器直接打开。
   3. **不可行的方式**：通过Notebook文件管理器单击打开HTML文件——该方式在沙盒iframe中渲染，JavaScript被完全禁止执行，游戏无法运行。
   ```
   图1生成网页版的贪吃蛇游戏   
   ![](https://support.huaweicloud.com/bestpractice-modelarts/figure/zh-cn_image_0000002681680705.png "点击放大") 
5. 等待几分钟后，贪吃蛇游戏生成完成，聊天界面会显示可访问的URL链接。单击URL访问游戏地址，在浏览器中打开游戏。
   图2贪吃蛇生成完成   
   ![](https://support.huaweicloud.com/bestpractice-modelarts/figure/zh-cn_image_0000002651801660.png "点击放大")
   图3贪吃蛇界面   
   ![](https://support.huaweicloud.com/bestpractice-modelarts/figure/zh-cn_image_0000002681841533.gif "点击放大") 
 
#### 优化贪吃蛇游戏
体验贪吃蛇游戏之后，您可能会发现一些需要改进的地方（例如贪吃蛇移动有点快，且没有难度等级）。OpenClaw支持通过追加提示词的方式迭代优化已生成的代码，无需手动修改代码文件。
1. 在OpenClaw聊天框输入以下提示词，对贪吃蛇游戏进行优化。
   ```
   对贪吃蛇游戏进行优化：
   1、设定难度等级：简单、中等、困难。难度等级以贪吃蛇的速度作为区分
   2、开始游戏的时候，让用户选择难度
   ```
   
2. 等待几分钟，游戏优化完成，聊天界面会显示更新后的URL链接。打开URL地址体验新功能"选择难度"，选择不同难度后，蛇的移动速度应有明显差异。
   图4游戏优化完成   
   ![](https://support.huaweicloud.com/bestpractice-modelarts/figure/zh-cn_image_0000002681762089.png "点击放大")
   图5优化后的贪吃蛇界面   
   ![](https://support.huaweicloud.com/bestpractice-modelarts/figure/zh-cn_image_0000002651882298.png) 
3. 您可以根据以下功能方向继续优化贪吃蛇游戏，在OpenClaw聊天框中输入对应的提示词即可。
   
   | **功能方向** | **适用场景**   | **提示词示例**                   |
   |:---|:---|:---|
   | 双击加速     | 希望增加操作技巧性。 | 双击相同方向键，贪吃蛇临时加速3秒。          |
   | 障碍物模式    | 希望提升游戏挑战性。 | 在游戏区域随机生成3个障碍物，蛇碰到障碍物则游戏结束。 |
   | 特殊果实     | 希望丰富游戏玩法。  | 增加一种金色果实，吃到后加20分但不增长身体长度。   |
      
   
 
#### 常见问题
- **OpenClaw生成代码后，URL链接无法访问怎么办？**
  请检查Notebook实例状态是否为"运行中"。如果实例已停止，请重新启动实例并再次尝试。如仍无法访问，请在OpenClaw聊天框中重新发送提示词生成。
  
- **优化后的代码没有生效怎么办？**
  请确认OpenClaw聊天界面已显示"代码更新完成"的提示，并使用新生成的URL访问（旧URL可能不会自动更新）。如果浏览器缓存了旧页面，请按Ctrl+F5强制刷新。
  
 
#### 相关文档
- [使用OpenClaw快速集成飞书AI助手](https://support.huaweicloud.com/bestpractice-modelarts/modelarts_10_0046.html)
- [使用AI助手在线管理Notebook](https://support.huaweicloud.com/bestpractice-modelarts/modelarts_10_0040.html)
- [使用AI助手自动保存Notebook镜像](https://support.huaweicloud.com/bestpractice-modelarts/modelarts_10_0042.html)
- [使用AI助手在线部署推理服务](https://support.huaweicloud.com/bestpractice-modelarts/modelarts_10_0043.html)
- [使用AI助手在线创建训练作业](https://support.huaweicloud.com/bestpractice-modelarts/modelarts_10_0044.html)
- [使用AI助手在线管理专属资源池](https://support.huaweicloud.com/bestpractice-modelarts/modelarts_10_0045.html)
- [使用AI助手处理ModelArts典型开发与运维场景](https://support.huaweicloud.com/bestpractice-modelarts/modelarts_20_00026.html)