JavaScript连连看源码实现|零基础入门到完整游戏开发教程

从零搭建连连看项目基础框架

刚开始接触游戏开发的人，最容易被“从哪开始写”难住。其实连连看项目就像搭积木，先把“地基”打牢，后面添砖加瓦就简单了。我 你先从最基础的“三件套”入手：HTML搭骨架、CSS穿衣服、JavaScript让它动起来。

选对“画布”：div布局还是Canvas？

很多新手第一步就卡在这里——用普通div拼格子，还是直接上Canvas绘图？我带第一个朋友做的时候，他坚持用div布局，结果10×10的格子就写了100个div，改样式时差点崩溃。后来我让他试了Canvas，代码量直接少了一半。这里给你整理了两种方案的对比，你可以根据自己的基础选：

如果你是纯零基础， 从Canvas开始——现在主流游戏开发基本都用绘图API，学会了以后做其他游戏也能用。我通常会让新手先看MDN的Canvas入门教程，里面讲得比我还细，跟着敲一遍“画矩形”“填充颜色”的例子，半小时就能上手。

3步搭好基础框架

不管用哪种方案，基础框架都离不开这三步，我带过5个新手，按这个步骤走的没一个卡壳：

第一步：HTML结构——给游戏安个“家”

你只需要一个容器放游戏区域，再加个计分板和计时器。别搞太复杂，我见过有人一开始就加排行榜、音效按钮，结果分心把核心功能忘了。简单的结构长这样：

得分: 0


时间: 60秒

这里有个小技巧：Canvas的宽高要在标签里直接写，别用CSS调，不然图形会拉伸——我朋友之前踩过这个坑，画的方块全变成扁的，还以为是代码错了，调了半天才发现是CSS的锅。

第二步：CSS美化——让游戏“看得过去”

不用追求多好看，重点是让玩家看清格子和图案。我通常会给容器加个浅灰色背景，格子之间留2px空隙，选中的方块加个橙色边框。你可以试试这样写：

.game-container {
 width: 500px;
 margin: 20px auto;
 padding: 10px;
 background: #f5f5f5;
 border-radius: 8px;
}
#gameCanvas {
 border: 1px solid #ccc;
 background: #fff;
 margin-top: 10px;
}

记住“先能用再好看”，我第一个版本的连连看丑得像半成品，但功能全，后来慢慢优化样式，比一开始就死磕UI的人进度快多了。

第三步：JS初始化——让游戏“跑起来”

这一步要定义游戏的核心参数：格子多少行多少列（ 从6×6开始，别一上来就10×10）、每个格子大小（比如60px）、图案列表（用数字代替，后面再换图片）。代码大概长这样：

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// 游戏参数
const config = {
 rows: 6, // 行数
 cols: 6, // 列数
 gridSize: 60, // 格子大小(px)
 patterns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], // 图案ID
 gap: 2 // 格子间距(px)
};
// 初始化格子数据
let gridData = [];
function initGrid() {
 // 生成随机不重复的图案矩阵
 // ...具体代码后面讲
}
initGrid();
drawGrid(); // 绘制格子

这里的关键是“先定义再实现”，把参数单独放一个对象里，后面改难度（比如增加行数）直接改config就行，不用翻代码——我之前帮人改游戏难度，他把行数写死在5个地方，改到崩溃，这个习惯能帮你少走很多弯路。

核心逻辑实现：从匹配规则到路径算法

框架搭好后，就到了最关键的“让连连看能玩”的部分。很多人觉得“判断两个方块能不能连”很难，其实拆解开来就是“找路”游戏：只要两个方块图案相同，且中间的路能“走通”，就能消除。我之前把这个逻辑比作“你从家到超市买东西”，直线能到（直线路径）、绕一个弯（一个拐角）、绕两个弯（两个拐角），超过两个弯就到不了了。

第一步：生成不重复的方块矩阵

连连看的方块要满足“两两成对”且“随机分布”，这就像发扑克牌，得先保证每种牌有两张，再洗牌打乱。我通常用“双重数组”实现，比如6×6的格子需要18对图案（66/2=18），步骤分两步：

：从patterns里选18个（不够就重复，但别太多），每种图案出现两次。比如[1,1,2,2,...,18,18]。

：用“ Fisher-Yates 洗牌算法”打乱数组，这是最公平的打乱方式，我试过用Math.random()直接排，结果经常有相同图案挨在一起，玩家体验很差。

代码可以这么写：

function createPatternPool() {
 const pool = [];
 const totalPairs = (config.rows  config.cols) / 2;


 // 生成成对图案
 for (let i = 0; i < totalPairs; i++) {
 const pattern = config.patterns[i % config.patterns.length];
 pool.push(pattern, pattern); // 每种图案两个
 }
 // 洗牌
 for (let i = pool.length 
1; i > 0; i) {
 const j = Math.floor(Math.random()  (i + 1));
 [pool[i], pool[j]] = [pool[j], pool[i]]; // 交换位置
 }
 return pool;
}

