Cocos Creator下JavaScript模拟砸金蛋3d旋转效果，附代码

​获取代码

关注微信公众号，发送【砸蛋】获取代码

 

效果预览

 

使用说明

点击add，添加蛋到盘子上，蛋的数量后台可配置；

点击move，让蛋在盘子上转动起来；

点击stop，让蛋停止转动。

 

蛋旋转效果实现

椭圆定义

平面内与两定点 、 的距离的和等于常数(  )的动点P 的轨迹叫做椭圆。

即：

其中两定点 、 叫做椭圆的焦点，两焦点的距离 叫做椭圆的焦距。 为椭圆的动点。

椭圆截与两焦点连线重合的直线所得的弦为长轴，长为 。

椭圆截垂直平分两焦点连线的直线所得弦为短轴，长为 。

 

运动轨迹计算

运动轨迹的计算就是通过椭圆的数学定义实现的。

x = acosθ 

y = bsinθ

根据地图，设置要椭圆圆心所在位置和蛋的放置点位置，即显示图片的锚点，比如本例中的放置蛋的盘子。

蛋放置点位置

而椭圆的长轴和短轴，可以不断的调整位置，查看显示效果来确定。游戏中，只需要不断的更新鸡蛋旋转的角度，鸡蛋的位置自然就出来了。

 

更新鸡蛋所在位置

 

计算鸡蛋的位置

 

大小和层级变化

由于鸡蛋在运动过程中，不断的更换位置，需要不断的变更鸡蛋的大小和层级。

大小的变化，离屏幕越近越大，反之越小，通过scale放大缩小鸡蛋即可。

层级的变化，离屏幕越近层级越高，反之越低，变化趋势类似大小，直接根据鸡蛋的大小，按照一定比例计算层级即可。

 

>> 更多游戏

☞ 数钱      ☞ 左右跳    ☞ 重力球   ☞ 打地鼠 

☞ 推箱子   ☞ 扫雷       ☞ 跑酷      ☞ 动物同化

☞ 打飞机   ☞ 撑杆跳   ☞ 六边形   ☞ 口红机 

☞ 当官消消乐     ☞ 虚拟摇杆

 

扫一扫，关注微信公众号【一枚小工】，获取代码。