从零到一：纯前端消消乐游戏开发全记录

本文记录了使用纯 HTML/CSS/JavaScript 开发消消乐（Match-3）游戏的完整技术路线、实战经验、踩坑心得与优化方向。

一、技术路线选型

为什么选择纯前端单文件方案？

消消乐是一个经典的休闲益智游戏，核心逻辑完全在客户端运行，不需要任何后端支持。考虑到"小工具"的定位——打开即玩、零安装、易分享，我选择了纯前端单文件方案：

• 单 HTML 文件：所有 HTML、CSS、JavaScript 内联在一个 index.html 中，用户只需下载一个文件即可运行
• 零外部依赖：不引入任何 CDN、框架、库，避免网络依赖
• ES5 兼容写法：使用 var、function 声明，确保在更多浏览器上可用

这个选型的核心权衡是 ** simplicity vs. maintainability**。单文件方案牺牲了代码可维护性（所有代码挤在一起），但极大降低了使用门槛——这对一个"小工具"来说是正确的取舍。

技术栈一览

二、核心算法实现

2.1 棋盘初始化——避免初始匹配

游戏开始时需要生成一个没有初始三连的棋盘，否则玩家还没操作就自动消除了：

do {
    board = [];
    for (var r = 0; r < N; r++) {
        board[r] = [];
        for (var c = 0; c < N; c++)
            board[r][c] = rnd();
    }
} while (fM().length > 0);  // fM = findAllMatches

这里用 do-while 循环重新生成直到无匹配。对于 8×8 网格 6 种糖果，初始有匹配的概率不高，通常 1-3 次循环就能得到合法棋盘。

2.2 匹配检测——行扫描 + 列扫描

匹配检测是消消乐的核心算法。我的实现采用 行扫描 + 列扫描 双遍策略：

function fM() {
    var matched = {}, res = [];
    // 水平扫描
    for (var r = 0; r < N; r++) {
        var cnt = 1;
        for (var c = 1; c <= N; c++) {
            if (c < N && b[r][c] === b[r][c-1] && b[r][c] !== -1) {
                cnt++;
            } else {
                if (cnt >= 3) // 记录匹配位置
                cnt = 1;
            }
        }
    }
    // 垂直扫描（同理）
    // 用 matched 对象去重（一个位置可能同时被行和列匹配）
    return res;
}

关键设计：使用对象 matched 做位置去重。一个糖果可能同时在水平三连和垂直三连中，如果不去重会导致重复计分。

2.3 消除与下落——重力填充

消除后需要让上方糖果下落，顶部补充新糖果：

消除前:     下落后:      填充后:
[A][B][C]   [ ][ ][ ]   [E][F][G]
[D][E][F]   [A][B][C]   [A][B][C]
[G][H][I]   [D][E][F]   [D][E][F]

下落算法从每列底部向上扫描，将非空糖果"压实"到底部：

for (var c = 0; c < N; c++) {
    var wr = N - 1;  // 写入指针从底部开始
    for (var r = N - 1; r >= 0; r--) {
        if (b[r][c] !== -1) {
            b[wr][c] = b[r][c];
            if (wr !== r) b[r][c] = -1;
            wr--;
        }
    }
}

2.4 连锁消除——递归式 while 循环

消除后糖果下落可能产生新的匹配，需要 连锁处理：

async function pM() {  // processMatches
    var m = fM();
    while (m.length > 0) {
        cc++;  // combo count
        var gain = m.length * SP + (cc - 1) * CB * m.length;
        sc += gain;
        // 消除动画 -> 下落 -> 填充 -> 重新检测
        m = fM();  // 检查是否产生新匹配
    }
}

连消加分公式：得分 = 糖果数 × 基础分 + (连消层级-1) × 连消奖励 × 糖果数。第2次连消开始有额外奖励，鼓励玩家制造连锁反应。

2.5 无解检测——预交换探测

当棋盘上没有任何可能的消除操作时，游戏陷入死局。需要在每次操作后检测：

function hP() {  // hasPossibleMoves
    for (var r = 0; r < N; r++)
        for (var c = 0; c < N; c++) {
            // 尝试与右邻交换
            if (c < N - 1) {
                sw({r, c}, {r, c: c+1});
                if (fM().length > 0) { sw(...); return true; }
                sw(...);  // 交换回来
            }
            // 尝试与下邻交换（同理）
        }
    return false;
}