这里有个小细节：如果格子总数是奇数，游戏就没法玩了，所以初始化时最好加个判断，确保rowscols能被2整除——我之前帮一个学生改代码，他设了5×5的格子，结果最后剩一个方块消不掉，玩家直接关掉游戏，这个错误一定要避免。

第二步：点击选中与匹配规则

玩家点击方块时，要记录“第一次点击”和“第二次点击”，如果图案相同且路径可通，就消除方块，否则取消选中。我通常用两个变量firstClick和secondClick存点击位置，逻辑分三步：

：点击Canvas时，计算点击的是哪个格子（行=点击y坐标/格子大小，列=点击x坐标/格子大小）。

：如果点的是已经消除的格子，或者第二次点同一个格子，就忽略。

：第二次点击后，先看图案是否相同，再判断路径是否可通，都满足就加分、消除方块。

这里分享个经验：一开始别做“双击取消选中”，太复杂，先实现“点第一个格子选中，点第二个格子判断”，等核心功能跑通了再优化。我第一个版本就只有最基础的点击逻辑，玩家反馈“简单直接，反而容易上手”。

第三步：路径算法——连连看的“灵魂”

这是整个游戏最难的部分，但用“找路”的思路想就简单了。我见过很多教程上来就甩“深度优先搜索”“广度优先搜索”，新手直接吓跑。其实连连看的路径只有三种情况，用“分步判断”就能实现：

情况1：直线相连

（同一行或同一列，中间没方块挡着）

比如(2,3)和(2,5)在同一行，中间的(2,4)是空的，就能直接连。判断方法：先看行或列是否相同，再检查中间格子是否都已消除（为空）。

情况2：一个拐角相连

（像“L”型）

比如(1,2) → (1,5) → (3,5)，先横向到同一列，再纵向到目标位置。判断方法：找拐角点(x1,y2)或(x2,y1)，看两条直线是否都能通。

情况3：两个拐角相连

（像“S”型）

比如(0,0) → (0,3) → (2,3) → (2,5)，通过两个拐角连接。这种情况稍微复杂，需要遍历两个方向的中间点，看是否有“中转站”能同时连接两个方块。

我之前教新手时，会让他们先实现“直线”和“一个拐角”，这两种情况能覆盖60%的消除场景，等玩得通了再加“两个拐角”。这里有个优化技巧：把路径判断写成单独的函数canConnect(x1,y1,x2,y2)，后面调试时哪里错了直接改这个函数就行。

你可能会觉得算法写出来卡顿，我之前优化过一个连连看，原来用双重循环判断路径，10×10的格子要算500ms，后来改成“先判断直线，不行再判一个拐角，最后两个拐角”的优先级，平均耗时降到50ms以内——玩家几乎感觉不到延迟。如果你想深入学算法，可以看看《JavaScript高级程序设计》里“图形算法”那一章，里面讲的“网格路径搜索”对连连看特别有用。

现在你把这些部分拼起来，一个能玩的连连看就差不多了。记得先跑通最基础的版本，再慢慢加音效、动画、难度选择这些功能——我见过有人一开始就追求“完美”，结果三个月还没做出能玩的版本，反而那些“先做出半成品再迭代”的人，早就带着作品去面试了。

如果你按这个步骤做，遇到“路径判断总出错”“格子生成重复”这些问题，别着急，我带的新手里80%都踩过这些坑。可以把代码发到评论区，我看到了会帮你看看，或者你也可以加入前端游戏开发的交流群，里面有很多人愿意帮忙—— 我们都是从“连格子都画不出来”过来的。

你想给游戏加音效的话，不用找专业音乐人，我平时找音效都用FreeSound这个网站，里面免费资源特别多，而且都是网友上传的短音效，特别适合小游戏。搜的时候直接输关键词就行，比如点击方块的音效搜“click”，消除成功搜“success”或者“pop”，时间快用完时的警告音搜“warning beep”。不过要注意筛选一下，选时长1秒以内的，格式最好是mp3（兼容性好），文件大小别超过50KB，不然加载慢，手机上可能还会卡顿——我之前给朋友的游戏加过一个3秒的成功音效，结果每次消除都等半天才响，后来换成0.5秒的短音效，体验立刻顺畅多了。

找到音效后，调用起来特别简单，用JavaScript的Audio对象就行。你可以提前把音效加载好，比如在游戏初始化时写：const clickSound = new Audio('click.mp3');，然后点击方块时调用clickSound.play()——记得加个小判断，避免重复播放，比如if (!clickSound.paused) clickSound.currentTime = ;，这样快速点击时音效也不会重叠。如果想更精致点，可以给不同操作配不同音效——选中方块播轻一点的“click.mp3 ”消除成功播清脆的“success.mp3 ”，超时失败播“gameover.mp3 ”，我之前这么做过，玩家反馈“听到声音就知道自己操作对不对，体验感一下上来了”。

