小伙转行做前台程序员，用JS开发的经典连连看把全球玩家都逼疯了

连连看原理理解一下

在传统的连连看游戏中，玩家想要成功连线并消除。需要满足2个条件才能够进行消除并得分。

条件1：图片类型必需相同

条件2：连接2张图片的线条的弯曲次数必需得小于等于2次。

游戏界面如下：

在开始游戏前，我们需要对图片进行标识，才能进行图片的识别与消除。

实现代码如下：

css文件夹下的index.css文件如下：

下面让我们来看一下最核心的js部分实现代码，js部分分为三个源文件即game.js、map.js、piece.js每一个源文件对应一个类，其中本游戏通过game类来操纵map和图片piece对象：

game.js代码如下：

自己设置的js版映射结构map.js源文件如下：

图片类piece.js源文件如下：

js实现搜索路径算法首先最简单的是判断两个图片是否直线到达函数代码如下：

在拐一次弯搜索的函数中调用了直接搜索的函数，同样最复杂的拐两次弯搜索也会调用拐一次弯搜索的函数。该函数以点击的图片为中心分别沿x轴,y轴开展搜索。

假如有想学习web前台的同学，可来我们的web前台技术学习QQ群：608334068，免费送整套系统的web前台视频教程！我每晚上8点还会在群内直播讲解前台知识，这是一个仅供粉丝朋友们学习交流的群，欢迎大家前来学习哦~不是学习web前台的小伙伴非诚勿扰哦下面是部分资料截图：

欢迎关注胖胖爱前台的简书号，可视化学习web前台，每天升级文章，让web前台学习更加简单。

公告：本文内容来源于网络，如有侵权请联络删除