扫雷：数字推理与运气的终极对决

扫雷：数字推理与运气的终极对决

一段需求，码道自动写出支持三种难度、首次点击安全、触屏长按插旗的完整扫雷——深色立体棋盘、1-8 彩色数字、双击 HTML 就能玩

分类: ai-development
标签: CodeArts, AI编程, 扫雷, 网页小游戏, 触屏
难度: 初级
读者: 前端开发者、游戏爱好者、技术写作者

---

1. 开篇钩子

我在码道 TUI 里输入了一段需求：「做一个扫雷网页小游戏，单个 HTML 文件即可运行……」约 2 分 12 秒后，一个 528 行、约 14 KB 的完整扫雷就自动生成了：9×9/16×16/16×30 三档难度、首次点击绝不踩雷、递归翻开空白区、右键/触屏长按插旗、计时器与剩余雷数、胜利与踩雷动画弹窗，双击 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. 码道能力一览

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

• 自然语言编程：我说「扫雷网页小游戏」，码道直接理解成棋盘 + 布雷 + 翻格 + 插旗 + 计时计雷 + 胜负判定六件套方案
• 自主产品设计：自动选择了深色主题、格子立体浮雕效果、1-8 数字彩色区分、毛玻璃弹窗等视觉设计
• 工程细节到位：首次点击安全（避开 3×3 区域布雷）、递归翻开空白区、右键插旗 + 触屏长按插旗、踩雷爆炸动画与错误旗标记
• 自检与收尾：生成后自动用 Chrome 无头渲染验证 9×9 棋盘 81 格正常显示，并逐条汇报功能清单

---

4. 任务描述

我想要一个扫雷网页小游戏，具体要求：

• 单个 HTML 文件即可运行，不需要任何构建步骤
• 经典扫雷玩法：左键翻开格子，右键插旗标记，数字提示周围地雷数量
• 首次点击不会踩雷
• 三种难度：初级 9×9 共 10 雷，中级 16×16 共 40 雷，高级 16×30 共 99 雷
• 踩到地雷游戏结束并显示所有地雷位置，全部安全格翻开则胜利弹窗
• 顶部显示时间、剩余雷数、重开按钮
• 界面现代美观：深色主题，格子立体浮雕效果，数字按数量彩色区分
• 支持触屏长按插旗

开发命令：

# 打开码道 TUI，在输入框中输入需求
codearts

---

5. 开发过程

步骤 1：打开码道 TUI 输入需求

在项目目录启动 codearts，将需求粘贴到输入框（模型为 Build · GLM-5.2）。提交后码道先列出实现方案，随即开始构建：

步骤 2：码道开始生成

码道进入构建流程，开始编写棋盘渲染、布雷算法与翻开逻辑：

步骤 3：码道完成并汇报

约 2 分 12 秒后，码道完成开发，生成 minesweeper.html（528 行，约 14 KB），并逐条汇报功能清单：

从 TUI 的输出可以看到，除了需求里的功能，码道还自己补了首次点击安全、爆炸动画、错误旗标记、触屏振动反馈、毛玻璃弹窗等细节。

---

6. 代码解析

生成的 minesweeper.html 核心逻辑可以分为四块：难度配置、布雷与安全首击、翻开与胜负判定、输入交互。

难度配置：三档难度一键切换

const DIFFS = [
  { rows: 9, cols: 9, mines: 10 },
  { rows: 16, cols: 16, mines: 40 },
  { rows: 16, cols: 30, mines: 99 }
];

三种经典难度用对象数组定义，顶部按钮点击后切换 cfg 并重新 init()，棋盘行列数由 gridTemplateColumns 动态生成。

布雷与安全首击：首次点击周围 3×3 永不布雷

function placeMines(safeR, safeC) {
  const safe = new Set();
  for (let dr = -1; dr <= 1; dr++) {
    for (let dc = -1; dc <= 1; dc++) {
      const nr = safeR + dr, nc = safeC + dc;
      if (nr >= 0 && nr < cfg.rows && nc >= 0 && nc < cfg.cols) {
        safe.add(nr * cfg.cols + nc);
      }
    }
  }
  let placed = 0;
  while (placed < cfg.mines) {
    const r = Math.floor(Math.random() * cfg.rows);
    const c = Math.floor(Math.random() * cfg.cols);
    if (board[r][c] === -1 || safe.has(r * cfg.cols + c)) continue;
    board[r][c] = -1;
    placed++;
  }
  // 计算每个格子周围的雷数（1-8 的数字提示）
  ...
}

