Cocos Creator 做数字游戏 | 二维矩阵节点的链式选择和取消!

效果预览

Cocos Creator 做数字游戏 | 二维矩阵节点的链式选择和取消!

操作方法

点击选中开始节点,按住拖动到相邻的节点,相邻节点添加至选择链中,沿着链往回拖,将会取消之前选择的节点,如上面效果图所示。

实现流程

1. 按照 6*6 添加单元内容,单元内的数字,1-9 随机;

2. 给随机布局的矩阵节点添加监听消息,监听 TOUCH_START、TOUCH_MOVE、TOUCH_END 事件;

3. 在 TOUCH_START 中添加选择链首节点;

4. 在 TOUCH_MOVE 中判断触摸节点是否是选择链尾节点的相邻节点;

5. 如果是链尾的相邻节点,且未被选中,添加该节点至链尾,增加连接线;

6. 如果是链尾的相邻节点,且被选中过,取消上一个节点,删去连接线;

7. 如果不是链尾的相邻节点,不做处理;

8. 在 TOUCH_END 中取消选中的所有节点;

实现算法

核心算法是判断一个节点是否与一个已知节点相邻,相邻的节点只有四种情况:左、右、上、下;

游戏中,节点的排列顺序是从屏幕左下角为原点,X 轴正向先排列,排完 6 个,再沿着 Y 轴正向排列,直到排列完 6*6 的完整格子,索引从 0-35,游戏中,就是根据索引判断是否相邻。

判断是否是左相邻节点:

Cocos Creator 做数字游戏 | 二维矩阵节点的链式选择和取消!

判断是否是右相邻节点:

Cocos Creator 做数字游戏 | 二维矩阵节点的链式选择和取消!

判断是否是上相邻节点:

Cocos Creator 做数字游戏 | 二维矩阵节点的链式选择和取消!

判断是否是下相邻节点:

Cocos Creator 做数字游戏 | 二维矩阵节点的链式选择和取消!

其中 isTarget 方法通用,主要判断当前点击位置,是否点击在对应节点上:

Cocos Creator 做数字游戏 | 二维矩阵节点的链式选择和取消!

链节点实现

做成预制体 Cell,挂载 Cell 脚本,脚本控制单元中随机数字的生成,选中和未选中状态的切换。

Cocos Creator 做数字游戏 | 二维矩阵节点的链式选择和取消!

游戏介绍

完整的游戏尚未做完,具体玩法是,屏幕上会随机一个数字,玩家通过选择节点链,若节点链上所有数字之和等于随机的数字,则得分,否则失败。后续更新,将会陆续分享,扫码关注公众号!

Cocos Creator 做数字游戏 | 二维矩阵节点的链式选择和取消!