这个算法的时间复杂度是 O(N²)（遍历每个格子）× O(N²)（每次匹配检测）= O(N⁴)。对 8×8 网格来说约 4096 次比较，完全可以接受。

三、UI/UX 设计心得

3.1 视觉设计

• 渐变背景：紫蓝渐变 (#667eea → #764ba2) 营造游戏氛围
• 糖果配色：6种糖果各有独立渐变色，视觉区分度高
• Emoji 图标：🍓🍇🍋🥝🫐🍊，比纯色块更生动，且无需图片资源
• 选中反馈：金色脉冲动画，明确告知玩家当前选中项

3.2 动画系统

所有动画用 CSS Keyframes 实现，性能优于 JS 动画。

3.3 交互设计

• 点击交换：先选一个，再点相邻的，非相邻则切换选中
• 提示功能：遍历所有可交换组合，高亮第一组找到的
• 步数进度条：可视化剩余步数，渐变宽度条
• 过关/失败覆盖层：半透明遮罩 + 居中信息，不打断游戏视觉

四、踩坑记录

4.1 async/await 在 ES5 中的替代

最初想用 async/await 处理动画时序，但为了兼容性改用 Promise + setTimeout：

function sl(x) { return new Promise(function(r) { setTimeout(r, x) }); }

配合 async function 在现代浏览器中可用，在不支持的环境降级为同步执行。

4.2 事件绑定的闭包陷阱

在循环中创建 DOM 元素并绑定事件时，经典的闭包陷阱：

// 错误写法：r/c 始终是循环结束后的值
g.addEventListener("click", function() { hC(r, c); });

// 正确写法：用 IIFE 捕获当前值
(function(rr, cc) {
    g.addEventListener("click", function() { hC(rr, cc); });
})(r, c);

4.3 触摸事件与点击事件的冲突

移动端同时绑定 click 和 touchstart 会导致双触发。解决方案：touchstart 中 e.preventDefault() 阻止后续 click 事件。

4.4 Grid 布局的动态尺寸

棋盘需要根据屏幕宽度动态计算格子大小：

var cs = Math.min(44, (Math.min(window.innerWidth * 0.85, 460) - 36) / N);

同时监听 resize 事件重新渲染，保证旋转屏幕时自适应。

五、存在问题与优化空间

5.1 当前不足

1. 无音效：消除、连消、过关都缺少音效反馈，体验感打折
2. 无特殊糖果：缺少4消生成条纹糖、5消生成彩色炸弹等高级玩法
3. 单文件可维护性差：所有代码内联，后续修改容易牵一发动全身
4. 无难度曲线：关卡间仅增加步数和目标分数，缺少机制变化
5. 无数据统计：没有记录每关用时、最大连消等历史数据

5.2 优化方向

5.3 架构优化思考

如果要做更完整的版本，建议的架构：

match3-pro/
├── src/
│   ├── core/          # 游戏核心逻辑（纯函数，可测试）
│   │   ├── board.js   # 棋盘生成、匹配检测
│   │   ├── match.js   # 匹配算法
│   │   └── score.js   # 计分系统
│   ├── ui/            # UI 渲染层
│   │   ├── render.js  # DOM 渲染
│   │   └── animate.js # 动画控制
│   ├── audio/         # 音效模块
│   └── store.js       # 状态管理
├── tests/             # 单元测试
├── dist/              # 构建产物
└── package.json

将核心逻辑与 UI 渲染分离，核心算法可以独立单元测试，UI 层可以替换为 Canvas 或 WebGL 实现。

六、总结

这个消消乐小工具虽然代码量不大（约 300 行有效代码），但涵盖了游戏开发的核心要素：

• 状态管理：棋盘数据、分数、步数、关卡
• 算法实现：匹配检测、下落填充、无解检测、连锁消除
• 异步处理：动画时序控制
• 交互设计：选中、交换、提示、过关
• 视觉表现：渐变、动画、响应式

最大的心得是：对于小工具，简单就是最好的架构。不需要 React/Vue，不需要构建工具，不需要后端——一个 HTML 文件就能带来完整的游戏体验。技术选型应该服务于产品定位，而不是反过来。

本文为原创技术分享，转载请注明出处。