ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀，每一条都经过真实交付验证。

首页 / 资讯中心 / 正文

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

2026/8/5 20:07:03 拓冰建站 浏览量
扫雷：数字推理与运气的终极对决

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

一段需求，码道自动写出支持三种难度、首次点击安全、触屏长按插旗的完整扫雷——深色立体棋盘、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）。提交后码道先列出实现方案，随即开始构建：

码道 TUI 输入需求

步骤 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