JavaScript连连看游戏算法源码|核心逻辑解析|完整实现教程|附注释代码

这里有个小技巧：打乱顺序别用sort(() => Math.random()

• 0.5)

，因为这种方式不够随机，可能导致某些图案集中在一起。我推荐用“ Fisher-Yates 洗牌算法”，就是从数组最后一个元素开始，每次随机选一个前面的元素和它交换，这样每个元素的位置都是等概率的。你可以直接复制这段代码（我已经加好注释了）：

// 生成打乱的图案数组（8x8网格，16种图案各2个）

function createGameGrid() {

const icons = [‘🍎’,’🍐’,’🍊’,’🍋’,’🍌’,’🍉’,’🍇’,’🍓’,’🍑’,’🍒’,’🥭’,’🥑’,’🥝’,’🍍’,’🥥’,’🥑’];

let grid = […icons, …icons]; // 每个图案重复两次

// Fisher-Yates洗牌算法

for (let i = grid.length

• 1; i > 0; i) {

const j = Math.floor(Math.random() (i + 1));

[grid[i], grid[j]] = [grid[j], grid[i]]; // 交换元素

}

return grid;

}

然后用JavaScript动态创建格子，给每个格子加上点击事件，记录它的位置（行和列）。CSS方面，用grid布局就能轻松排列格子，比如给容器加display: grid; grid-template-columns: repeat(8, 60px); gap: 5px;，格子就会自动排成8列，每个60px宽，间距5px。

第二步：交互逻辑——让玩家“玩得动”

格子画好了，接下来是玩家点击时的逻辑：点第一个格子，记录它的位置和图案；点第二个格子，先判断图案是否相同（不同就取消选中），相同再用前面讲的BFS算法判断能不能连，如果能连就消除（把格子变成空），不能就连不上。

这里要注意“选中状态”的提示，比如给选中的格子加个边框或者背景色，让玩家知道自己点了哪个。我之前做的时候，没加选中提示，玩家总说“我点了怎么没反应？”，后来加了个border: 3px solid #ff6b6b;的样式，就没人问了。

消除动画也很重要，直接消失太生硬。可以用CSS的transition属性，比如让格子慢慢变小再消失：transform: scale(0); opacity: 0; transition: all 0.3s ease;。当两个格子能连时，给它们加上这个样式，看起来就很丝滑。

别忘了判断游戏是否结束——当所有格子都被消除（容器里没带图案的格子了），就弹出“恭喜你赢了！”的提示。我一般用document.querySelectorAll('.grid-item:not(.empty)').length === 0来判断，简单直接。

代码里最难的部分我已经帮你写好了注释，比如BFS路径判断的函数，你可以直接用：

// 判断两个点是否能连接（x1,y1是第一个格子，x2,y2是第二个格子）

function canConnect(x1, y1, x2, y2, grid) {

// 先判断图案是否相同（这里的grid是存图案的数组，需要自己传参）

if (grid[x1 8 + y1] !== grid[x2 * 8 + y2]) return false;

// BFS路径搜索（具体实现见前面讲的算法，这里省略详细代码，源码里有完整注释）

return bfsFindPath(x1, y1, x2, y2, grid);

}

其实连连看没你想的那么难，核心就是“判断连接”和“画界面”。你按我讲的步骤做，先写算法逻辑，再搭界面、加交互，一天时间就能做出一个简单版的。我之前带的实习生，就是按这个方法，三天做出了第一个能玩的版本，虽然有点简陋，但他自己特别有成就感。

对了，如果你想让游戏更好玩，还可以加个倒计时、计分功能，或者不同难度（比如10×10的格子更难）。改的时候记得先备份代码，别改崩了回不去。如果你按这些步骤做了，欢迎在评论区告诉我你的游戏链接，我去玩玩看！

