ts&3.0&3.x cocos实现九宫格/跑马灯抽奖_cocoscreator3.x九宫格抽奖

项目场景：

实现九空格/跑马灯抽奖效果

面板设置:

代码：

import { _decorator, Component, Node, SpriteFrame } from 'cc';

const { ccclass, property } = _decorator;

@ccclass('drawPage')

export class drawPage extends Component {

    @property([Node])

    item: Node[] = [];

    prizeImg: SpriteFrame[] = [];

    i: number = 0;//转到哪个位置

    count: number = 0;//转圈初始值

    totalCount: number = 3;//转动的总圈数

    speed: number = 500;//转圈速度，越大越慢

    minSpeed: number = 500;

    timer: number = 0;

    isClick: boolean = true;

    index: number = 3;//指定转到哪个奖品

    drawStates: number = 0;

    isAddIpt: boolean = true;

    start() {

    }

    roll() {

        //速度衰减

        this.speed -= 50;

        if (this.speed <= 10)  this.speed = 10;

        //每次调用都去掉全部active类名

        for (let j = 0; j < this.item.length; j++)this.item[j].getChildByName('active').active = false;

        this.i++;

        //计算转圈次数

        if (this.i >= this.item.length) {

            this.i = 0;

            this.count++;

        }

        this.item[this.i].getChildByName('active').active = true;//添加变色类名

        //满足转圈数和指定位置就停止

        if (this.count >= this.totalCount && (this.i + 1) == this.index) {

            clearTimeout(this.timer);

            setTimeout(() => { this.isClick = true}, 1000)

            this.speed = this.minSpeed;

        } else {

            this.timer = setTimeout(() => { this.roll()}, this.speed);//不满足条件时调用定时器

            //最后一圈减速

            if (this.count >= this.totalCount - 1 || this.speed <= 50) this.speed += 100;

        }

    }

    drawBegin() {

        if (this.isClick) {

            this.isClick = false;

            this.count = 0;

            // this.index = 7; //中奖下标

            this.roll();

        }

    }

}

绑定好元素及脚本,点击抽奖  就可以转动了~ 记得把脚本绑定到drawPage上