分类: ai-development

标签: CodeArts, AI编程, MemoryMatch, 网页小游戏, 触屏

难度: 初级

读者: 前端开发者、游戏爱好者、技术写作者

1. 开篇钩子

我在码道 TUI 里输入了一段需求：「做一个记忆翻牌（Memory Match）网页小游戏，单个 HTML 文件即可运行……」约 2 分 1 秒后，一个 486 行、约 14 KB 的完整记忆翻牌游戏就自动生成了：8x4 共 32 张卡片、16 对 emoji 图案，点击翻开、相同配对保留、不同抖动翻回；配对成功卡片会泛起绿色光晕并弹跳，失败则红框抖动，全部配对齐后弹出胜利窗口显示用时；最佳成绩保存在 localStorage，刷新页面也不丢。双击 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:$PATHexport CODEARTS_CLI_AK=你的AKexport CODEARTS_CLI_SK=你的SK# 3. 启动 TUIcodearts

AK/SK 获取：https://codearts.huaweicloud.com/portal/settings/cli-auth

安装完成后，在命令行或 PowerShell 中输入 codearts 回车，即可打开码道 TUI。把开发需求贴进输入框，码道会自动分析并生成完整代码。

3. 码道能力一览

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

1. 自然语言编程：我说「记忆翻牌网页小游戏」，码道直接理解成 32 张卡片 16 对、翻牌配对、计时统计、最佳成绩持久化一整套方案
2. 自主产品设计：自动选择了深色径向渐变背景、紫粉渐变卡背、emoji 图案零资源依赖、3D rotateY 翻牌动画、胜利弹窗等视觉与交互设计
3. 工程细节到位：翻牌期间用 lock 锁防止连点、配对成功/失败用不同 CSS 类做颜色与动画反馈、首次点击才开始计时、响应式布局适配移动端
4. 自检与收尾：生成后自行验证文件存在与大小，并逐条汇报功能清单与实现位置

4. 任务描述

我想要一个记忆翻牌（Memory Match）网页小游戏，具体要求：

1. 单个 HTML 文件即可运行，不需要任何构建步骤
2. 8x4 共 32 张卡片，16 对相同图案；点击翻开卡片，两张相同则配对成功保留，不同则翻回背面
3. 全部配对完成显示胜利和用时
4. 有翻牌动画，匹配成功和失败有不同的颜色反馈
5. 用 Canvas 或 DOM 实现，深色背景，卡片有渐变和图标
6. 记录最佳完成时间，使用 localStorage 持久化
7. 支持鼠标和触屏

5. 开发过程及真实截图

我在码道 TUI 中贴入需求后，码道先拆解需求，然后直接开始写代码：

生成过程中，码道边写代码边核对实现要点，进度条与生成日志实时可见：

约 2 分 1 秒后，码道汇报完成，输出功能清单，并提示文件位置：

双击生成的 memory-match.html 在浏览器中直接运行，32 张卡片按 8x4 网格排布，翻牌、配对、计时与胜利弹窗都正常：

6. 代码解析

码道生成的代码是一个自包含的 IIFE，核心逻辑非常清晰：

游戏配置：8 列 x 4 行共 32 张卡片、16 对图案，图标直接用 emoji，零图片资源依赖；最佳成绩用固定 key 持久化：

var ICONS = ["u2728", "u2B50", ...];// 16 种 emoji 图案var COLS = 8, ROWS = 4, TOTAL = COLS * ROWS, PAIRS = TOTAL / 2;var BEST_KEY = "memoryMatch.bestTime.v1";

洗牌：Fisher-Yates 原地洗牌，保证每次开局牌序都不同：

function shuffle(arr) {for (var i = arr.length - 1; i > 0; i--) {var j = Math.floor(Math.random() * (i + 1));var t = arr[i]; arr[i] = arr[j]; arr[j] = t;}return arr;}

翻牌配对判定：用 firstCard 记录第一张牌，第二张翻开后比较图案；配对成功加 matched+pop 类保留并弹跳，失败则加 bad+shake 类红框抖动后翻回，期间用 lock 锁住输入防止连点：

if (firstCard.iconIdx === card.iconIdx) {firstCard.matched = true;card.matched = true;firstCard.el.classList.add("matched", "pop");card.el.classList.add("matched", "pop");matchedCount++;if (matchedCount === PAIRS) { win(); }} else {lock = true;a.el.classList.add("bad", "shake");b.el.classList.add("bad", "shake");// 750ms 后翻回并解锁}

计时与最佳成绩：首次点击卡片才开始计时；全部配对后停止计时，若用时小于历史最佳则写入 localStorage 并高亮"新纪录"：

function win() {stopTimer();var elapsed = Date.now() - startTime;var isNew = !best || elapsed < best;if (isNew) { setBest(elapsed); refreshBest(); }winTimeEl.textContent = fmt(elapsed);winBestEl.textContent = isNew ? "新纪录！最佳完成时间 " + fmt(elapsed): "最佳完成时间 " + fmt(best);}

3D 翻牌动画：卡片用 preserve-3d 容器 + 正反两个面，翻转时 rotateY(180deg)，匹配成功/失败的绿色/红色光晕与弹跳/抖动动画全部由 CSS 类驱动，逻辑与表现分离：

.card { transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.8,.2,1); }.card.flipped { transform: rotateY(180deg); }.card.matched .front { box-shadow: 0 0 22px rgba(52,211,153,0.45); }.card.bad .front { box-shadow: 0 0 20px rgba(248,113,113,0.45); }

从这些代码可以看出，码道不只把玩法拼出来，翻牌锁、配对反馈、计时逻辑这些影响体验的细节也都处理得比较到位。

7. 真实运行效果

双击 memory-match.html 即可开始游戏：点击卡片背面，3D 翻转展示正面 emoji 图案；翻出两张相同图案时卡片保持翻开并泛起绿色光晕，不同则红框抖动后翻回。顶部实时显示用时、步数与已配对数量，全部 16 对配对完成后弹出胜利窗口展示本次用时；若打破纪录会显示"新纪录"并写入 localStorage，下次打开页面仍能看到最佳成绩。深色渐变背景配合紫粉渐变卡背，桌面与手机浏览器均可流畅游玩。

8. 能力总结

1. 一次生成完整可玩：从需求到可双击运行的单文件游戏，全程约 2 分钟，无需手工补代码
2. 动画与反馈到位：3D 翻牌、配对成功弹跳发光、失败抖动变色，视觉反馈清晰不简陋
3. 玩法完整：洗牌、配对判定、计时步数统计、胜利弹窗、最佳成绩持久化，核心体验闭环
4. 工程习惯良好：状态锁防连点、逻辑与表现分离、emoji 零资源依赖、响应式布局，代码结构清晰可读

9. 总结

用码道开发记忆翻牌这类网页小游戏，最大的感受是"需求即产品"：把玩法要点说清楚，码道就能给出包含完整交互、动画和视觉风格的成品。对想快速验证创意、或者刚学前端想看看"一个完整游戏是怎么写的"的同学，让码道先生成一份，再对照源码逐行读，是很好的学习路径。下一轮，我打算让码道继续挑战不同玩法的小游戏，继续记录真实的开发过程。