背景
七夕节日，公司内部需要一个h5活动，用来配对公司内部一日情侣。
最开始的设计为首页输入名称，点击匹配，直接匹配成功。
由于刚做了抽奖h5，抽奖之所以要过渡效果就是为了给予用户一种等待的紧张刺激感觉。
所以这个活动商讨之后，从产品角度触发，中间加入了一个小游戏来提升趣味性。
我们选择了一个比较简单的小游戏，类似这样。分享一下设计思路
牛郎通过踩云彩往上跳的方式，与织女牵手。
这边拿出里面几个比较值得讲的东西来写一下。
人物
首先我们模拟人物跳动，首先人物的跳动是自发的y轴运动，x轴的位移我们设计通过陀螺仪来完成。陀螺仪的玩法比起手指滑动对比来说，可玩性更高。那我们首先就要解决人物跳动的问题。
人物跳跃
人物跳跃方面我们参考重力加速度公式
根据数学公式，我们生成缓动函数，并给予一个初始的一个向上力。
- x横向给予的力
- y纵向给予的力
- a重力加速度
- t渲染帧
这样我们的人物就可以跳动了。
这么直蹦蹦的跳跃显得很不和谐。我们需要添加一些行为动作。
人物动作变换
人物动作变换我以前做像素RPG游戏的时候接触过，通过上下作用控制人物走动，像素人物走动就是通过不断切换图片的效果做到的。游戏人物行走图类似如下：
我们这个活动中为了跳跃的形象生动，就像上面效果图中的一样，有两图片进行切换。让人物跳动更加生动。 两张图片效果如下。
生成云彩
设计中页面中显示的只有三朵云彩，牛郎踩的只有最下方一朵，云彩的y轴都是预先设定好的，x轴是随机生成。y轴的运动运用transition动态改变position top距离即可
先列一下我们有的条件、以及需要做到的效果
- 三张不一样大小的云彩图片
- 随机生成云彩
- x轴随机位置
- y轴可以向下移动
核心逻辑为数组的弹出与推入。这里有一点需要注意的是循环数组生成dom结构的时候必须给予唯一key。否则diff算法会卸载重绘节点，导致transition失效。
一个很典型的问题，唯一key的重要性。 // 是否可以展开讲200字
这样就只有css在不断变换。这里有两个边界问题。
当数组第一个位置插入的时候是闪烁的，数组最后弹出也是闪烁的，云彩会瞬间出现或者消失。所以一共设计了五朵云彩，显示中间的三朵。因为中间三朵是平滑滚动的三朵。
物体碰撞
人物下坠到哪里重新起跳？云彩什么时候进行一次位移？
人物“踩”云彩，这里面踩字就是物体碰撞。我们先理解一下物体碰撞
上图中，分别做物体A与物体B在X,Y轴方向的投影，物体A的Y轴方向最大点坐标为Y1，最小点坐标Y2，X轴方向最小点坐标X1，最大点坐标X2，物体B同理。
图中红色区域为物体A与物体B投影的重叠部分，可以看出，AABB碰撞检测具有如下规则：
物体A与物体B分别沿两个坐标轴做投影，只有在两个坐标轴都发生重叠的情况下，两个物体才意味着发生了碰撞。
所以，做二维平面的AABB碰撞检测时，只需验证物体A与物体B是否满足如下条件：
-
物体A的Y轴方向最小值大于物体B的Y轴方向最大值。
-
物体A的X轴方向最小值大于物体B的X轴方向最大值。
-
物体B的Y轴方向最小值大于物体A的Y轴方向最大值。
-
物体B的X轴方向最小值大于物体A的X轴方向最大值。
若满足上述条件，则证明物体A与物体B并未发生重合，反之，则证明物体A与物体B重合。
这样我们就拥有了一个判断节点。
陀螺仪
利用手机陀螺仪来控制人物左右摆动。
获取手机陀螺仪方面，Android 与 IOS有所区别，可以使用如下方法。
Android获取权限方面无限制。
IOS获取权限必须https下，且通过事件触发获取权限方法。如下：
注意：在ios12需要手动设置开启权限
说两个调试方法。
调试 map remote
可以通过charles 中 map remote设置http映射为https，这样ios就可以在手机上获取陀螺仪权限。我们在调试的时候需要在屏幕上打一个参数类似这种，方便我们直观的看到具体参数。
但是这种调试方式只能在手机上
调试 Sensors
我们利用谷歌Sensors可以在PC上直接调试陀螺仪。我们只需要直接打开Orientation即可。看一下效果图
这样我们就可以在PC调试陀螺仪等效果，具体参考这片文章：传送门
游戏效果优化
一些用户体验方面优化有
- 布局适配
- 牵手成功脚本
- 调整物体碰撞位置为云彩中心
- 设置地图边界
- 加速模式
- 人物初始化跳跃
在核心逻辑完成都就可以进行效果优化了，都是一些微调，这些优化就不多做阐述了。
