CocosCreator实现转盘抽奖

B站教学视频地址:

CocosCreator实现转盘抽奖-第一节

CocosCreator实现转盘抽奖-第二节​​​​​​​

CocosCreator实现转盘抽奖-第三节

CocosCreator实现转盘抽奖-第四节​​​​​​​

CocosCreator实现转盘抽奖-第五节

CocosCreator实现转盘抽奖-第六节

CocosCreator实现转盘抽奖-第七节

CocosCreator实现转盘抽奖-第八节​​​​​​​

环境说明:

• Mac/Windows
• 使用Cocos Creator3.7.4<或以上>

效果如下:

实现步骤如下：

1、创建一个Creator工程如LessonTurnLottery

2、创建resource/script/scene目录分别存放图片资源、场景、脚本资源

3、在scene文件夹创建scene常见

4、在script文件夹创建game.ts个TurnLotterItem.ts脚本文件

5、将脚本game.ts挂载到game场景

6、创建预制体TurnLotterItem并将TurnLotterItem.ts挂载到预制体上

7、开始实现具体逻辑：

A、game.ts脚本文件用来控制添加一个按钮点击触发转盘抽奖旋转逻辑；

B、TurnLotteryItem.ts脚本主要控制转盘抽奖的主要实现控制逻辑；

C、game.ts脚本文件中大致逻辑代码如下：

onClickStartLotteryBtnEvent() {
    if(this.rewardTipLabel){
            this.rewardTipLabel.string = "等待抽奖!!!";
    }
    director.emit(GoLotteryEvent, this);
}

D、TurnLotteryItem.ts脚本文件中大致主逻辑代码如下：

onGoLotteryEvent() {
    if (this._isLottery) {
        console.log(`<onGoLotteryEvent> 正在抽奖请等待此轮抽奖结束`);
        return;
    }
    console.log(`<onGoLotteryEvent> `);
    this._isLottery = true;
    // 随机确定奖品分区
    let index = Math.floor(Math.random() * this.rewardTypeCount);


    // 过场动作 顺时针转
    let targetAngle = -this.rotatelotterySecs * 360 + index * (360 / this.rewardTypeCount);
    this.trunBgNode.angle %= 360;
    console.log(`<onGoLotteryEvent> index: ${index} ,旋转角度： ${index * (360 / this.rewardTypeCount)}`);

    // 过场动作+缓入缓出
    if (this.trunBgNode) {

        let tweenAction = tween().to(this.lotterySecs, { angle: targetAngle }, { easing: "cubicInOut" });
        let tweenCallFunc = tween().call(() => {
             director.emit(GetLotteryRewardRstEvent, { reward: index });
             this._isLottery = false;
         });
        tween(this.trunBgNode).sequence(tweenAction, tweenCallFunc).start();
    }
}

详细实现代码工程逻辑请关注微信公众号GFanStudio回复 "转盘抽奖" 即可获得项目工程下载地址；具体教学视频请关注B站Up主GFanStudio