连连看：眼睛会了手不会，越消越上头
一段需求，码道 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 -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. 码道能力一览
这次开发中，码道展示了以下能力：
- 规则实现完整：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 棋盘，四周留一圈空格供路径绕行：
function initBoard() {const k = iconCount(level);const total = COLS * ROWS;const counts = distribute(total / 4, k);const list = [];for (let i = 0; i < k; i++) for (let j = 0; j < counts[i]; j++) list.push(i + 1);for (let i = list.length - 1; i > 0; i--) {const j = Math.floor(Math.random() * (i + 1));[list[i], list[j]] = [list[j], list[i]];}board = [];for (let y = 0; y < ROWS + 2; y++) board.push(new Array(COLS + 2).fill(0));let idx = 0;for (let y = 1; y <= ROWS; y++) for (let x = 1; x <= COLS; x++) board[y][x] = list[idx++];pairsLeft = total / 2;
}
转弯路径判定：lineClear 检查两点间直线是否无阻挡；findPath 依次尝试 0 次转弯、1 次转弯（两种拐角）、2 次转弯（遍历横向/纵向中转列），找到即返回折线路径：
function findPath(p1, p2) {if ((p1.x === p2.x || p1.y === p2.y) && lineClear(p1.x, p1.y, p2.x, p2.y)) return [p1, p2];const c1 = { x: p1.x, y: p2.y };if (!(c1.x === p1.x && c1.y === p1.y) && !(c1.x === p2.x && c1.y === p2.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];const c2 = { x: p2.x, y: p1.y };if (!(c2.x === p1.x && c2.y === p1.y) && !(c2.x === p2.x && c2.y === p2.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 (let x = 0; x <= COLS + 1; x++) {if (x === p1.x || x === p2.x) continue;const a = { 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 (let y = 0; y <= ROWS + 1; y++) {if (y === p1.y || y === p2.y) continue;const a = { 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];}return null;
}
点击与消除流程：先选一个图标，再点第二个；相同则 findPath 判定连通，画线后清空两个格子并触发粒子爆裂，剩余对数减一：
function onCellClick(x, y, cell) {if (gameOver || busy) return;if (board[y][x] === 0) return;if (selected && selected.x === x && selected.y === y) {cell.classList.remove('selected'); selected = null; 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;}const path = findPath({ x: selected.x, y: selected.y }, { x, y });if (path) {const p1 = selected, p2 = { x, y, cell };busy = true;drawPath(path);const c1 = cellCenter(p1.x, p1.y), c2 = cellCenter(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.background = 'transparent'; p1.cell.textContent = ''; p1.cell.classList.remove('vanish');p2.cell.classList.add('empty'); p2.cell.style.background = 'transparent'; p2.cell.textContent = ''; p2.cell.classList.remove('vanish');}, 300);pairsLeft--; updateStats();selected = null; busy = false;if (pairsLeft === 0) { nextLevel(); }else if (isDeadlock()) { setTimeout(shuffleBoard, 400); }}, 260);} else {failCell(selected.cell); failCell(cell);selected.cell.classList.remove('selected'); selected = null;}
}
死局兜底：每次消除后遍历剩余图标，找不到任何一对可连就说明进入死局，自动洗牌重排，避免玩家卡死：
function isDeadlock() {const cells = [];for (let y = 1; y <= ROWS; y++) for (let x = 1; x <= COLS; x++)if (board[y][x] !== 0) cells.push({ x, y, v: board[y][x] });for (let i = 0; i < cells.length; i++)for (let j = i + 1; j < cells.length; j++)if (cells[i].v === cells[j].v && findPath(cells[i], cells[j])) return false;return true;
}
7. 真实运行效果
打开 index.html，深色渐变背景上浮动着光斑，「连连看」标题下方的毛玻璃状态栏实时显示关卡、剩余对数和倒计时，右侧是「提示」与「重开本关」按钮。棋盘上草莓、樱桃、桃子、苹果、葡萄等圆角彩色卡片整齐排列。点选一个图标再点另一个相同图标，若路径连通，一条带发光阴影的 SVG 渐变折线立刻画过去，两个图标旋转缩放消失、粒子爆裂四溅；连错时图标抖动变红提示。每消一对剩余对数减一，全部消完自动进入下一关——图标种类变多、倒计时变短；超时则弹出结束面板。若棋盘进入无可消对的死局，游戏会自动洗牌重排；点「提示」还会高亮一对可消图标。一关接一关，眼睛会了手不会，越消越上头。
8. 能力总结
- 单文件交付：586 行 HTML/CSS/JS 全部在一个
index.html里，双击即玩，零依赖 - 玩法完整：0/1/2 次转弯连通判定、SVG 渐变连线、消除粒子特效、失败抖动提示，一个不少
- 兜底到位：死局自动洗牌、倒计时变红脉冲、提示按钮高亮，休闲游戏该有的细节都有
- 关卡递进：图标种类随关卡递增、倒计时逐关缩短，难度平滑上升，越玩越上头
9. 总结
从一句自然语言到可玩的休闲游戏，码道只用了约 7 分钟。连连看这类「规则简单、判定精细」的小游戏，正好检验 AI 编程助手对路径算法、动画反馈与关卡节奏这类细节的把控。想亲手试试，把上面的需求复制进码道 TUI，你也能收获一个属于自己的连连看。