六角消除游戏图片(js)

首页常识更新时间:2023-08-24 16:21:42

先上效果图

编辑器布局

布局如图(图片文件太大拆成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布局完成

perfab制作

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

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

下图是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的形状

json文件

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

代码

总共有3个脚本

该脚本被挂到shapeUnitInfo的perfab上

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

该脚本被挂到game节点上

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

结语

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

谢谢观赏

,
展开阅读全文
推荐内容
热门内容
热门文章

© 2007-2022 http://www.anhuiqq.cn,All Rights Reserved.