一段需求码道自动写出支持三种难度、首次点击安全、触屏长按插旗的完整扫雷——深色立体棋盘、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-Lhttps://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)# 2. 配置环境变量exportPATH~/.codeartsdoer/installers:$PATHexportCODEARTS_CLI_AK你的AKexportCODEARTS_CLI_SK你的SK# 3. 启动 TUIcodeartsAK/SK 获取https://codearts.huaweicloud.com/portal/settings/cli-auth还没有码道立即开通体验https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwsfsourceaddmzntgwwbwz安装完成后在命令行或 PowerShell 中输入codearts回车即可打开码道 TUI。把开发需求贴进输入框码道会自动分析并生成完整代码。3. 码道能力一览这次开发中码道展示了以下能力自然语言编程我说「扫雷网页小游戏」码道直接理解成棋盘 布雷 翻格 插旗 计时计雷 胜负判定六件套方案自主产品设计自动选择了深色主题、格子立体浮雕效果、1-8 数字彩色区分、毛玻璃弹窗等视觉设计工程细节到位首次点击安全避开 3×3 区域布雷、递归翻开空白区、右键插旗 触屏长按插旗、踩雷爆炸动画与错误旗标记自检与收尾生成后自动用 Chrome 无头渲染验证 9×9 棋盘 81 格正常显示并逐条汇报功能清单4. 任务描述我想要一个扫雷网页小游戏具体要求单个 HTML 文件即可运行不需要任何构建步骤经典扫雷玩法左键翻开格子右键插旗标记数字提示周围地雷数量首次点击不会踩雷三种难度初级 9×9 共 10 雷中级 16×16 共 40 雷高级 16×30 共 99 雷踩到地雷游戏结束并显示所有地雷位置全部安全格翻开则胜利弹窗顶部显示时间、剩余雷数、重开按钮界面现代美观深色主题格子立体浮雕效果数字按数量彩色区分支持触屏长按插旗开发命令# 打开码道 TUI在输入框中输入需求codearts5. 开发过程步骤 1打开码道 TUI 输入需求在项目目录启动codearts将需求粘贴到输入框模型为 Build · GLM-5.2。提交后码道先列出实现方案随即开始构建步骤 2码道开始生成码道进入构建流程开始编写棋盘渲染、布雷算法与翻开逻辑步骤 3码道完成并汇报约 2 分 12 秒后码道完成开发生成minesweeper.html528 行约 14 KB并逐条汇报功能清单从 TUI 的输出可以看到除了需求里的功能码道还自己补了首次点击安全、爆炸动画、错误旗标记、触屏振动反馈、毛玻璃弹窗等细节。6. 代码解析生成的minesweeper.html核心逻辑可以分为四块难度配置、布雷与安全首击、翻开与胜负判定、输入交互。难度配置三档难度一键切换constDIFFS[{rows:9,cols:9,mines:10},{rows:16,cols:16,mines:40},{rows:16,cols:30,mines:99}];三种经典难度用对象数组定义顶部按钮点击后切换cfg并重新init()棋盘行列数由gridTemplateColumns动态生成。布雷与安全首击首次点击周围 3×3 永不布雷functionplaceMines(safeR,safeC){constsafenewSet();for(letdr-1;dr1;dr){for(letdc-1;dc1;dc){constnrsafeRdr,ncsafeCdc;if(nr0nrcfg.rowsnc0nccfg.cols){safe.add(nr*cfg.colsnc);}}}letplaced0;while(placedcfg.mines){constrMath.floor(Math.random()*cfg.rows);constcMath.floor(Math.random()*cfg.cols);if(board[r][c]-1||safe.has(r*cfg.colsc))continue;board[r][c]-1;placed;}// 计算每个格子周围的雷数1-8 的数字提示...}布雷不是开局就完成的而是延迟到第一次点击时才执行handleClick里firstClick为真时调用placeMines(r, c)把首次点击位置周围 3×3 全部划入安全区保证首击绝不会踩雷。之后遍历全盘为每个非雷格统计周围雷数。翻开与胜负判定递归展开空白区functionreveal(r,c){if(r0||rcfg.rows||c0||ccfg.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(letdr-1;dr1;dr){for(letdc-1;dc1;dc){if(dr0dc0)continue;reveal(rdr,cdc);}}}}functioncheckWin(){letunrevealedSafe0;for(letr0;rcfg.rows;r){for(letc0;ccfg.cols;c){if(!revealed[r][c]board[r][c]!-1)unrevealedSafe;}}if(unrevealedSafe0)win();}reveal采用标准的递归洪水填充翻开为 0 的格子后自动向周围 8 个方向递归展开直到遇到数字边界——这正是扫雷「点一下开一片」的核心体验。checkWin统计尚未翻开的非雷格归零即胜利。输入交互鼠标右键插旗 触屏长按 400ms 插旗boardEl.addEventListener(mousedown,(e){constcelle.target.closest(.cell);if(!cell)return;constrcell.dataset.r,ccell.dataset.c;if(e.button2){toggleFlag(r,c);}elseif(e.button0){handleClick(r,c);}});boardEl.addEventListener(touchstart,(e){constcelle.target.closest(.cell);if(!cell)return;touchTargetcell;touchMovedfalse;touchTimersetTimeout((){if(touchTarget!touchMoved){constrtouchTarget.dataset.r,ctouchTarget.dataset.c;toggleFlag(r,c);touchTargetnull;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?sourcedmzntgwsfsourceaddmzntgwwbwz