使用Cocos Creator实现倒计时器-优快云博客

本文链接：https://blog.youkuaiyun.com/N_irvana/article/details/51878120

这篇博客介绍如何在Cocos Creator中创建并封装一个倒计时器组件。通过添加TimeCount类并监听自定义事件，可以设置、开始、暂停和结束倒计时。倒计时结束时，会触发一个自定义事件供其他类捕获。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * 在Scene里添加  this.addChild(new TimeCount())
 * 使用美术字的倒计时   需要 fnt文件预加载
 * 美术字的名字注意修改
 * 使用的时候通过
 * cc.eventManager.dispatchCustomEvent(USER_TIME_COUNT_SET_TIME, 5) 设置倒计时时间
 * cc.eventManager.dispatchCustomEvent(USER_TIME_COUNT_START) 使得倒计时开启
 * cc.eventManager.dispatchCustomEvent(USER_TIME_COUNT_STOP)  使得倒计时暂停
 *
 * 在需要得到倒计时结束的类里去
 * cc.eventManager.addCustomListener(USER_TIME_COUNT_FINISH, function(event){
        cc.log('app 获取了定时器传回的结束')
    })
 */
var USER_TIME_COUNT_SET_TIME = "USER_TIME_COUNT_SET_TIME"   //设置倒计时时间
var USER_TIME_COUNT_START = "USER_TIME_COUNT_START"         //开始倒计时
var USER_TIME_COUNT_PAUSE = "USER_TIME_COUNT_PAUSE"           //停止倒计时
var USER_TIME_COUNT_FINISH = "USER_TIME_COUNT_FINISH"       //倒计时结束     由定时器抛出
var TimeCount = cc.Layer.extend({
    EventArr:[USER_TIME_COUNT_SET_TIME, USER_TIME_COUNT_START, USER_TIME_COUNT_PAUSE],
    Label_time:null,
    Label_Position:null,
    Count_Time:0,
    ScheduleRun:false,
    Start_DateTime:0,
    ctor:function(){
        this._super()
        this.init()
    },
    init:function(){
        this.Label_Position = cc.p(cc.winSize.width*0.8,cc.winSize.height*0.95);       //调整倒计时坐标
        this.Label_time = new cc.LabelBMFont("60", res.bo);
        /* if(this.Label_time.width <= 0) cc.error('字体文件没有预加载 或 TimeCount模块没有设置正确的BmFont')*/
        this.Label_time.setPosition(this.Label_Position)
        this.addChild(this.Label_time)
        this.scheduleUpdate()

        for(var index in this.EventArr){
            var event = this.EventArr[index]
            cc.eventManager.addCustomListener(event, this.onGetCustom.bind(this))
        }
    },
    onGetCustom:function(event){
        var data = event.getUserData();
        switch (event.getEventName()){
            case USER_TIME_COUNT_SET_TIME:
                cc.log('设置了倒计时时间:',data)
                this.Count_Time = data
                this.Label_time.setString(this.Count_Time)
                break
            case USER_TIME_COUNT_START:
                cc.log('启动了倒计时:')
                this.Start_DateTime = Date.now()
                this.ScheduleRun = true
                break
            case USER_TIME_COUNT_PAUSE:
                cc.log('停止了倒计时')
                this.ScheduleRun = false
                break
        }
    },
    update:function(){
        if(this.ScheduleRun){
            if(Date.now() - this.Start_DateTime>=1000){
                this.Count_Time --;
                this.Label_time.setString(this.Count_Time)
                this.Start_DateTime += 1000
                if(0 == this.Count_Time){
                    this.timeStop();
                    cc.eventManager.dispatchCustomEvent(USER_TIME_COUNT_FINISH)
                }
            }
        }
    },
    timeStop:function(){
        cc.log('倒计时结束了:')
        this.ScheduleRun = false
    },
    onExit:function(){
        this.unscheduleUpdate()
        this.removeAllChildren(true)
        for(var index in this.EventArr){
            var event = this.EventArr[index]
            cc.eventManager.removeCustomListeners(event)
        }
    }
})

倒计时器的代码封装