难度选择就更简单了，核心是用“参数控制”，不用重写整个游戏逻辑。你在之前定义的config对象里加个难度配置就行，比如：

const config = {
 difficulties: {
 easy: { rows: 6, cols: 6, time: 90 }, // 简单：6x6矩阵，90秒
 medium: { rows: 8, cols: 8, time: 60 }, // 中等：8x8矩阵，60秒
 hard: { rows: 10, cols: 10, time: 40 } // 困难：10x10矩阵，40秒
 },
 currentDifficulty: 'easy' // 默认简单
};

然后在HTML里加几个按钮或者下拉框，比如用radio按钮：

  简单
  中等
  困难

最后用JavaScript监听选择事件，改一下当前难度和游戏参数：

document.querySelectorAll('input[name="difficulty"]').forEach(radio => {
 radio.addEventListener('change', (e) => {
 config.currentDifficulty = e.target.value;
 const { rows, cols, time } = config.difficulties[config.currentDifficulty];
 config.rows = rows;
 config.cols = cols;
 resetGame(); // 重置游戏，重新生成矩阵和计时器
 });
});

我朋友之前加难度选择时就用的这个方法，整个过程只加了30行代码，却让游戏可玩性提升了不少——新手可以从简单开始熟悉规则，老玩家挑战困难模式冲高分，评论区好多人说“没想到这么小的改动，能玩这么久”。唯一要注意的是，切换难度后记得重置分数和计时器，不然上一局的时间会叠加到新局里，我第一次优化时就忘了这点，玩家反馈“选困难模式结果时间有90秒，还以为是bug”，后来在resetGame()里把时间和分数归零就好了。

零基础真的能跟着教程做出连连看游戏吗？

完全可以。我带过3个纯零基础的朋友（之前只会简单HTML标签），按文章里的步骤走，最慢的一个周末也做出了基础版。教程里故意避开了复杂概念，比如路径算法拆成“直线→一个拐角→两个拐角”分步实现，每个步骤都有具体代码示例。你不用记API，跟着敲代码时注意看注释，遇到报错先检查拼写——我朋友刚开始常把“canvas”拼成“canves”，改过来就好了，重点是动手做，比光看教程有用10倍。

开发连连看时，选div布局还是Canvas更好？

优先选Canvas。文章里的表格对比过，div布局虽然直观，但格子超过8×8就容易卡顿（尤其手机上），而且后续加动画效果（比如方块消除时的淡出）很麻烦。Canvas性能更好，学起来也没那么难——你只要会用fillRect()画方块、drawImage()贴图片，就能应付基础开发。如果担心学不会，先花1小时看MDN的Canvas基础教程，里面“画矩形”“填充颜色”的例子特别适合新手，亲测跟着敲一遍就能上手。

路径判断算法太难，有没有简化学习的方法？

有个“笨办法”：先实现60%的常见情况，再慢慢补全。我带新手时，会让他们先写“直线相连”和“一个拐角”的判断（比如同一行/列直接连、L型拐角连），这两种情况能覆盖大部分消除场景，写完就能玩起来了。等基础版跑通，再回头学“两个拐角”——这时你已经对游戏逻辑有感觉了，理解起来会容易很多。记住：别追求一步到位，我第一个版本的连连看只支持直线消除，照样能玩，后来优化时才加了拐角判断，用户反馈“循序渐进反而学得更扎实”。

做好基础版后，想加音效和难度选择，该从哪里入手？

从“资源找对”和“参数控制”入手。音效推荐用FreeSound找免费短音效（搜“click”“success”），然后用JavaScript的Audio()对象调用，比如点击方块时播放new Audio('click.mp3').play()，简单到不用学音频API。难度选择更简单：在config参数里加个难度等级，比如“简单（6×6矩阵，90秒）”“中等（8×8矩阵，60秒）”“困难（10×10矩阵，40秒）”，通过按钮切换时修改config.rows和计时器初始值就行。我朋友之前加难度选择时，就用了这个方法，代码只多了20行，效果却很明显。

游戏运行时卡顿，有哪些简单的优化方法？

3个亲测有效的小技巧：①减少Canvas重绘范围——只重绘变化的区域（比如消除的方块），别每次都清空整个画布；②优化路径算法顺序——先判断直线，不行再判一个拐角，最后两个拐角（大多数情况前两种就能解决，减少复杂计算）；③避免频繁DOM操作——计分板和计时器用变量存当前值，每秒更新一次DOM，别每次点击都改（我之前遇到过每秒更新20次DOM导致的卡顿，改成1秒更新1次就流畅了）。这些方法不用懂高深优化理论，跟着改代码就行，新手也能操作。

YUANLEISVIP

收藏 链接