微信小游戏-飞机游戏玩法改造系列（一）

(文末有源码)

休息会玩了会微信小游戏。但是那个级别只是微信小游戏做的 demo，要说玩的话在体验方面还有不少可以优化的：

1. 移动操作是跟随手指的（我要给改成 向某个坐标移动，坐标就根据点击的位置获取）

2. 只有发子弹，攻击模式单一 （我要支持积攒能量，用能量兑换无敌、增加射击强度、回血）

3. 一条命（我要支持血条）

4. 敌机不会发射子弹（我要支持发子弹）

主要是为了放松我们的大脑，不是为了做一个真正可以商用的游戏，因为性能可能会受阻。当然编程思想是可以做为交流的，例如精灵的移动，用三角函数优化了运动轨迹，使其运动看起来更自然，开始第一集：

• 设置玩家的目标位置

在 player 目录下， index.js 文件

思路：要想有操作感，那么通过点击画布，给一个坐标让小飞机往点击的位置自动移动，相对来说会给人更棒的操作体验，

        目标位置 ：我们将捕获触摸事件产生的 x, y 坐标，来设置为移动的目标

        自动移动 ：有了目标位置后， 小飞机需要自动向前移动，移动到达后，需要停止，所以需要一个变量用来做标识： this.moving = true

        移动路径：假设以窗口为坐标系 W，窗口左上角顶点为原点O（0,0），那么任意一条直线路径在 W 上的函数表达式可记为 y = kx + b。如图示：

        路径优化：上图绿色为两点间的路径，路径的长度假设为 c, c 在 x 轴、y 轴上的投影的长度，假设为 a 和 b。如图：

        假设速度为 10， 如果小飞机从 起点移动到终点， 它可能是先移动 x ， 再移动 y, 再移动 x，再移动 y...，其路线将可能会是：

         即：x 走 10 ，y 再走 10，然后再 x 走 10 ，然后y 再走 10， 当 x 走到 x2 的时候 x 方向不再走只有 y方向要走，于是最后就会变成一条直线。

        这个路线无疑是很怪的。所以这个问题我们利用三角函数来解决：

         如图示， 我们在每次点击的时候，调用 setAimPosByEventPos 函数， 设置目标位置 ，同时计算当前位置与目标位置的距离 ， 利用三角函数， 计算正弦值 、余弦值 ，然后根据正弦、余弦值将速度 10 投影到 x 轴、y 轴上的值计算出来，这个投影的值，就是位移量，分别记作 atmp 和 btmp，这两个 tmp 就是小飞机在一条直线上运动的增量。接下来我们就要按帧刷新位置就行了。

• 实现update

          index.js中

         写一个 update ，主要是更新位置 ， 和判断是否停止。

• 托管到主入口 main

           接下来就是触发 update ，我们进入  main.js ，

         将 play.update() 托管给 main.js 的 update ，就可以加入帧循环了。

        哈，到这里就完成啦，不需要手指那么累的一直去推屏幕啦。农药中最不喜欢的英雄就是关羽。一起去体验吧（下次休息的时候，写第二个）！

代码地址：

https://gitee.com/jurimengs/wegame-plan.git