布雷不是开局就完成的，而是延迟到第一次点击时才执行：handleClick 里 firstClick 为真时调用 placeMines(r, c)，把首次点击位置周围 3×3 全部划入安全区，保证首击绝不会踩雷。之后遍历全盘为每个非雷格统计周围雷数。

翻开与胜负判定：递归展开空白区

function reveal(r, c) {
  if (r < 0 || r >= cfg.rows || c < 0 || c >= cfg.cols) return;
  if (revealed[r][c] || flagged[r][c]) return;
  revealed[r][c] = true;
  updateCell(getCell(r, c), r, c);
  if (board[r][c] === 0) {
    for (let dr = -1; dr <= 1; dr++) {
      for (let dc = -1; dc <= 1; dc++) {
        if (dr === 0 && dc === 0) continue;
        reveal(r + dr, c + dc);
      }
    }
  }
}

function checkWin() {
  let unrevealedSafe = 0;
  for (let r = 0; r < cfg.rows; r++) {
    for (let c = 0; c < cfg.cols; c++) {
      if (!revealed[r][c] && board[r][c] !== -1) unrevealedSafe++;
    }
  }
  if (unrevealedSafe === 0) win();
}

reveal 采用标准的递归洪水填充：翻开为 0 的格子后，自动向周围 8 个方向递归展开，直到遇到数字边界——这正是扫雷「点一下开一片」的核心体验。checkWin 统计尚未翻开的非雷格，归零即胜利。

输入交互：鼠标右键插旗 + 触屏长按 400ms 插旗

boardEl.addEventListener('mousedown', (e) => {
  const cell = e.target.closest('.cell');
  if (!cell) return;
  const r = +cell.dataset.r, c = +cell.dataset.c;
  if (e.button === 2) {
    toggleFlag(r, c);
  } else if (e.button === 0) {
    handleClick(r, c);
  }
});

boardEl.addEventListener('touchstart', (e) => {
  const cell = e.target.closest('.cell');
  if (!cell) return;
  touchTarget = cell;
  touchMoved = false;
  touchTimer = setTimeout(() => {
    if (touchTarget && !touchMoved) {
      const r = +touchTarget.dataset.r, c = +touchTarget.dataset.c;
      toggleFlag(r, c);
      touchTarget = null;
      if (navigator.vibrate) navigator.vibrate(30);
    }
  }, 400);
}, { passive: true });

桌面端左键翻开、右键插旗，并拦截右键菜单；触屏端用 400ms 长按判定插旗（配合 30ms 振动反馈），短按直接翻开，滑动则取消长按——手机上一只手也能完成全部操作。

---

7. 运行效果

用浏览器打开 minesweeper.html，默认 9×9 初级难度玩了一会儿：

可以看到：

• 深色渐变背景 + 9×9 立体浮雕棋盘，界面清爽
• 顶部实时显示剩余雷数与用时，笑脸按钮一键重开
• 翻开空白格自动展开成片区域，数字 1-8 按颜色区分
• 右键/长按插旗后雷数计数实时更新
• 踩雷时对应格子爆炸动画并标出全部地雷，胜利时弹出用时统计

---

8. 能力总结

能力	说明
自然语言理解	「扫雷网页小游戏」→ 棋盘/布雷/翻格/插旗/计时计雷/胜负判定完整方案
算法细节	首次点击 3×3 安全区布雷、递归洪水填充翻开空白区、胜利条件全盘扫描
输出质量	深色主题 + 立体浮雕格子，1-8 彩色数字，爆炸与胜利动画弹窗
产品细节	三档难度切换、右键 + 触屏长按双插旗、振动反馈、计时器与剩余雷数

---

9. 总结

这次实践最大的感受是：码道把扫雷这种「经典游戏」写出了产品感——首次点击安全、递归展开空白区、爆炸动画、错误旗标记、触屏长按插旗这些细节一个都没落下。528 行单文件、零依赖、双击即玩，还支持手机触屏操作。如果你也想试试，可以免费开通体验版：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz