Cocos Creator轮盘抽奖

Cocos Creator 组件式开发,刚开始学习,使用js语言,写个轮盘抽奖测试。
github链接
查看效果

cc.Class({
    extends: cc.Component,properties: {
        spinBtn: {
            default: null,// The default value will be used only when the component attachin // to a node for the first time
            type:cc.Button,// optional,default is typeof default
            visible: true,default is true
            displayName: 'SpinBtn',// optional
        },wheelSp:{
            default:null,type:cc.Sprite
        },maxSpeed:{
            default:3,type:cc.Float,max:10,min:2,},duration:{
            default:3,max:5,min:1,tooltip:"减速前旋转时间"
        },acc:{
            default:0.1,max:0.2,min:0.01,tooltip:"加速度"
        },targetID:{
            default:0,type:cc.Integer,max:17,min:0,tooltip:"指定结束时的齿轮"
        },springback:{
            default:true,tooltip:"旋转结束是否回弹"
        },effectAudio:{
            default:null,url:cc.AudioClip
        }
    },// use this for initialization
    onLoad: function () {
        cc.log("....onload");
        this.wheelState = 0;    
        this.curSpeed = 0;
        this.spinTime = 0;                   //减速前旋转时间
        this.gearNum = 18;
        this.defaultAngle = 360/18/2;        //修正认角度
        this.gearangle = 360/this.gearNum;   //每个齿轮的角度
        this.wheelSp.node.rotation = this.defaultAngle;
        this.finalAngle = 0;                   //最终结果指定的角度
        this.effectFlag = 0;                 //用于音效播放

        if(!cc.sys.isbrowser)
        {
            cc.loader.loadRes('Sound/game_turntable',function(err,res){if(err){cc.log('...err:'+err);}});
        }
        this.spinBtn.node.on(cc.Node.EventType.TOUCH_END,function(event) {
            cc.log("begin spin");
            if(this.wheelState !== 0)
            {
                 return;
            }
            this.decAngle = 2*360;  // 减速旋转两圈
            this.wheelState = 1;
            this.curSpeed = 0;
            this.spinTime = 0;
            // var act = cc.rotateto(10,360*10);
            // this.wheelSp.node.runAction(act.easing(cc.easeSineInOut()));
        }.bind(this));
    },start:function() {
        // cc.log('....start');
    },caculateFinalAngle:function(targetID) {
        this.finalAngle = 360-this.targetID*this.gearangle + this.defaultAngle;
        if(this.springback)
        {
            this.finalAngle += this.gearangle;
        }
    },editBoxDidBegin:function(edit) {
    },editBoxDidChanged:function(text) {
    },editBoxDidEndEditing:function(edit) {
        var res = parseInt(edit.string);
        if(isNaN(res))
        {
            if(cc.sys.isbrowser)
            {
                alert('please input a number!');
            }else cc.log(".....invalid input");
            this.targetID = Math.round(Math.random()*(this.gearNum-1));
            return;
        }
        this.targetID = res;
    },// called every frame,uncomment this function to activate update callback
    update: function (dt) {
        if(this.wheelState === 0)
        {
            return;
        }
        // cc.log('......update');
        // cc.log('......state=%d',this.wheelState);

        this.effectFlag += this.curSpeed;
        if(!cc.sys.isbrowser && this.effectFlag >= this.gearangle)
        {
            if(this.audioID)
            {
                // cc.audioEngine.pauseEffect(this.audioID);
            }
            // this.audioID = cc.audioEngine.playEffect(this.effectAudio,false);
            this.audioID = cc.audioEngine.playEffect(cc.url.raw('resources/Sound/game_turntable.mp3'));
            this.effectFlag = 0;
        }
        if(this.wheelState == 1)
        {
            // cc.log('....加速,speed:' + this.curSpeed);
            this.spinTime += dt;
            this.wheelSp.node.rotation = this.wheelSp.node.rotation + this.curSpeed;
            if(this.curSpeed <= this.maxSpeed)
            {
                this.curSpeed += this.acc;
            }
            else
            {
                if(this.spinTime<this.duration)
                {
                    return;
                }
                // cc.log('....开始减速');
                //设置目标角度
                this.finalAngle = 360-this.targetID*this.gearangle + this.defaultAngle;
                this.maxSpeed = this.curSpeed;
                if(this.springback)
                {
                    this.finalAngle += this.gearangle;
                }
                this.wheelSp.node.rotation = this.finalAngle;
                this.wheelState = 2;
            }
        }
        else if(this.wheelState == 2)
        {
            // cc.log('......减速');
            var curRo = this.wheelSp.node.rotation; //应该等于finalAngle
            var hadRo = curRo - this.finalAngle;
            this.curSpeed = this.maxSpeed*((this.decAngle-hadRo)/this.decAngle) + 0.2; 
            this.wheelSp.node.rotation = curRo + this.curSpeed;

            if((this.decAngle-hadRo)<=0)
            {  
                // cc.log('....停止');
                this.wheelState = 0;
                this.wheelSp.node.rotation = this.finalAngle;
                if(this.springback)
                {
                    //倒转一个齿轮
                    var act = new cc.rotateBy(0.5,-this.gearangle);
                    var seq = cc.sequence(new cc.delayTime(0.3),act,cc.callFunc(this.showRes,this));
                    this.wheelSp.node.runAction(seq);
                }
                else
                {
                    this.showRes();
                }
            }
        }
    },showRes:function() {
        var Config = require("Config");
        if(cc.sys.isbrowser)
        {
            alert('You have got ' + Config.gearInfo[this.targetID]);
        }
        else cc.log(Config.gearInfo[this.targetID]);
    }
});

相关文章

    本文实践自 RayWenderlich、Ali Hafizji 的文章《...
Cocos-code-ide使用入门学习地点:杭州滨江邮箱:appdevzw@1...
第一次開始用手游引擎挺激动!!!进入正题。下载资源1:从C...
    Cocos2d-x是一款强大的基于OpenGLES的跨平台游戏开发...
1.  来源 QuickV3sample项目中的2048样例游戏,以及最近《...
   Cocos2d-x3.x已经支持使用CMake来进行构建了,这里尝试...