引言
Cocos游戏开发中的箭头游戏效果
近日，笔者看到小伙伴正在推广他的小游戏，深入游玩了一波，非常精致和益智(就是有点花眼)。看了下排行榜，这类游戏目前依旧非常的火爆。
言归正传，游戏体验过之后，非常感兴趣这个游戏中的箭头游戏效果是如何实现的呢？
今天给大家介绍一下如何在Cocos游戏开发中实现箭头游戏效果，非常感谢小伙伴的投稿。
本文源工程在文末获取，小伙伴们自行前往。
1. 分析一下游戏
我们先来分析一下实现这个游戏有哪些关键点：
-
箭头：既然是箭头游戏，游戏的核心元素就是横七竖八的箭头。
-
箭头的移动：箭头点击之后，可以移动，若前方无阻挡，则可以移出消除，反之则不可移动。
-
关卡编辑：关卡类游戏离不开关卡的编辑，除非关卡的难度可以通过某些参数控制并随机，但是纯随机的游戏也不一定好玩。
2. 怎么实现？
1.箭头
箭头其实就是各种路径的线，然后在顶部加上一个三角形，即可形成箭头。
在Cocos游戏开发中，画线常用的组件就是Graphics组件。
我们画箭头要用到的核心接口如下。
画线过程如下。
画箭头过程如下。
2.箭头移动
箭头移动的逻辑其实和贪吃蛇比较相似，如下图，箭头由5段，6个点组成，箭头移动时，实际上只需要根据方向移动头和尾两个点即可，其他点不用动。
当尾巴的点移动到下一个点的位置时，我们只需要把尾巴的点去掉，那么下一个点就成了新的尾巴。
移动的方向只需要根据相邻的两个点即可判断。
3. 关卡编辑
游戏的功能实现比较简单，较为复杂的在于编辑器，编辑器既要做到方便编辑，最理想的状态下是能够轻松地根据难度生成不同的关卡，又要能够检测关卡是否能正常通关。下面列举几种：
-
手动编辑：生成格子盘，然后通过鼠标点击标注不产生箭头的区域，然后生成。
-
自动生成：根据规则自动生成，自动检测生成的关卡是否能顺利通关。
-
上传图片生成：上传不同形状的图片，根据图片像素去生成关卡，使得关卡更加有趣。
-
Excel编辑生成: 最近看到有小伙伴在
Excel中进行关卡编辑，并且通过宏生成关卡数据，让笔者眼前一亮。
最后看看小伙伴们编辑生成的精美关卡(文末可获取编辑器)。
3. 箭头游戏效果实战
1.创建工程
引擎版本：Cocoscreator 3.8.7
编程语言：TypeScript
首先创建一个Arrow工程：
2.创建脚本
新建一个Main.ts脚本，并且拖拽到Canvas，用于实现我们的实战逻辑。
3.画箭头
首先根据原理，我们通过Graphics组件实现，打开Main.ts脚本，在start方法中添加Graphics组件，并且画一根线宽为10，坐标从(0,0)到(0,200)的线。
- moveTo: 移动到画线起点。
- lineTo: 画线到该点。
- stroke: 开始画线。
运行后就能看到一根长200的线。
接下来我们要画一个三角形，让线头变成箭头，先找到三个点，然后通过fill进行填充形成三角形。
- close: 从当前点画线到起点。
- fillColor: 填充颜色。
- fill: 填充。
运行后就能看到线变成了箭头。
箭头一般不止2个点，于是我们把方法整理一下。
把箭头的路径点加进去，然后进行绘制。
运行后就能得到一个这样的箭头。
4.箭头移动
箭头移动的逻辑相对好写一点，就是让头和尾巴的点沿着方向移动即可，当尾巴点和前一节接触后移除。
点击开始移动。
5.效果演示
结语
还有没玩过这类游戏的吗？实在太火爆了，变种的才刚出来，还能分口热汤吗？
本文实战源码可通过阅读原文获取。
