原生 JavaScript 实现连连看游戏核心算法与源码解析

游戏界面布局与样式设计

连连看游戏的界面主要由游戏面板、分数显示、时间倒计时以及控制按钮组成。在 HTML 结构中，所有元素被包裹在一个主容器 #whole 中。其中，#gamePanel 用于承载所有图片方块，右侧区域分别放置了 Logo、分数面板（#score）、时间面板（#time）和操作按钮（开始/重置）。

CSS 样式通过绝对定位（position: absolute）将功能区块固定在右侧，而游戏区域则采用相对定位配合浮动布局来排列每一个 .piece 元素。这种布局方式确保了在不同屏幕尺寸下，游戏主体与侧边栏的比例关系保持稳定，同时也为后续 JS 动态生成 DOM 元素提供了明确的视觉参考框架。

核心数据模型与初始化逻辑

游戏的核心在于对游戏状态的维护。我们定义了一个 Game 对象作为全局控制器，它负责管理地图映射 pieceMap、图片列表 pieceList、随机图片源列表 randomList 以及当前得分和时间等状态变量。

// Game 对象关键属性
var Game = {
    pieceMap : null, // 存储每个坐标对应的Piece对象
    score : 0,
    time : 0,
    isGameBegin : false,
    // ... 其他方法
};

初始化过程主要在 init 函数中执行。首先创建一个自定义的 Map 结构用于快速查找，然后调用 initRandomList 生成成对的图片索引（共 150 个偶数对，覆盖整个棋盘）。接着通过 messRandomList 打乱顺序，并遍历 204 个网格位置（部分边缘位置不填充图片以允许路径穿越），依次创建 Piece 实例并添加到页面 DOM 中。

第1步：构建地图坐标系

为了让算法能够准确识别两个图形是否连通，必须建立严格的坐标系统。在 initPieces 中，横坐标 x 为 i % 17，纵坐标 y 为 Math.floor(i / 17)。我们将每个格子的唯一标识 x+y 作为 Key，存入 pieceMap。这样，在后续判断路径时，可以通过坐标瞬间获取该位置是否存在实体图片。

第2步：绑定点击事件与状态更新

每个 Piece 对象在初始化时都会绑定自身的 onclick 事件。当用户点击方块时，触发 onClick 函数，此时会检查游戏是否已开始，并根据 onClicked 标志位判断是第一次点击还是第二次点击。如果是第二次点击，系统将尝试调用路径搜索算法进行匹配判定。

连连看核心算法：路径搜索

连连看判定的本质是寻找两条相同图片之间是否存在一条“路径”。规则通常包括：只能转弯最多两次，且路径不能穿过其他未消除的图片。我们通过三个主要函数由简入繁地实现了这一逻辑：isStraightReach（直线）、isReach1（一弯）和 isReach2（两弯）。

直线连接检测 (isStraightReach)

这是最基础的检测。如果两个方块的 X 或 Y 坐标相同，则尝试沿该轴遍历中间的所有格子。关键在于判断中间的格子是否为“空”（即不存在图片或已被消除）。在代码逻辑中，通过 isPass() 方法判断，如果某个格子存在 track 元素或者未被占用，则认为可通过。若整条路径畅通，则返回 true。

isStraightReach : function(piece) {
    // 沿y轴方向搜索
    if (this.x == piece.x) {
        for (var i = this.min(this.y, piece.y) + 1; i < this.max(this.y, piece.y); i ++) {
            if (!this.game.pieceMap.get(piece.x + "," + i).isPass()) {
                return false; // 遇到阻碍，中断
            }
        }
        return true;
    }
    // x轴同理...略
}

拐一次弯检测 (isReach1)

当无法直线连通时，尝试寻找转折点。对于起始点 A(x1, y1) 和目标点 B(x2, y2)，理论上存在两个可能的拐角点：C1(x1, y2) 和 C2(x2, y1)。算法首先验证 C1 和 C2 是否为空（可通行）。如果为空，则进一步验证 A 到 C1 以及 C1 到 B 是否都能直线连通。只要其中一个拐点满足条件，即判定为“一弯”可达。

拐两次弯检测 (isReach2)

这是最复杂的逻辑，采用了扩展扫描法。以当前点击的方块为中心，分别向上下左右四个方向发射射线。每当射线上遇到一个空格子，就递归调用或复用 isReach（包含一直线和一弯的逻辑）来判断该空格子是否能与目标点连通。一旦在任意方向上找到这样的路径，即可判定为“两弯”可达。

isReach2 : function(piece) {
    // 沿x轴正向搜索
    for (var i = this.x + 1; i < 17; i ++) {
        var target = this.game.pieceMap.get(i + "," + this.y);
        if (!target.isPass()) break; // 撞墙停止
        if (target.isReach(piece) && target.isPass()) {
            return true; // 找到一个中转点成功
        }
    }
    // 其余方向循环同上...略
}

匹配成功后的反馈与状态清理

当路径算法返回 true 后，流程进入 linkTrack。此时需要给予玩家视觉反馈：将连接路径上的所有格子（包括起点、终点及经过的中转点）的样式切换为高亮轨迹（track2）。随后使用 setTimeout 延迟 500 毫秒执行 hideTrack，清除轨迹样式并将对应的 DOM 元素从游戏中移除（或将其实体标记为空），同时增加分数。

以上就是原生JavaScript实现连连看游戏路径搜索算法与源码结构的详细内容，更多关于JavaScript游戏开发技巧的资料请关注本站其它相关文章！