大转盘(CocosCreator)

简介: 大转盘(CocosCreator)
推荐阅读:

1.在场景中搭建大转盘场景,假设
奖项有n项,对应的每项旋转角度如下:

第几项 需要旋转的角度
0 360/n/2
1 360/n+第0项角度
2 360/n+第1项角度
... ...

例如:奖项一共6项

第几项 需要旋转的角度
0 360/n/2=30
1 360/n+第一项角度 =30+60=90
2 90+60=150
3 210
4 270
5 330
... ...

2.代码控制大转盘的转动
大转盘的思想:预先给定一个本轮大转盘的奖项的下标,然后再随机一个该奖项的角度,核心代码:

var angle = app.random((idx + 1) * (-60) + 10 + 360, (idx + 0) * (-60) - 10 + 360, false) + 1800;

其中,60代表360/n,上面可以当成一个公式使用。
旋转函数代码:

    /// 转动大转盘,idx表示奖项的下标
    rollPanel(idx, call) {
        var self = this;
        self.uiRoot.close.active = false;
        self.uiRoot.begin.enabled = false;
        var angle = app.random((idx + 1) * (-60) + 10 + 360, (idx + 0) * (-60) - 10 + 360, false) + 1800;
        var rot1 = cc.rotateTo(5, angle).easing(cc.easeExponentialInOut(10.0));
        var call1 = app.callFunc(function (adt) { self.uiRoot.close.active = true; self.uiRoot.begin.enabled = true; if (call) { call(); } });
        this.uiRoot.panel.root.stopAllActions();
        this.uiRoot.panel.root.rotation %= 360;
        this.uiRoot.panel.root.runAction(cc.sequence(rot1, call1));
    },
相关文章
|
域名解析 小程序 Linux
朋友圈超火的盲盒交友小程序,完整搭建教程及源码分享~(多图)
朋友圈超火的盲盒交友小程序,完整搭建教程及源码分享~(多图)
朋友圈超火的盲盒交友小程序,完整搭建教程及源码分享~(多图)
|
29天前
|
JavaScript
【UI】 欢快畅游的小鱼特效
【UI】 欢快畅游的小鱼特效
17 1
|
4月前
|
数据采集 前端开发 JavaScript
💗中秋💗CSS动画 | 嫦娥奔月
💗中秋💗CSS动画 | 嫦娥奔月
43 2
|
9月前
酷炫代码雨
酷炫代码雨
41 0
|
12月前
|
小程序 开发工具
樱花飘落模拟器-情人节祝你表白成功
看着樱花缓缓的飘落,然后不觉间竟下起了绵绵的细雨。因为今天我所在的城市正下着小雨,所以就在这个小应用中增加了阵阵的细雨功能。 下面我们就学习一下如何实现一个这样温暖的小程序。 首先准备一下素材。一个粉色的背景,两个樱花花瓣,一个模拟雨滴的长方形,以及两句要显示的话。
90 0
|
JavaScript 前端开发 程序员
【中秋征文】手把手教你海面月亮升起中秋节特效制作
【中秋征文】手把手教你海面月亮升起中秋节特效制作
178 0
【中秋征文】手把手教你海面月亮升起中秋节特效制作
|
JavaScript 容器
怒砸 30w+ 矿石抽礼盒后,我通透了...【 幸运大转盘Vue3版】
前言 大家好,我是HoMeTown。 中秋节快到了,掘金社区一如既往十分贴心的在这种有意义节日里推出了社区周边的礼盒,像之前的端午粽子礼盒,这次推出了中秋月饼礼盒。
147 0
水果机抽奖(CocosCreator)
水果机抽奖(CocosCreator)
|
安全 前端开发 JavaScript
圣诞节用女神照片做了一个旋转木马
圣诞节用女神照片做了一个旋转木马
135 0
圣诞节用女神照片做了一个旋转木马

相关实验场景

更多