阅读 810

七夕小游戏中的程序设计

背景

七夕节日,公司内部需要一个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调试陀螺仪等效果,具体参考这片文章:传送门

游戏效果优化

一些用户体验方面优化有

  • 布局适配
  • 牵手成功脚本
  • 调整物体碰撞位置为云彩中心
  • 设置地图边界
  • 加速模式
  • 人物初始化跳跃

在核心逻辑完成都就可以进行效果优化了,都是一些微调,这些优化就不多做阐述了。

往期文章推荐

《九宫格抽奖中的程序设计》

《提升用户体验之局部过渡》

《跟大家聊一下前端性能怎么优化》