花鸟鱼虫连连看游戏（花鸟鱼虫怎么连线）

《连连看》这种经典游戏，肯定是90后的孩子玩的。无论是在电脑上还是手机上，规则都很简单，就是连接相同的方块并消去，要求不超过三条连接线。边肖最近写了这款经典游戏，并首次展示了游戏界面:

分析:如何连接

连连看游戏的核心是如何判断两个方块是否相连。这其实是一般游戏中的寻路算法之一，如何找到从一个点到另一个点的最短路径，但是实现一个寻路算法的过程比较复杂，本文就不深入展开了。这里将使用另一种思维方式来寻找路径。

边肖编了一个java学习资料，私信回复[01]获取源代码。

在连连看中，只有以下三种情况可以排除。

直线连接。

一个角落。

两个角。

前两种情况相对简单，但第三种情况可能在游戏中有多个连接。

看起来很复杂。其实你只需要计算出地图上X轴和Y轴上可以直接相连的两个方块的坐标，每个方块就可以得到两个数组(X轴和Y轴上可以直接相连的点)，然后在两个方块的X轴和Y轴数组上做一个比较运算就可以得到角点位置。

以上简要分析了connection的基本实现思路，然后开始写代码。

程序

生成地图

点击事件

拿连接线

画一条连接线

生成地图

首先要做的，当然是随机生成一张地图。

game.vue

从'导入单元格。/cell '

从'导入实用程序../utils '

'导入配置自'../config '

从'导入主题'../主题

导出默认值{

组件:{

细胞

},

data () {

返回{

CellData: []，//映射数据数组

CurrentSelect: null，//当前选中的框。

Config: Object.assign(config) //配置信息

}

},

计算值:{

当前主题(){

//当前主题

return themes . filter(e = > e . name = = = this . config . default theme)[0]

}

},

已安装(){

this.init()

},

方法:{

// ...

}

}

cell.vue

这里，div空的:before和:after伪类用于显示连接器。

导出默认值{

名称:'细胞'，

props: ['isSelected '，' isBlank '，' className '，' lineClass '，' isLine']，

计算值:{

类名(){

返回{

' Selected': this.isSelected，// selected。

' Blank': this.isblank，/空 white

[this.className]:是

}

}

}

}

为了更好的扩展链接框的内容，我们用一个数组来保存不同色块的类名，然后把对应的类名放在色块上，通过css控制色块的背景图片。

init(){

console.time('initData ')

this.cellData=this.initData()

console.timeEnd('initData ')

},

initData(){

//classNames = > ['a '，' b '，' c '，' d']每个元素表示一个盒子的类名。

//生成一个正方形数组，把类名放进去。Letcellgroup =
this。当前主题。classnames.map (e = > {

返回{

IsBlank:false，//when空白盒。

ClassName:e，//盒子的类名。

LineClass:' '，//连接线的类名。

IsLine:false，//是否显示连接线？

isSelected:false

}

})

/空白盒

letblankCell{

isBlank:没错，

类名:“”，

lineClass:“”，

isLine:假的，

isSelected:false

}

//首先根据配置的方块数，随机取出几块LetRandomCellGroup = utils。ArrayRandom(单元格组，
this。配置。CellGroupCount)从方形数组中取出。

//然后随机填写一个地图数据let cell data =
utils。ArrayfilbyRandomGroup(this . config . row * this . config . col，RandomCell Group)根据配置中的行和列。

//按照行的大小将数据转换成二维数组，然后在外面包裹一层空白色节点。

/*

* Utils.dyadicArrayWrap

*通过填充包装一个二元数组

* @params arr源arr

* @params填充要包装的源数组

*

* 0 0 0 0 0

* 1 1 1 0 1 1 1 0

* 1 1 1 => 0 1 1 1 0

* 1 1 1 0 1 1 1 0

* 0 0 0 0 0 */let result = utils . dyadicarraywrap(utils . arraytodyadic(cell data，this.config.col)，blankCell)

