消消乐（Match-3）：三连消除，一玩就上头

消消乐（Match-3）：三连消除，一玩就上头

一、开篇

你有没有这样的时刻：想休闲放松一下，打开手机却发现全是广告，玩个消消乐还要等体力恢复？如果有一个纯粹、无广告、即开即玩的网页版消消乐，而且只需要一句话就能让 AI 帮你写出来——

带着这个想法，我打开码道（CodeArts），用自然语言描述了需求。

码道是华为云推出的 AI 编程助手，支持在终端（TUI / Terminal UI）中通过自然语言描述需求，自动生成代码并写入文件。开发者只需用自然语言说出要做什么，码道负责实现。

码道开通链接：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

二、码道 TUI 安装与配置

在使用码道之前，需要先完成安装和 AK/SK 配置。

安装

访问码道下载页面获取安装包，按提示完成安装。安装完成后在终端执行 codearts --version 验证。

配置 AK/SK

码道需要华为云 AK/SK 进行认证，在以下页面创建或获取：

https://codearts.huaweicloud.com/portal/settings/cli-auth

获取后将 AK、SK 分别设置为环境变量 CODEARTS_CLI_AK 和 CODEARTS_CLI_SK：

setx CODEARTS_CLI_AK "your_ak_here"
setx CODEARTS_CLI_SK "your_sk_here"

配置完成后，在终端输入 codearts 即可进入 TUI 交互界面。

三、码道核心能力

码道的 TUI 交互模式提供以下能力：

• 自然语言驱动：用中文描述需求，码道理解意图并规划实现步骤
• 文件直接写入：生成代码后直接写入指定目录，无需手动复制粘贴
• 增量迭代：支持对已有代码继续描述"改这个样式""加那个功能"
• 上下文理解：码道会读取当前目录的文件结构，理解已有代码

四、任务描述

本次我们给码道的需求是：

创建一个消消乐（Match-3）网页游戏，使用单文件 HTML/CSS/JS 实现。8×8 网格，彩色宝石方块，点击两个相邻方块交换位置，三个或以上相同方块连成一线则消除得分，非合法交换弹回原位。消除后上方方块下落填充，顶部生成新方块补充。包含分数统计、连击加成 Combo、最高分 localStorage 记录、重新开始按钮。消除动画、下落动画、渐入特效。界面精美、现代简约风格。

一句话涵盖了所有核心玩法：8×8 棋盘、6 种宝石、点击交换、三连消除、连击加成、动画特效。

五、开发过程

5.1 提交需求

在终端中执行码道命令，用自然语言描述需求：

codearts run --format json "创建一个消消乐Match-3网页游戏，使用单文件HTML/CSS/JS实现..."

码道接收到需求后，在约 2 分钟内自动完成分析、规划和代码生成。

5.2 码道自动生成

码道在处理过程中自动完成了以下步骤：

1. 理解需求：提取关键要素——8×8 网格、6 种宝石、交换消除、连击加成、动画效果
2. 规划结构：设计 HTML 骨架、CSS 样式系统、JS 游戏逻辑三层架构
3. 编写代码：生成完整的单文件 HTML 应用
4. 写入文件：将代码写入 match3.html

5.3 码道生成的代码解析

码道生成的是一个纯前端单文件 HTML 应用（345 行），无需任何后端依赖。核心模块如下：

初始化与棋盘生成

const ROWS = 8, COLS = 8, GEM_TYPES = 6;

function initGrid() {
  grid = [];
  for (let r = 0; r < ROWS; r++) {
    grid[r] = [];
    for (let c = 0; c < COLS; c++) {
      let t;
      do { t = randGem(); } while (wouldMatch(r, c, t));
      grid[r][c] = { type: t, el: null };
    }
  }
}

码道生成的初始化逻辑包含了一个关键细节：预检查避免初始棋盘出现三连。wouldMatch() 函数在放置每个宝石时，检查它是否会与左侧或上方形成三连，如果会则重新随机选择——这与专业消消乐游戏的做法一致。

匹配检测引擎

function findMatches() {
  const matched = new Set();
  // 水平检测：逐行扫描连续相同宝石
  for (let r = 0; r < ROWS; r++) {
    for (let c = 0; c < COLS - 2; c++) {
      const t = grid[r][c]?.type;
      if (t != null && grid[r][c+1]?.type === t && grid[r][c+2]?.type === t) {
        let end = c + 2;
        while (end + 1 < COLS && grid[r][end+1]?.type === t) end++;
        for (let k = c; k <= end; k++) matched.add(r * COLS + k);
      }
    }
  }
  // 垂直检测：逐列扫描
  for (let c = 0; c < COLS; c++) { /* ...同上逻辑... */ }
  return matched;
}

匹配检测支持水平 + 垂直两个方向，且能正确处理 4 连、5 连等超长匹配——通过 while 循环向右/向下延伸检测范围。

交换与消除流程

