CocosCreator之微信小游戏的抽奖转盘

许多小游戏里面都有涉及到抽奖环节，所以就可能会用到抽奖转盘的制作，今天分享一个自己左转盘的小小过程。
1、准备材料过程不多说，拼完界面之后大概是这样的：

2、给界面绑定脚本，在脚本的properties里面绑定转盘节点，不多说：

3、一般的，抽奖其实都是前面先假装转几圈，之后转向抽奖的结果就可以。我们先设定好各种所需要的变量：

onLoad () {//奖品份数 this.awardNum = 8;//转动时间this.rotateTime = 6.0;
},

4、写转盘转动的方法以及一个小小的效果（转到某区域，暂停之后转到该区域中央），不要忘记触发抽奖和重置的条件（我这里是按钮，重置也可以设置为抽完奖自动重置等）：

/*** 点击抽奖     */
onClickLucky() {    console.log("开始抽奖");    let random_jiangli = Math.floor(Math.random() * this.awardNum);console.log("random_jiangli ======>抽奖结果= ", random_jiangli);//多旋转的角度（最后转向抽奖结果所需要转的角度）this.rotationNum = (random_jiangli) * (360 / this.awardNum) + (360 / this.awardNum / 2);//左右的效果角度（效果所需）this.random_1 = Math.floor(Math.random() * 45 - 22.5);let action = this.DialRotateAction();this.ZhuanPan.runAction(action);let self = this;this.scheduleOnce(function () {let action_1 = cc.sequence(cc.rotateBy(0.2, 0),    //停顿一下cc.rotateBy(1.5, self.random_1 / -1),   //转到指向的分区的中央).easing(cc.easeInOut(3.0));self.ZhuanPan.runAction(action_1);}, this.rotateTime);
},/**  * 转盘转动方法 */
DialRotateAction: function () { let self = this;      //假定的假装转的圈数  let circleNum = 5;     let action = cc.rotateBy(self.rotateTime, 360 * circleNum + self.rotationNum + self.random_1).easing(cc.easeInOut(3.0));      return action;
},/**
* 重置转盘方法
*/
onClickRefreshRotate(){console.log("重置转盘");if(this.ZhuanPan.rotation != 0){     this.ZhuanPan.rotation = 0;   }
},

5、效果如下（简易gif图，有些卡）：

有了tween之后，换了一种特别简洁的写，如下：

this.action = cc.tween(this.img_luckyspin_spin).then(cc.rotateBy(3.0, 360 * 6 + index * 45).easing(cc.easeInOut(3.0))).call(() => {console.log("将奖盘重置");this.scheduleOnce(() => {this.img_luckyspin_spin.rotation = 0;}, 2.0);}).start();

tween后边的括号里面是节点，call里面是回调，用来重置奖盘位置。

如有问题，欢迎指正，共同学习，谢谢。

CocosCreator之微信小游戏的抽奖转盘相关推荐

cocos2dx 圆盘抽奖_cocoscreator之微信小游戏的抽奖转盘
许多小游戏里面都有涉及到抽奖环节,所以就可能会用到抽奖转盘的制作,今天分享一个自己左转盘的小小过程. 1.准备材料过程不多说,拼完界面之后大概是这样的: 2.给界面绑定脚本,在脚本的propertie ...
解决CocosCreator 在微信小游戏中使用Socket.io 报错的问题
解决CocosCreator 在微信小游戏中使用Socket.io 报错的问题参考文章: (1)解决CocosCreator 在微信小游戏中使用Socket.io 报错的问题 (2)https:// ...
CocosCreator接入微信小游戏
使用Creator接入微信小游戏流程介绍 1:下载cocosCreator http://www.cocos.com/download 2:去微信公众平台注册账号账号微信开发者平台和微信公众平台是 ...
CocosCreator 打包微信小游戏
1. 下载微信开发者工具并安装,申请小游戏ID,在ccc的文件-->设置-->原生环境中,指定路径 2.发布平台选择微信小游戏,填入appid,这里要注意,小程序的id 和小游戏的id不同 ...
CocosCreator之微信小游戏的聊天/提示气泡制作
有时候,我们会遇到一些需要气泡的地方,比如一些提示,即需要背景随着文本长度过长而换行之后进行自适应的情况.我之前是直接设置文本框的行高是可变的,即Overflow属性为RESIZE,然后根据文本长度来 ...
CocosCreator微信小游戏入门实战《小猫钓鱼》（十一）：总结以及源码分享
转载请保留原文链接:https://blog.csdn.net/zzx023/article/details/83068228 基本上到这里作为一个cocoscreator以及微信小游戏的开发者,我相 ...
LayaAir 绘制微信小游戏开放数据域画面
LayaAir 绘制微信小游戏开放数据域画面请大家关注我的微博:@NormanLin_BadPixel坏像素之前写过用cocosCreator绘制微信小游戏子域的教程,保持整体思路不变,现在再写一 ...
微信小游戏开发零基础教程（一）-CocosCreator
微信小游戏零基础教程(一)-CocosCreator 最终效果预览准备工作创建工程测试第一个场景最终效果预览本教程最后制作的游戏效果: 准备工作下载微信开发者工具最新版->下载地 ...
微信小程序实现大转盘抽奖----踩坑之路
微信小程序实现大转盘抽奖----踩坑之路需求:现在有一个小程序抽奖页面如下,此类抽奖方式为大转盘思路:由服务端获取抽奖次数和奖品,根据服务端的中奖概率来决定是否中奖,最后利用小程序动画将转盘转起来 ...

CocosCreator之微信小游戏的抽奖转盘

CocosCreator之微信小游戏的抽奖转盘相关推荐

最新文章

热门文章