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图,有些卡):


下一篇为大家展示跑马灯式的抽奖。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容