一段需求码道 7 分钟自动写出 586 行、约 21 KB 的单文件连连看——10×8 棋盘上水果图标成对出现点击两个相同图标能用不超过 2 次转弯的折线连上就消SVG 渐变连线、粒子爆裂、死局自动洗牌、关卡难度递增双击index.html就能开玩。分类: ai-development标签: CodeArts, AI编程, 连连看, 休闲益智, Canvas, 网页游戏难度: 初级读者: 前端开发者、编程学习者、技术写作者1. 开篇钩子连连看是刻进青春记忆的休闲游戏满屏成对的水果图标你要找到能用「不超过 2 次转弯」的折线连起来的两个相同图标点一下消一对越快越上头。在码道 TUI 里贴了一段需求「做一个连连看网页小游戏图标成对、最多 2 次转弯可连、倒计时闯关……」排队等了一会儿约 7 分钟后码道自动生成一个 586 行、约 21 KB 的完整游戏深色渐变背景上 10×8 棋盘铺开草莓、樱桃、桃子、苹果、葡萄等圆角彩色卡片整齐排列点中两个相同图标一条亮色 SVG 折线画过去图标旋转缩放消失、粒子爆裂四溅连错会抖动变红提示剩余对数和倒计时实时刷新通关自动进下一关、超时结束死局还会自动洗牌重排。双击index.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. 码道能力一览这次开发中码道展示了以下能力规则实现完整0/1/2 次转弯的折线连通判定、SVG 渐变连线动画、成对消除与失败抖动变红反馈核心玩法一步到位细节处理老练死局自动检测并洗牌重排、倒计时小于 15 秒变红脉冲、「提示」按钮高亮一对可消图标把休闲游戏该有的兜底都补齐了关卡递进自然每关图标种类随关卡递增6→8→10…、倒计时逐关缩短难度曲线平滑越玩越上头自检与收尾生成后主动汇报核心实现清单棋盘布局、连线算法、消除特效、死局处理、视觉风格再交付文件4. 任务描述我想要一个「连连看」网页小游戏具体要求用单个 HTML 文件实现CSS 和 JavaScript 内嵌浏览器直接打开即可玩棋盘随机摆放成对的水果/动物图标每种图标数量为 4 的倍数保证两两成对点击两个相同图标若能用不超过 2 次转弯最多 3 段折线且路径上无阻挡的直线相连则消除并播放连线与消除粒子动画连接失败时播放抖动/变红提示并取消选择顶部显示剩余对数与倒计时全部消完自动进入下一关图标种类随关卡增加超时游戏结束深色渐变背景、圆角彩色卡片、亮色连线、消除粒子特效视觉效果精致支持重新开始本关操作仅用鼠标5. 开发过程及真实截图我在码道 TUI 中贴入需求码道先进入模型排队随后开始拆解需求码道先规划棋盘布局、转弯路径判定与消除特效再逐段生成代码约 7 分钟后码道汇报完成已生成单文件连连看586 行并列出核心实现——10×8 棋盘、0/1/2 次转弯连线、SVG 渐变连线、粒子消除特效、关卡递进、死局自动洗牌与提示双击生成的index.html在浏览器中运行深色渐变背景上显示「连连看」标题与关卡状态栏下方是玩法说明6. 代码解析码道生成的代码是一个自包含的单页应用核心逻辑非常清晰棋盘初始化按关卡计算图标种类把图标洗牌后填入 10×8 棋盘四周留一圈空格供路径绕行functioninitBoard(){constkiconCount(level);consttotalCOLS*ROWS;constcountsdistribute(total/4,k);constlist[];for(leti0;ik;i)for(letj0;jcounts[i];j)list.push(i1);for(letilist.length-1;i0;i--){constjMath.floor(Math.random()*(i1));[list[i],list[j]][list[j],list[i]];}board[];for(lety0;yROWS2;y)board.push(newArray(COLS2).fill(0));letidx0;for(lety1;yROWS;y)for(letx1;xCOLS;x)board[y][x]list[idx];pairsLefttotal/2;}转弯路径判定lineClear检查两点间直线是否无阻挡findPath依次尝试 0 次转弯、1 次转弯两种拐角、2 次转弯遍历横向/纵向中转列找到即返回折线路径functionfindPath(p1,p2){if((p1.xp2.x||p1.yp2.y)lineClear(p1.x,p1.y,p2.x,p2.y))return[p1,p2];constc1{x:p1.x,y:p2.y};if(!(c1.xp1.xc1.yp1.y)!(c1.xp2.xc1.yp2.y)isEmpty(c1.x,c1.y)lineClear(p1.x,p1.y,c1.x,c1.y)lineClear(c1.x,c1.y,p2.x,p2.y))return[p1,c1,p2];constc2{x:p2.x,y:p1.y};if(!(c2.xp1.xc2.yp1.y)!(c2.xp2.xc2.yp2.y)isEmpty(c2.x,c2.y)lineClear(p1.x,p1.y,c2.x,c2.y)lineClear(c2.x,c2.y,p2.x,p2.y))return[p1,c2,p2];for(letx0;xCOLS1;x){if(xp1.x||xp2.x)continue;consta{x,y:p1.y},b{x,y:p2.y};if(isEmpty(a.x,a.y)isEmpty(b.x,b.y)lineClear(p1.x,p1.y,a.x,a.y)lineClear(a.x,a.y,b.x,b.y)lineClear(b.x,b.y,p2.x,p2.y))return[p1,a,b,p2];}for(lety0;yROWS1;y){if(yp1.y||yp2.y)continue;consta{x:p1.x,y},b{x:p2.x,y};if(isEmpty(a.x,a.y)isEmpty(b.x,b.y)lineClear(p1.x,p1.y,a.x,a.y)lineClear(a.x,a.y,b.x,b.y)lineClear(b.x,b.y,p2.x,p2.y))return[p1,a,b,p2];}returnnull;}点击与消除流程先选一个图标再点第二个相同则findPath判定连通画线后清空两个格子并触发粒子爆裂剩余对数减一functiononCellClick(x,y,cell){if(gameOver||busy)return;if(board[y][x]0)return;if(selectedselected.xxselected.yy){cell.classList.remove(selected);selectednull;return;}if(!selected){selected{x,y,cell};cell.classList.add(selected);return;}if(board[selected.y][selected.x]!board[y][x]){selected.cell.classList.remove(selected);selected{x,y,cell};cell.classList.add(selected);return;}constpathfindPath({x:selected.x,y:selected.y},{x,y});if(path){constp1selected,p2{x,y,cell};busytrue;drawPath(path);constc1cellCenter(p1.x,p1.y),c2cellCenter(p2.x,p2.y);setTimeout((){board[p1.y][p1.x]0;board[p2.y][p2.x]0;p1.cell.classList.remove(selected);p2.cell.classList.remove(selected);p1.cell.classList.add(vanish);p2.cell.classList.add(vanish);spawnParticles(c1.px,c1.py,ICONS[board[p1.y][p1.x]-1]||ICONS[0]);spawnParticles(c2.px,c2.py,ICONS[board[p2.y][p2.x]-1]||ICONS[0]);setTimeout((){p1.cell.classList.add(empty);p1.cell.style.backgroundtransparent;p1.cell.textContent;p1.cell.classList.remove(vanish);p2.cell.classList.add(empty);p2.cell.style.backgroundtransparent;p2.cell.textContent;p2.cell.classList.remove(vanish);},300);pairsLeft--;updateStats();selectednull;busyfalse;if(pairsLeft0){nextLevel();}elseif(isDeadlock()){setTimeout(shuffleBoard,400);}},260);}else{failCell(selected.cell);failCell(cell);selected.cell.classList.remove(selected);selectednull;}}死局兜底每次消除后遍历剩余图标找不到任何一对可连就说明进入死局自动洗牌重排避免玩家卡死functionisDeadlock(){constcells[];for(lety1;yROWS;y)for(letx1;xCOLS;x)if(board[y][x]!0)cells.push({x,y,v:board[y][x]});for(leti0;icells.length;i)for(letji1;jcells.length;j)if(cells[i].vcells[j].vfindPath(cells[i],cells[j]))returnfalse;returntrue;}7. 真实运行效果打开index.html深色渐变背景上浮动着光斑「连连看」标题下方的毛玻璃状态栏实时显示关卡、剩余对数和倒计时右侧是「提示」与「重开本关」按钮。棋盘上草莓、樱桃、桃子、苹果、葡萄等圆角彩色卡片整齐排列。点选一个图标再点另一个相同图标若路径连通一条带发光阴影的 SVG 渐变折线立刻画过去两个图标旋转缩放消失、粒子爆裂四溅连错时图标抖动变红提示。每消一对剩余对数减一全部消完自动进入下一关——图标种类变多、倒计时变短超时则弹出结束面板。若棋盘进入无可消对的死局游戏会自动洗牌重排点「提示」还会高亮一对可消图标。一关接一关眼睛会了手不会越消越上头。8. 能力总结单文件交付586 行 HTML/CSS/JS 全部在一个index.html里双击即玩零依赖玩法完整0/1/2 次转弯连通判定、SVG 渐变连线、消除粒子特效、失败抖动提示一个不少兜底到位死局自动洗牌、倒计时变红脉冲、提示按钮高亮休闲游戏该有的细节都有关卡递进图标种类随关卡递增、倒计时逐关缩短难度平滑上升越玩越上头9. 总结从一句自然语言到可玩的休闲游戏码道只用了约 7 分钟。连连看这类「规则简单、判定精细」的小游戏正好检验 AI 编程助手对路径算法、动画反馈与关卡节奏这类细节的把控。想亲手试试把上面的需求复制进码道 TUI你也能收获一个属于自己的连连看。