Cocos游戏开发中的箭头游戏效果

引言

Cocos游戏开发中的箭头游戏效果

近日，笔者看到小伙伴正在推广他的小游戏，深入游玩了一波，非常精致和益智(就是有点花眼)。看了下排行榜，这类游戏目前依旧非常的火爆。

言归正传，游戏体验过之后，非常感兴趣这个游戏中的箭头游戏效果是如何实现的呢？

今天给大家介绍一下如何在Cocos游戏开发中实现箭头游戏效果，非常感谢小伙伴的投稿。

本文源工程在文末获取，小伙伴们自行前往。

1. 分析一下游戏

我们先来分析一下实现这个游戏有哪些关键点：

1. 箭头：既然是箭头游戏，游戏的核心元素就是横七竖八的箭头。

2. 箭头的移动：箭头点击之后，可以移动，若前方无阻挡，则可以移出消除，反之则不可移动。

3. 关卡编辑：关卡类游戏离不开关卡的编辑，除非关卡的难度可以通过某些参数控制并随机，但是纯随机的游戏也不一定好玩。

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.效果演示

结语

还有没玩过这类游戏的吗？实在太火爆了，变种的才刚出来，还能分口热汤吗？

本文实战源码可通过阅读原文获取。

我是"亿元程序员"，一位有着8年游戏行业经验的主程。在游戏开发中，希望能给到您帮助, 也希望通过您能帮助到大家。

AD:笔者线上的小游戏《打螺丝闯关》《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》《方块掌机经典》大家可以自行点击搜索体验。

实不相瞒，想要个赞和爱心！请把该文章分享给你觉得有需要的其他小伙伴。谢谢！

推荐文章：

Cocos游戏如何接入安卓穿山甲广告变现？

你知道和不知道的微信小游戏常用API整理，赶紧收藏用起来~

Cocos游戏如何快速接入抖音小游戏广告变现？

如何在CocosCreator3.8中实现割绳子游戏效果

如何在CocosCreator3.8中实现动态切割模型？