汉诺塔益智小游戏：浏览器里说句话，码道 WebUI 一键生成+部署上线

本案例用华为云 CodeArts 码道 WebUI 作为开发入口：在浏览器里打开码道对话窗口，用自然语言描述需求，

码道直接生成一个 478 行的单文件 index.html 汉诺塔游戏，内置部署自动给公网地址。

不用装 CLI、不用配 AK/SK，全程浏览器搞定，公网链接还能直接分享给朋友试玩。

源码和截图全部开源在文末 Demo Park。

码道开通（免费体验版）

开始之前，先免费开通码道体验版。不需要装任何软件，浏览器就能用：

https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

开通后有三种使用方式：WebUI（浏览器对话）、TUI（终端命令行）和桌面 IDE（IDE 插件）。本文用 WebUI 版演示。

进入 AI 开发者空间

浏览器打开 https://developer.huaweicloud.com/devspace/
弹窗「请选择要进入的版本」→ 点击 体验版
首次使用会跳到华为云登录页，扫码登录一次，后续浏览器会话复用
弹窗「临时凭据自动配置」→ 点击同意，沙箱自动创建

进入 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.html（478 行），包含柱子绘制、圆盘渲染、点击交互、规则校验、步数计数、胜利动画、重新开始等完整逻辑
启动 python3 -m http.server 部署服务
curl 自检确认页面可访问

完成后码道输出任务摘要，包含访问地址和功能清单。接着在对话框继续输入：

请用 DevBridge 生成一个公网可访问的分享链接

码道执行 devbridge create → devbridge port create → devbridge host，得到公网地址：

打开公网链接即可试玩游戏，首次访问经过华为云安全确认页，点击继续进入。

关键代码解读

源码是单文件 index.html，全部逻辑在 <script> 里。看几个关键实现。

1. 柱子与圆盘渲染

三根柱子用 Canvas 绘制，圆盘按层数生成，宽度自上而下递增，颜色用 HSL 按层数渐变区分：

javascript 复制代码

function drawTower(x, disks, label) {
  ctx.fillStyle = '#333';
  ctx.fillRect(x - 5, 120, 10, 180);        // 柱子
  ctx.fillRect(x - 80, 300, 160, 8);         // 底座
  disks.forEach((d, i) => {
    const w = 30 + d * 20;                    // 圆盘编号越大越宽
    const h = 24;
    const y = 292 - i * 26;
    ctx.fillStyle = `hsl(${d * 40}, 70%, 55%)`;
    roundRect(x - w / 2, y, w, h, 6);
  });
  ctx.fillStyle = '#666';
  ctx.fillText(label, x, 340);
}

三根柱子分别维护一个数组栈，每次只允许操作栈顶元素。

2. 点击选择与移动

点击柱子触发选中/移动逻辑，核心是判断"只能移动栈顶圆盘"并且"大盘不能压小盘"：

javascript 复制代码

function handleClick(towerIndex) {
  if (selectedTower === null) {
    if (towers[towerIndex].length > 0) {
      selectedTower = towerIndex;             // 选中柱子
    }
  } else {
    if (selectedTower === towerIndex) {
      selectedTower = null;                   // 取消选中
      return;
    }
    const from = towers[selectedTower];
    const to = towers[towerIndex];
    const disk = from[from.length - 1];
    // 关键规则检查
    if (to.length > 0 && to[to.length - 1] < disk) {
      showToast('不能将大盘放到小盘上！');
      selectedTower = null;
      return;
    }
    to.push(from.pop());                      // 合法移动
    moves++;
    updateDisplay();
    selectedTower = null;
    checkWin();
  }
  render();
}

moves++ 每次成功移动递增，拼出步数计数器。

3. 胜利检测与动画

每次移动后检查第三根柱子是否集满了所有圆盘（长度等于总层数）。胜利时触发闪烁动画和弹窗：

javascript 复制代码

function checkWin() {
  if (towers[2].length === totalDisks) {
    setTimeout(() => {
      alert(`🎉 恭喜！你用 ${moves} 步完成了 ${totalDisks} 层汉诺塔！`);
    }, 300);
    // 胜利闪烁动画
    let flashCount = 0;
    const flashInterval = setInterval(() => {
      document.body.style.backgroundColor =
        flashCount % 2 === 0 ? '#e8f5e9' : '';
      if (++flashCount > 8) clearInterval(flashInterval);
    }, 300);
  }
}

最优步数公式为 2ⁿ - 1（3 层需 7 步，8 层需 255 步），玩家可以挑战逼近理论下限。

4. 难度选择

左上角滑块实时调整圆盘数量（3~8），拖动时清空所有柱子并重新初始化：

javascript 复制代码

rangeInput.addEventListener('input', () => {
  totalDisks = parseInt(rangeInput.value);
  initGame();
});

function initGame() {
  towers = [
    Array.from({ length: totalDisks }, (_, i) => totalDisks - i),  // 降序放入 A 柱
    [],
    []
  ];
  moves = 0;
  selectedTower = null;
  updateDisplay();
  render();
}

运行效果

实际验证：点击 A 柱选中顶部圆盘 → 点 C 柱移动，步数 0→1，圆盘正确定位；尝试大盘压小盘会被规则阻止，页面弹出提示 Toast；完成全部移动后触发胜利动画，绿色闪烁 + 祝贺弹窗；滑块拖到 8 层重新开始，柱子立刻刷新。

界面简洁，3 层适合新手入门，8 层足够烧脑------工作间隙来一局，纯键盘/鼠标点击操作，不需要任何依赖。

直接下载试玩

这个 Demo 已经完整开源（源代码、本文档、全部截图），托管在 Demo Park 仓库：

Demo Park 仓库：https://atomgit.com/deli007/demo_park
本案例目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-hanoi-tower

打开上面的链接，进入 codearts-hanoi-tower 文件夹，把 index.html 下载到本地，浏览器打开即可运行，无需安装任何依赖。

总结

一次需求生成一个能玩的汉诺塔游戏，从柱子绘制、圆盘交互、规则校验到胜利动画，全部由码道 WebUI 完成，我只需要把玩法、规则、界面说清楚。而且自带部署，公网链接直接分享给别人试玩，不需要自己搭服务。

想体验这种从自然语言直接到可运行产品的流程，免费开通码道体验版：

https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz