• 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,      // optional, 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,
                type:cc.Float,
                max:5,
                min:1,
                tooltip:"减速前旋转时间"
            },
            acc:{
                default:0.1,
                type:cc.Float,
                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]);
        }
    });
    
  • 相关阅读:
    这鸡汤、真香
    linux 编译安装python并且安装虚拟环境工具
    前端数据删除
    前后端分离DRF项目初始化
    ubuntu 安装nginx docker
    ubuntu安装vue
    虚拟环境安装
    sql语句优化
    Python之网络编程 进程 线程 协程
    Python之网络编程 文件上传 基于udp的协议的socket socketsever同时接收多方消息
  • 原文地址:https://www.cnblogs.com/skyxu123/p/9543802.html
Copyright © 2020-2023  润新知