数独：9×9 数字迷宫，越填越上瘾

数独：9×9 数字迷宫，越填越上瘾

一段需求，码道自动写出 446 行、约 17 KB 的单文件数独游戏——9x9 棋盘、三档难度随机出题、冲突红字提示、提示/检查/笔记/重置齐全、完成粒子庆祝+计时，双击 HTML 就能玩

分类: ai-development
标签: CodeArts, AI编程, Sudoku, 网页小游戏, 回溯算法
难度: 初级
读者: 前端开发者、编程学习者、技术写作者

---

1. 开篇钩子

我在码道 TUI 里输入了一段需求：「做一个数独（Sudoku）网页游戏，单个 HTML 文件即可运行……」约 2 分 24 秒后，一个 446 行、约 17 KB 的完整数独游戏就自动生成了：9x9 棋盘、3x3 宫以高亮边框分隔；简单/中等/困难三档难度用回溯算法随机生成合法谜题；点击格子后用数字键盘或物理键盘 1-9 填入，Backspace 删除、方向键移动；同行/列/宫冲突自动红字提示并计入错误数；「提示」一键填一个正确数字、「检查」校验当前解法，还有笔记模式和重置；全部填对时触发庆祝粒子动画并弹窗显示用时。深色主题，双击 HTML 就能开局。

---

2. 码道 TUI 安装

复制下面的命令到终端，3 步完成安装：

# 1. 一键安装
sh -c "$(curl -L https://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)"

# 2. 配置环境变量
export PATH=~/.codeartsdoer/installers:$PATH
export CODEARTS_CLI_AK=你的AK
export CODEARTS_CLI_SK=你的SK

# 3. 启动 TUI
codearts

AK/SK 获取：https://codearts.huaweicloud.com/portal/settings/cli-auth

👉 还没有码道？立即开通体验：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

安装完成后，在命令行或 PowerShell 中输入 codearts 回车，即可打开码道 TUI。把开发需求贴进输入框，码道会自动分析并生成完整代码。

---

3. 码道能力一览

这次开发中，码道展示了以下能力：

• 自然语言编程：我说「数独网页游戏」，码道直接理解成随机出题 + 输入校验 + 提示检查 + 计时暂停 + 庆祝动画一整套方案
• 自主技术选型：谜题生成用回溯算法（先填满合法棋盘再挖空），冲突检测用行列宫三条件校验
• 工程细节到位：物理键盘与数字键盘双输入、方向键移动、后台自动暂停计时、粒子动画用 Canvas 实现
• 自检与收尾：生成后自行验证文件并逐条汇报功能清单

---

4. 任务描述

我想要一个数独（Sudoku）网页游戏，具体要求：

• 单个 HTML 文件即可运行，不需要任何构建步骤
• 9x9 棋盘，提供难度选择（简单/中等/困难）并随机生成合法数独谜题
• 点击格子后通过数字键盘或键盘输入填入数字，冲突（同行/列/宫重复）时红字提示
• 提供「提示」按钮自动填入一个正确数字，以及「检查」按钮校验当前解法
• 全部填对时弹出完成庆祝动画并计时
• 支持计时显示与暂停/继续
• 深色主题，界面清晰，支持移动端触屏操作

---

5. 开发过程及真实截图

我在码道 TUI 中贴入需求后，码道开始拆解需求并生成代码：

生成过程中，码道编写回溯出题、冲突校验与粒子动画逻辑，代码逐行可见：

约 2 分 24 秒后，码道汇报完成，输出功能清单，并提示文件位置：

双击生成的 sudoku.html 在浏览器中直接运行，棋盘自动生成中等难度谜题，计时器、难度选择、新游戏与数字键盘都正常：

---

6. 代码解析

码道生成的代码是一个自包含的单页应用，核心逻辑非常清晰：

出题生成：先回溯填满一个合法完整盘，再按难度随机挖空一定数量的格子：

function valid(g, r, c, n) {
  for (let i = 0; i < 9; i++) {
    if (g[r][i] === n || g[i][c] === n) return false;
    const br = Math.floor(r / 3) * 3 + Math.floor(i / 3);
    const bc = Math.floor(c / 3) * 3 + (i % 3);
    if (g[br][bc] === n) return false;
  }
  return true;
}

冲突提示：每次填数后对目标格做行列宫校验，冲突格子标红并累加错误计数：

function checkConflicts(row, col) {
  // 同行/列/宫重复时给格子加 .error 类，红字显示
}

数字键盘与物理键盘：底部数字键盘绑定 data-n 点击，同时监听 keydown 支持 1-9、Backspace、方向键：

document.addEventListener('keydown', e => {
  if (e.key >= '1' && e.key <= '9') fillNumber(+e.key);
  else if (e.key === 'Backspace') clearCell();
  // 方向键移动选中格
});

计时与暂停：setInterval 计时，切后台用 visibilitychange 自动暂停，暂停覆盖层点击继续：

document.addEventListener('visibilitychange', () => {
  if (document.hidden && !won) pauseGame();
});

完成庆祝：全部填对时启动 Canvas 粒子动画并弹出用时统计：

if (isSolved()) {
  won = true;
  stopTimer();
  startConfetti();
  showWinOverlay();
}

从这些代码可以看出，码道不只把功能拼出来，回溯出题、冲突校验、双输入方式、后台暂停、粒子庆祝这些影响体验的细节也都处理得比较到位。

---

7. 真实运行效果

双击 sudoku.html 即可开始游戏：页面顶部显示时间与错误数，右侧是难度下拉（简单/中等/困难）和「新游戏」按钮；中间是 9x9 棋盘，3x3 宫以加粗边框分隔，给定数字为浅色、玩家填入为亮色；点击任意空格选中后用底部数字键盘 1-9 填入，填错时该格红字提示并累计错误；「💡 提示」自动填一个正确数字，「✓ 检查」校验当前盘面，「✎ 笔记」进入候选数模式，「⟲ 重置」清空玩家填入；全部填对时全屏飘落庆祝彩带粒子并弹窗显示「用时 xx:xx · 错误 n」。深色渐变主题配合浅蓝数字，棋盘清晰，手机上棋盘自动缩放适配触屏。

---

8. 能力总结

• 一次生成完整可用：从需求到可双击运行的单文件游戏，全程约 2 分半，无需手工补代码
• 技术含量扎实：回溯算法出题、行列宫冲突校验、Canvas 粒子动画，方案专业
• 交互细节到位：双输入方式、方向键移动、后台自动暂停、笔记模式，体验闭环完整
• 工程习惯良好：出题/校验/渲染/计时/粒子函数拆分清晰、常量集中、移动端自适应，代码结构清晰可读

---

9. 总结

用码道开发数独这类网页游戏，最大的感受是「需求即产品」：把功能要点说清楚，码道就能给出包含完整技术方案与视觉风格的成品。对想快速做一个益智小游戏、或者刚学前端想看看「回溯算法 + Canvas 动画是怎么写的」的同学，让码道先生成一份，再对照源码逐行读，是很好的学习路径。下一轮，我打算让码道继续挑战不同类型的网页应用，继续记录真实的开发过程。