文档首页/ 魔坊（ModelArts）模型训推平台/ 最佳实践/ Notebook AI助手最佳实践/ Notebook OpenClaw最佳实践/ 使用OpenClaw开发贪吃蛇
更新时间：2026-09-01 GMT+08:00
查看PDF
分享

使用OpenClaw开发贪吃蛇

对于希望快速开发前端小游戏或工具页面的开发者来说，手动编写大量代码不仅耗时而且容易出错。使用ModelArts Notebook中的OpenClaw工具，可以通过自然语言提示词快速生成并迭代一个网页版贪吃蛇游戏。

OpenClaw是ModelArts Notebook内置的AI Agent开发工具，能够根据用户输入的自然语言提示词自动生成代码文件。其工作原理是：用户在聊天界面输入需求描述，OpenClaw调用大模型理解需求并生成代码，将代码文件保存到Notebook指定目录，并提供可访问的URL地址供用户预览效果。通过使用OpenClaw，开发者可以显著提高开发效率，减少错误，快速迭代和测试应用。

Notebook是容器运行时环境，运行环境会在关机时被清理。请通过保存镜像及时保留npm install、apt-get install、yum install、pip install和OpenClaw安装后的配置对话等，以避免Notebook运行环境中的数据或对话session丢失。关于如何保存镜像，请参见保存镜像。

约束限制

Notebook OpenClaw功能仅支持“华北-北京四”、“西南-贵阳一”、“华北-乌兰察布一”、“华东-上海一”和“华南-广州”区域。

前提条件

已完成在Notebook中安装配置OpenClaw。

计费说明

  • 在ModelArts开发环境中运行Notebook实例时，会使用计算资源和存储资源，产生计算资源和存储资源的累计值计费。计费详情请参见开发环境计费项。
  • OpenClaw本身不收费，但调用大模型API会产生费用。具体计费方式取决于您选择的API Provider。

在OpenClaw生成贪吃蛇

  1. 登录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 生成网页版的贪吃蛇游戏
  5. 等待几分钟后，贪吃蛇游戏生成完成，聊天界面会显示可访问的URL链接。单击URL访问游戏地址，在浏览器中打开游戏。
    图2 贪吃蛇生成完成
    图3 贪吃蛇界面

优化贪吃蛇游戏

体验贪吃蛇游戏之后，您可能会发现一些需要改进的地方（例如贪吃蛇移动有点快，且没有难度等级）。OpenClaw支持通过追加提示词的方式迭代优化已生成的代码，无需手动修改代码文件。

  1. 在OpenClaw聊天框输入以下提示词，对贪吃蛇游戏进行优化。 
    对贪吃蛇游戏进行优化：
1、设定难度等级：简单、中等、困难。难度等级以贪吃蛇的速度作为区分
2、开始游戏的时候，让用户选择难度
  2. 等待几分钟，游戏优化完成，聊天界面会显示更新后的URL链接。打开URL地址体验新功能“选择难度”，选择不同难度后，蛇的移动速度应有明显差异。
    图4 游戏优化完成
    图5 优化后的贪吃蛇界面
  3. 您可以根据以下功能方向继续优化贪吃蛇游戏，在OpenClaw聊天框中输入对应的提示词即可。

    功能方向

    适用场景

    提示词示例

    双击加速

    希望增加操作技巧性。

    双击相同方向键，贪吃蛇临时加速3秒。

    障碍物模式

    希望提升游戏挑战性。

    在游戏区域随机生成3个障碍物，蛇碰到障碍物则游戏结束。

    特殊果实

    希望丰富游戏玩法。

    增加一种金色果实，吃到后加20分但不增长身体长度。

常见问题

  • OpenClaw生成代码后，URL链接无法访问怎么办？

    请检查Notebook实例状态是否为“运行中”。如果实例已停止，请重新启动实例并再次尝试。如仍无法访问，请在OpenClaw聊天框中重新发送提示词生成。

  • 优化后的代码没有生效怎么办？

    请确认OpenClaw聊天界面已显示“代码更新完成”的提示，并使用新生成的URL访问（旧URL可能不会自动更新）。如果浏览器缓存了旧页面，请按Ctrl+F5强制刷新。

相关文档

相关文档