cocos creator入门教程之简单游戏抽奖滚动转盘的实现

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_41967240/article/details/102707388

游戏开发中抽奖转盘的使用或许是相当重要的部分，尤其可以激发玩家对于抽奖的兴趣，增加游戏的趣味性。

我实现的这个滚动转盘的思路是较简单，在游戏开始的时候就通过Math.random()产生一个随机值，设定不同倍数的概率范围，判断这个值所在的倍数范围，最后在转盘转动结束后进行显示，而对于转盘转动的动画就是在一个范围中循环滚动，到达设定的转动时间就停止。

实现代码

const {ccclass, property} = cc._decorator;

@ccclass
export default class rotation extends cc.Component {

    //显示的倍数
    @property(cc.Label)
    multiple: cc.Label = null;
    //隐藏
    @property(cc.Node)
    hideMultipleNode:cc.Node=null;
    @property([cc.Node])
    hideMultiple:cc.Node[]=[];
    //转动时间
    rotationTimer:number=4;
    //是否转动
    isRotation:boolean=false;
    countTimer:number=0;
    //按钮
    @property(cc.Node)
    startButton:cc.Node=null;
    //随机数
    randomNumber:number=0;

    //最后转盘显示的倍数
    showMultiple:number=0;

    // LIFE-CYCLE CALLBACKS:
    start () 
    {

    }
    //范围概率
    public rangeCount()
    {
        if(this.randomNumber>0&&this.randomNumber<0.8)
        {
            this.showMultiple=5;
        }
        if(this.randomNumber>=0.8&&this.randomNumber<0.9)
        {
            this.showMultiple=6;
        }
        if(this.randomNumber>=0.9&&this.randomNumber<0.999)
        {
            this.showMultiple=7;
        }
        if(this.randomNumber>=0.999&&this.randomNumber<1)
        {
            this.showMultiple=8;
        }
    }

    //点击开始按钮
    public startRotation()
    {
        //生成随机倍数值
        this.randomNumber=Math.random();
        cc.log(this.randomNumber);
        this.rangeCount()

        //隐藏
        this.multiple.node.active=false;
        this.hideMultipleNode.active=true;
        this.startButton.active=false;

        this.isRotation=true;
        
    }

    //转盘转动
    public RotationWheel()
    {
        cc.log("*******************")
        for(let i=0;i<this.hideMultiple.length;i++)
        {
            this.hideMultiple[i].y-=13;
            if(this.hideMultiple[i].y<-150)
            {
                this.hideMultiple[i].y+=600;
            }
        }
    }

    //转盘停止
    public stopRotation()
    {
        this.multiple.node.active=true;
        this.multiple.string="X"+this.showMultiple;
        this.hideMultipleNode.active=false;
        this.startButton.active=true;
    }

    update (dt:number)
    {

        if(this.isRotation)
        {
            this.RotationWheel();
             //时间统计
           this.countTimer+=dt;
           if(this.countTimer>=this.rotationTimer)
           {
               this.stopRotation()
               this.countTimer=0;
               this.isRotation=false;
           }
        }
    }
}