cocoscreator按钮长按功能实现

最新推荐文章于 2024-02-02 17:41:35 发布

小张不爱写代码

最新推荐文章于 2024-02-02 17:41:35 发布

阅读量1k

点赞数

文章标签： java javascript cocosCreator

原文链接：https://blog.csdn.net/Mr_JiaTao/article/details/107862347

版权

文章详细介绍了如何在CocosCreatorv2.1.2中，利用JavaScript编写游戏开始按钮，使其在单击时触发‘游戏开始’，长按时显示托管场次面板。关键在于利用触摸开始和结束事件，以及更新循环来检测长按时间，并通过设置touchFlag变量来跟踪触摸状态。

摘要由CSDN通过智能技术生成

背景

产品需要游戏的开始按钮，单击：游戏开始；长按：显示托管场次面板。
引擎：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函数配合的方式来实现业务上的需求。
核心：监听节点按下、抬起事件，通过比较两个事件之间的时间差，来进行单机、长按判断。
至此，完毕。