本案例用华为云 CodeArts 码道 **WebUI** 作为开发入口在浏览器里打开码道对话窗口用自然语言描述需求 码道直接生成一个 478 行的单文件 index.html 汉诺塔游戏内置部署自动给公网地址。 不用装 CLI、不用配 AK/SK全程浏览器搞定公网链接还能直接分享给朋友试玩。 源码和截图全部开源在文末 Demo Park。 ## 码道开通免费体验版 开始之前先免费开通码道体验版。不需要装任何软件浏览器就能用 [https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwsfsourceaddmzntgwwbwz](https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwsfsourceaddmzntgwwbwz) 开通后有三种使用方式WebUI浏览器对话、TUI终端命令行和桌面 IDEIDE 插件。本文用 WebUI 版演示。 ## 进入 AI 开发者空间 1. 浏览器打开 [https://developer.huaweicloud.com/devspace/](https://developer.huaweicloud.com/devspace/) 2. 弹窗「请选择要进入的版本」→ 点击 **体验版** 3. 首次使用会跳到华为云登录页**扫码登录一次**后续浏览器会话复用 4. 弹窗「临时凭据自动配置」→ 点击 **同意**沙箱自动创建 进入 AI 开发者空间主界面后左侧菜单栏找到 **CodeArts**点击它右侧的**浏览器图标**弹出码道 WebUI 对话窗口  打开后码道 WebUI 初始界面底部输入框提示「尽管吩咐我来帮你搞定」  小贴士体验版沙箱 3 小时后自动重置关键内容记得及时保存。 ## 码道能做什么 码道是华为云 CodeArts 的 AI 编程助手WebUI 版直接在浏览器对话窗口里工作 - 输入自然语言需求码道自动拆解任务、创建项目、编写代码不需要手动搭框架。 - 生成过程实时显示 shell 命令、思考过程和文件输出进度一目了然。 - **自带部署能力**完成后自动启动 HTTP 服务给出内部预览链接 再要一句「用 DevBridge 生成公网分享链接」码道会安装 devbridge CLI 并配置公网映射 得到一个 **8 小时有效的公网地址**手机、同事都能直接打开。 - 支持继续对话修改比如「把圆盘改成彩虹渐变色」「加个拖拽音效」。 ## 这个游戏玩什么 一个遵循经典汉诺塔规则的纯前端益智小游戏 - 三根柱子支持 **3~8 层** 圆盘自由选择左上方滑块拖动即可切换难度。 - 点击柱子选中顶部圆盘再点另一根柱子移动**大盘不能压在小盘上**规则校验实时提示。 - 步数计数器从 0 开始每移动一次 1全程追踪。 - 完成全部圆盘移到第三根柱子触发**胜利动画**圆盘高亮闪烁祝贺文字弹出。 - 一键**重新开始**随时重玩同一难度或换关卡。 - 渐变背景 毛玻璃效果柱子区域单个 HTML 文件即开即玩。  ## 任务描述 在码道 WebUI 输入框粘贴以下需求回车发送模型默认 glm-5.2可直接用 开发一个汉诺塔益智小游戏网页应用三根柱子支持选择3~8层圆盘可以点击柱子或拖拽移动圆盘必须遵循汉诺塔规则大盘不能压在小盘上带步数计数、胜利动画和重新开始按钮界面简洁美观单个网页即跑即玩。完成后用部署功能部署成可访问的网页应用并告诉我访问地址。  ## 开发过程 需求发出后左侧「任务」计数 1右上出现**停止生成**按钮码道开始工作。 整个过程约 **4~5 分钟**码道自动完成 - 创建项目目录 /workspace/hanoi-tower - 生成单文件 index.html478 行包含柱子绘制、圆盘渲染、点击交互、规则校验、步数计数、胜利动画、重新开始等完整逻辑 - 启动 python3 -m http.server 部署服务 - curl 自检确认页面可访问 完成后码道输出任务摘要包含访问地址和功能清单。接着在对话框继续输入 请用 DevBridge 生成一个公网可访问的分享链接 码道执行 devbridge create → devbridge port create → devbridge host得到公网地址  打开公网链接即可试玩游戏首次访问经过华为云安全确认页点击**继续**进入。 ## 关键代码解读 源码是单文件 index.html全部逻辑在