//最后，将行和列的坐标设置到节点。

result.forEach((cols，row)=>{

cols.forEach((单元格，列)=>{

cell.row=row

单元格.列=列

})

})

返回结果

}

最后，我们得到一个地图数据的二维数组。

选择事件

下一步是选择盒子事件。

为了提高性能，click事件没有直接绑定到box，而是绑定到外层表，由事件代理实现。在这里我也吐槽一下，Vue目前没有事件代理。为了提高绑定的性能，我们需要自己实现一个事件代理。

//单击事件代理。

手柄点击(电动){

//如果盒子上没有触发click事件，则退出if(ev.target.nodeName！=='TD ')返回

//获取被点击框的坐标。如果框是空，那么退出letcol=ev.target.cellIndex

let row = ev . target . parent node . rowindex

letcurrentCell = this . cell data[row[col]

if(currentCell.isBlank===true)返回

this.selectCell(currentCell)

},

//选择框

selectCell(currCell){

如果(！this.currentSelect){

//如果没有选中框，直接设置选中的currCell.isSelected=true。

this.currentSelect = currCellre

转动

}

if(this . current select = = = curr cell){

//如果被点击的框和被选中的框相同，那么这个框的选中状态将被取消。currCell.isSelected=false。

this.currentSelect=null

返回

}

letprevCell=this.currentSelect

//使用className判断前后两个方块的图片是否相同if(prevCell.className！==currCell.className){

//如果两个方块的类名不同，则将点击的方块设置为选中状态prevCell.isSelected=false。

currCell.isSelected=true

this.currentSelect=currCell

返回

}

//获取两个方块的连线路径数组console.time('getLine ')。

let result = this . getline(prev cell，currCell)

console.timeEnd('getLine ')

if(result.length===0){

//如果没有得到连接线，意味着两个方块无法连接，那么将点击的方块设置为选中状态prevCell.isSelected=false。

currCell.isSelected=true

this.currentSelect=currCell

}否则{

//如果获得连接线，则将两个方块设置为空白方prevCell.isBlank=true。

currCell.isBlank=true

prevCell.className= ' '

currCell.className= ' '

prevCell.isSelected=false

currCell.isSelected=false

this.currentSelect=null

//最后画连接线。

this.drawLine(结果)

}

}

选择的逻辑判断到这里，接下来就是本文的核心，如何获取连接路径。。

拿连接线

这个内容有点长，分几块写。

首先描述一下下面多次提到的可连线。

在搜索可连通线时，红色方块是要搜索的方块，黑色是另一个方块，白色是空白色方块，这样就可以从红色方块向前向后遍历，得到一个可访问的方块集合对象，即图中所有的白色方块。

getLine

找到连接线的入口

getLine(以前，当前){

//连接器数组

letresult=[]

//直线相连。

// 分别获取最后选中的盒子在X轴和Y轴上的可连线，其中gethorizontaline和getVerticalLine都返回一个Set对象，使用has快速高效的判断一个盒子是否letpreview = this。gethorizontaline (prev)包含在可连接线中。

letprevH = this . gethorizontalline(prev)

if(prev . has(curr))返回this.getBeeline(prev，curr)

let prevv = this . getverticalline(prev)

if(prev . has(curr))返回this.getBeeline(prev，curr)

//如果直线连接失败，则获取另一个正方形的可连线。

let currh = this . gethorizontalline(curr)

let currv = this . getverticalline(curr)

//快速判断。如果X轴和Y轴上某个正方形的可连通长度为0，则返回空数组。

如果((！prevH.size&&！prev . size)| |(！currH.size&&！currV.size))返回结果

//可以连接一个角。

//分别对X轴和Y轴上的可连线进行相交判断。

etintersection = this . getintersection(prevH，currV)| | this . getintersection(prevV，currV)