async function trySwap(r1, c1, r2, c2) {
  animating = true;
  await animateSwap(r1, c1, r2, c2);  // 动画：交换位置
  swap(r1, c1, r2, c2);               // 数据：交换网格
  const matches = findMatches();
  if (matches.size === 0) {
    // 非法交换 → 弹回原位
    await animateSwap(r1, c1, r2, c2);
    swap(r1, c1, r2, c2);
    animating = false;
    return;
  }
  combo = 0;
  await processMatches();  // 连锁消除循环
  animating = false;
}

整个消除流程是异步动画链：交换 → 检测 → 消除动画 → 下落填充 → 再次检测（连锁），直到没有新的匹配。非合法交换会自动弹回。

宝石样式系统

码道为 6 种宝石各自设计了独特的渐变色 + 形状标识：

.gem-0 .gem-inner { background: linear-gradient(135deg, #ff6b6b, #ee5a24); }  /* 红-圆形 */
.gem-1 .gem-inner { background: linear-gradient(135deg, #48dbfb, #0abde3); }  /* 蓝-三角 */
.gem-2 .gem-inner { background: linear-gradient(135deg, #ffd32a, #f9ca24); }  /* 黄-菱形 */
.gem-3 .gem-inner { background: linear-gradient(135deg, #7bed9f, #26de81); }  /* 绿-五边形 */
.gem-4 .gem-inner { background: linear-gradient(135deg, #d4a5ff, #a55eea); }  /* 紫-圆环 */
.gem-5 .gem-inner { background: linear-gradient(135deg, #ff9ff3, #f368e0); }  /* 粉-六边形 */

每种宝石除了颜色不同，还有独特的 CSS 形状（圆形、三角形、菱形、五边形、圆环、六边形），即使色觉障碍用户也能通过形状区分。

动画系统

.gem.eliminating { animation: eliminate .4s ease forwards; }
@keyframes eliminate {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.3); opacity: .8; }
  100% { transform: scale(0);   opacity: 0; }
}
.gem.falling { transition: top .35s cubic-bezier(.4, 0, .2, 1); }
.gem.spawning { animation: spawn .35s ease backwards; }
@keyframes spawn {
  0%   { transform: scale(0) rotate(180deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg);   opacity: 1; }
}

三种动画覆盖了全部交互：

• 消除动画：放大 → 缩小消失（0.4s）
• 下落动画：cubic-bezier 缓动模拟重力（0.35s）
• 生成动画：旋转 + 缩放渐入（0.35s，带延迟交错）

六、真实运行效果

6.1 初始状态

打开 match3.html，展示的是完整的 8×8 宝石棋盘，每颗宝石有不同的渐变色彩和形状标识。顶部有分数、连击、最高分三个信息面板，底部是重新开始按钮。整体采用深色渐变背景 + 毛玻璃面板的现代简约风格。

6.2 游戏进行中

点击一个宝石选中（白色发光脉冲动画），再点击其上下左右相邻的宝石，触发交换。匹配成功则消除得分，消除后上方宝石下落，顶部补充新宝石。每次消除都有浮动 "+分数" 弹窗。

6.3 不同棋盘布局

每次打开游戏，棋盘都是随机生成的（且保证初始无三连）。不同的宝石组合展现出丰富的视觉变化。

6.4 最终效果

连续消除触发连击（Combo）加成，连击倍数递增，分数快速累积。最高分自动保存到 localStorage，下次打开游戏自动读取。点击"重新开始"按钮随时重置。

七、能力总结

通过这次实践，码道展现的 TUI 开发能力可以概括为：

能力项	表现
自然语言理解	准确提取"8×8 网格""交换消除""连击加成""动画特效"等需求要素，全部实现
游戏逻辑	三连检测 + 四连五连扩展 + 非法交换弹回 + 下落填充 + 连锁消除，逻辑完整
视觉效果	6 种宝石各自独立渐变色 + CSS 形状标识，消除/下落/生成三种动画，毛玻璃面板
用户体验	选中高亮动画、连击弹窗、分数浮动、最高分持久化、移动端响应式
代码质量	345 行纯前端单文件，零依赖，async/await 异步动画链，浏览器即开即用

以一个自然语言需求为起点，码道产出了一个玩法完整、视觉精美、可独立运行的消消乐游戏，覆盖了游戏逻辑、UI 设计、动画系统三个层面。

八、总结

此次使用码道开发消消乐网页游戏，从描述需求到拿到可运行代码，全程约 2 分钟。码道表现出色地完成了以下工作：

• 自动创建完整的游戏逻辑（初始化、交换、匹配、消除、下落、连锁）
• 生成精致的视觉系统（6 种渐变色宝石 + CSS 形状 + 3 种动画 + 毛玻璃 UI）
• 实现完整的交互体验（选中动画、连击弹窗、分数浮动、最高分持久化）
• 零依赖、即开即玩（345 行单文件 HTML，直接浏览器打开）

对于"做一个能玩的小游戏"这类场景，码道的体验远超手动编码——你只需要用自然语言描述玩法，剩下的交给码道。

下次想快速做一个网页小游戏？打开码道，一句话搞定。

---

本文项目源码由码道（CodeArts）自动生成，运行效果截图为真实浏览器截图。