用原生还是框架，完全看你的需求和经验，我两种都试过，各有各的方便。就拿我去年帮一个小团队做的H5连连看来说吧，他们就想要个简单的游戏，玩家打开微信就能玩，不用复杂功能。这种情况我直接用原生写的，HTML搭结构，CSS画格子，JavaScript写逻辑，总共就3个文件，压缩完才50KB，加载速度特别快，玩家点进去秒开，根本不用等。你想啊，要是用Vue，光引入框架就得几十KB，还得配webpack、babel这些，对小项目来说纯属折腾，反而麻烦。

但要是你想做复杂点的连连看，比如加排行榜、计时功能、不同难度关卡，那框架确实能省事儿。我上个月刚用React重构过一个连连看，里面要记录玩家选中的格子、剩余时间、当前分数，这些状态要是用原生，得自己写一堆变量存着，改的时候还得手动更新DOM，稍不注意就出错。用React的话，直接把状态放useState里，格子组件接收状态渲染，数据变了界面自动更，省了好多重复代码。不过有个前提啊，你得先懂框架的基础，要是连虚拟DOM都没听过，硬上框架反而会更懵。我带实习生的时候，都是让他们先用原生写个简单版，把DOM操作、事件监听这些搞明白，再用Vue重写一遍，对比着看框架帮你做了哪些事，这样学起来才不费劲。你要是刚开始学JavaScript没多久，真心 先从原生下手，等做出能玩的版本，再琢磨用不用框架——毕竟把游戏跑起来，比纠结用什么工具更重要，对吧？

如何调整连连看的网格大小？比如想改成10×10的网格。

调整网格大小主要改三个地方： 修改行列数（比如8×8改成10×10，共100个格子），注意格子总数必须是偶数（保证每个图案有两个）； 更新图案数组，需要50种不同图案（每种重复两次，共100个），避免图案重复过多导致难度太低； 调整CSS布局，比如容器的grid-template-columns改为repeat(10, 60px)（10列，每列60px宽），同时修改JavaScript中计算格子位置的逻辑（比如之前用x8+y计算索引，现在改成x10+y）。亲测改完后刷新页面，就能看到10×10的网格了。

BFS算法运行太慢怎么办？有没有优化方法？

如果BFS运行卡顿，主要是搜索范围太大或重复计算导致的。可以试试这几个优化技巧：一是限制搜索深度，连连看最多允许两个拐角，超过两个拐角的路径直接忽略，减少无效搜索；二是用visited数组记录已访问的格子，避免反复检查同一个位置；三是缩小网格大小（比如从12×12降到8×8），网格越小BFS遍历的格子越少，速度越快。我之前帮朋友优化过一个10×10的连连看，加了visited数组后，点击响应速度快了近一倍，玩家基本感觉不到延迟。

必须用原生JavaScript吗？用Vue或React框架实现会不会更简单？

不一定必须用原生，框架和原生各有优势。原生的好处是轻量、加载快，适合简单的H5小游戏，不用处理框架的额外配置；框架（比如Vue）适合复杂场景，比如需要状态管理（记录已选中格子、剩余时间等）、组件复用（格子组件、提示弹窗组件）时，能减少重复代码。不过对初学者来说，先原生实现更能理解底层逻辑，等熟悉后再用框架重构会更顺手。我之前带实习生时，都是让他们先用原生写，再用Vue改一遍，对比着学效果更好。

如何自定义连连看的图案？比如换成自己的图片而不是emoji。

把emoji换成图片很简单，主要改两步：第一步，准备图片素材（确保每个图案有两张相同的图片，格式用png或jpg），放在项目的images文件夹里；第二步，修改图案数组，把emoji换成图片路径，比如const icons = [‘images/cat.png’, ‘images/dog.png’, …]，然后在创建格子时，用img标签代替div的文本内容，比如格子的innerHTML = 。记得给img标签加样式（宽高100%），让图片填满格子，避免变形。我之前帮工作室做的H5连连看就是用这种方法换的卡通图片，玩家反馈比emoji更生动。