欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

cocoscreator按钮长按功能实现

程序员文章站 2022-06-25 16:17:05
背景产品需要游戏的开始按钮,单击:游戏开始;长按:显示托管场次面板。引擎:cocoscretor v2.1.2 语言:JavaScript实现cc.Class({ extends: cc.Component, properties: { btnStart: cc.Button, //开始按钮 }, // LIFE-CYCLE CALLBACKS: onLoad () { //声明触摸时间变量...

背景

产品需要游戏的开始按钮,单击:游戏开始;长按:显示托管场次面板。
引擎:cocoscretor v2.1.2 语言:JavaScript

实现

cc.Class({
    extends: cc.Component,

    properties: {
        btnStart: cc.Button,                //开始按钮
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
        //声明触摸时间变量
        this.touchFlag = false;
        this.touchStartTime = null;
        //添加按钮触摸监听 长按弹托管弹窗列表
        this.btnStart.node.on(cc.Node.EventType.TOUCH_START, this.touchStart, this);
        this.btnStart.node.on(cc.Node.EventType.TOUCH_END, this.touchEnd, this);
    },

    // start () {},

    // onEnable() {},

    //触摸开始
    touchStart(){
        //触摸开始 
        this.touchFlag = true;
        //记录下触摸开始时间
        this.touchStartTime = new Date();
    },

    //长按检测函数
    touchHold(){
        if(this.touchFlag && this.touchStartTime != null){
            //判断按钮的按压时长
            let touchHoldTime = new Date();
            let milliseconds = touchHoldTime.getTime() - this.touchStartTime.getTime();
            if(milliseconds > 300){
                this.touchFlag = false;
                //触发托管事务逻辑 
                //todo...
            }
        }
    },

    //触摸结束
    touchEnd(){
        this.touchFlag = false;
        this.touchStartTime = null;
        //出发单击事务逻辑
        //todo...
    },

    update (dt) {
        //判断是否检测按钮长按状态
        if(this.touchFlag){
            this.touchHold();
        }
    },
});

备注:因为cocoscretor留下的按钮监听事件中的 cc.Node.EventType.MOUSE_MOVE,在触摸点未发生任何像素上的移动时,是不会触发该此事件监听函数的。所以,本文采取了touchFlag变量和update函数配合的方式来实现业务上的需求。
至此,完毕。

本文地址:https://blog.csdn.net/Mr_JiaTao/article/details/107862347