手机游戏移动轮盘怎么玩（教你制作手机游戏中的方向轮盘）

我们都曾经都经历过这样一段朴实无华且枯燥的生活——高中，但在高中时期上数学课是小编比较上头的时候，所以小编的数学作业经常是这样解决的

以至于我们课间经常吐槽说：学这个干啥，买菜用得上吗？

不过自从小编毕业入坑码农，经常面对各种花哨需求和神奇框架后，就再也不敢这么说了。

如何跟还在学校读书的人来劝说数学的实用性？如果举例一些高大上的例子，比如：人工智能、高能物理、空气动力等等这些和普通人沾不上边的东西，估计老师说这些例子的时候自己也懵逼。

不如我们聊聊时下学生中最火的游戏：王者荣耀

作为农药迷这个场景有没有让你热血沸腾，不过小编不打算讨论游戏的玩法，让我们把关注点放在左下角的方向控制轮盘上

这个是在手游领域中很常见的用于控制方向的轮盘，在主流的竞技手机游戏中都用到它作为角色控制的重要组件。现在小编教大家如何利用高中学习到的三角函数来制作这个轮盘。

我们都知道高中学习到的笛卡尔二维坐标系是垂直方向为y轴，水平方向为x轴的直角坐标系，其中y轴上方为正数下方为负数，x轴的右边为正数坐标为负数，交叉点为原点（0，0），如

在游戏开发中定位目标位置时也用到了二维直角坐标系，只不过会有点差别。如下图，区别在于y轴下方为正数，上方为负数，屏幕的左上角为原点。

讲完区别后，我们再来分析下我们需要制作的场景：

我们需要在屏幕左下角制作一个圆形区域的控制轮盘，在圆形区域内转动圆盘时，就会控制到屏幕中间小鸟的飞行方向。

如果只是这样看图的话，估计很多人会比较懵逼，不知道如何下手，这个时候就用到考试时候常用的手段，把需要分析的对象用线连起来：

这么看就很清晰了。我们在转盘上用手指滑动方向时，水平方向上手指与转盘中心连线夹角θ，其实就是作用到小鸟飞行方向的弧度。我们只需要求出θ角，然后利用三角函数就可以求出单位时间内需要作用到小鸟xy轴方向上的单位速度（x4,y4），用小鸟本身的位置坐标（x3,y3）加上（x4,y4）就可以达到控制小鸟飞行方向的目的。

不知道大家注意没有，上面的θ角并不是我们生活里经常使用的角度，它在三角函数求解时，用的是弧度。那为什么不用角度而是要用弧度？在有角度表示的情况下，为什么会出现弧度制？

解释弧度制时，不如我们先来讨论下，角度制是如何出现的。

在公元前约300年古巴比伦时期，古巴比伦人认为地球是宇宙的中心，我们的太阳是绕着地球转的。他们发现从春分日到秋分日，太阳划过半个圆的轨迹，刚好等于180个太阳大小的直径，而且他们当时使用的是60进制法，于是便把一个圆周划分成360份，也就是我们现在理解的360度。但对于现在我们使用十进制法来说，显然计算起来并不方便。

那么弧度制能解决什么问题呢？我们知道弧度其实是可以转化为直线的运动

在汽车轮胎上安装传感器，只需要测出车胎的转速（比如10弧度/秒），乘以半径（比如1米），就得到了汽车的直线速度（这里就是10米/秒)。在航海单位中，海里定义为子午线1角分的长度。

回到求解夹角θd 问题上，相信这难不倒社会主义高中生。我们回顾一下向量的知识，用向量AC减去向量AB等于向量BC，这样就可以得到一个，以B为原点，来求BCD夹角θ。

这时候就可以利用三角函数来求解了，根据tanθ=(y2-y1)/(x2-x1)就可以得到弧度θ的值。假设速度为s, 则x4=s*cosθ,y4=s*sinθ。

分析到这里，我们就可以开始写代码了！这里我们使用国产的游戏引擎白鹭来实现这个需求。

白鹭的开发语言使用的是Typescript，是目前前端开发中比较火的一个JavaScript超集。不过发明这门编程语言的安德斯·海尔斯伯格正是c#的首席架构师，所以同一个爹生的语言，定有八分相像！这难不倒c#出身的小编。

小编用的引擎版本是5.2.30。我们把游戏屏幕设置为横屏，游戏设置如下：

打开egret wing 编辑器，在终端输入命令：egret run -a 便可启动项目。

这里小编不打算一行行讲解代码实现，只挑一些重点实现讲解下，如果有兴趣的同学可以在评论区找我要项目代码。

我们先删除掉项目自带的案例代码，然后为小鸟创建一个游戏对象bird。游戏对象里都会有移动的方法，按照面向对象的思想，我们可以把这个方法抽象成一个父类OperaObject，在父类里定义移动方法，然后让游戏对象去继承父类的移动方法。

在屏幕做下角创建圆形区域的轮盘，在这个轮盘范围定义点击侦听事件、移动侦听事件和触摸弹起侦听事件，在这些事件里面获取到手指触摸的坐标，然后利用上面的三角函数去求解。

之后将求解到的速度去移动小鸟的位置即可。我们看下效果。

good！目标到此也就完成了，不过没有背景显得有点单调，咱们可以再美化一下吧。那么问题来了，我们如何来添加背景，让玩家感觉小鸟是一直在飞的呢？我们可以从王宝强开飞机里得到答案

我们的宝强哥本人其实一直没动，动的是他背后的那条毛巾，来回甩动的毛巾会让人产生王宝强在高速飞行的错觉。所以我们在设置游戏背景的时候也是如此。让背景动，游戏人物不动。首先找一张左右两边可以无缝连接的背景图

然后实例化两份背景A和B, 当A的最右边开始移入舞台时，让B的左边接上去，当A的最右边移出舞台时又转过去继续对接B的最右边，这样一直循环下去。

由此，我们的背景也就搞定了，效果如下：

此外白鹭还支持部署成小游戏，我们来看下如何部署。我们点开发布设置

选择微信小游戏设置，然后输入在小游戏中申请的appid

完成之后我们打开“微信开发者工具”，将游戏项目导入进去，可以看到游戏的效果。

然后点击预览，扫描生成的预览二维码，看看在手机上的效果如何

好啦，我们的游戏轮盘也就制作完成了，不知道看完之后的各位有没有回想起高中学习到的数学知识。如果对项目感兴趣的同学可以在下方评论区找我，小编会发完整的项目代码给你们哦。

,