cocos js 六边形消除小游戏

先上效果图

布局如图(图片文件太大拆成3个文件)

流程如下

1. 创建新场景
2. 在场景中添加一个名为game的空节点，坐标(0，0)，宽高(720，1280)
3. 在game节点下添加两个单色sprite分别命名为TopNode和BottomNode，再添加一个空节点MiddleNode
4. TopNode坐标(0，540)，宽高(720，200)，颜色值(167，167，167，255)灰色，TopNode节点增加两个label 控件，一个用来显示标题，一个用来计算分数
5. BottomNode坐标(0，－520)，宽高(720，240)，颜色值和TopNode颜色值相同
6. MiddleNode坐标(0，20)，宽高(720，840)
7. 把GameScene脚本拖到game节点上，把对应的节点及变量拖到脚本变量上

至此UI布局完成

该游戏共用了26个perfab，其中shapeShow0到shapeShow24表示所有7种类型25种形状，而shapeUnitInfo是一个cell(最小单位)

• shapeUnitInfo

shapeUnitInfo节点挂了一个shapeUnitInfo脚本，把图集和Icon节点拖进去就可以

• shapeShow

下图是shapeShow1

shapeShow节点挂了shapesSelect脚本.

1. 变量ColorIndex表示类型也就是颜色，从1开始。总共有7种类型
2. 变量CollisionRuleArray表示前一个cell与后一个cell的位置关系，因为一个形状由多个cell组成

如上图以shapeShow1为例，上图组成了一条横着的直线，它的CollisionRuleArray是{2，2，2}因为每一个cell都在前一个cell的右边，至于为什么是2是因为以第一个cell为例它的周围6个cell的位置从左上0开始顺时针，到正右方就是2。

shapeShow0是比较特殊的，它只有一个cell，它没有后续的cell所以它的CollisionRuleArray是空的

如上图是所有的7种类型，25种形状，每种颜色就是一种类型，依次对应shapeShow0到shapeShow24的形状

unitInfo文件是用来记录所有cell的信息的

• x表示X坐标，从左上开始
• y表示Y坐标，从左上开始
• serialNum表示唯一索引，也可叫做序列号，从0开始
• adjacent表示该cell周围6个cell的的序列号，－1表示该cell的某个方向没有cell，从左上开始顺时针计算

总共有3个脚本

• shapeUnitInfo

该脚本被挂到shapeUnitInfo的perfab上

• ShapesSelect

该脚本被挂到25个shapeShow的perfab上

• GameScene

该脚本被挂到game节点上

规则都理解了之后，代码就很简单了，就不做讲解了

最近创作上出现了瓶颈，不知道该写些什么，不过我会继续垂直于技术类文章的创作

谢谢观赏