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