Cocos-creator 实现简单触摸手势

前提：

• 触摸节点已设置符合需求的尺寸
• 触摸节点已挂载脚本组件

实现步骤：

一、先给触摸节点添加事件监听

onLoad() {
    // 开始触摸
    this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchEvt, this);
    // 结束触摸
    this.node.on(cc.Node.EventType.TOUCH_END, this.onTouchEvt, this);
}

二、实现触摸事件回调

/** 当前的触摸ID */
touchingID: number = 0;

onTouchEvt(evt: cc.Event.EventTouch) {
    const touch = evt.touch;
    const tid = touch.getID();
    const touchingID = this.touchingID;
    
    if (evt.type === cc.Node.EventType.TOUCH_START) {
        // 开始触摸
        if (touchingID) return;    // 当前已有触摸，忽略之
        touchingID = tid;
    } else {
        // 结束触摸
        if (touchingID && touchingID !== tid) return; // 不是正触摸的点，忽略之
        
        // 得到滑动向量
        const vec = touch.getLocation().sub(touch.getStartLocation());
        if (vec.mag() < 10) {
            // 滑动距离太短，可认为是点击
            // your code...
        } else {
            // 得到滑动的方向
            // 右：(1, 0)
            // 左：(-1, 0)
            // 上：(0, 1)
            // 下：(0, -1)
            const dir = this.getVecDir(vec);
            // your code...
        }
        
        this.touchingID = 0; // 注意有this.
    }
}

三、实现计算向量方向的方法

getVecDir(vec: cc.Vec2): cc.Vec2 {
    if (Math.abs(vec.x) > Math.abs(vec.y)) { // 略嫌这里的判断不够高雅
        // 水平滑动
        if (vec.x > 0) {
            // 右
            return cc.Vec2.RIGHT;
        } else {
            // 左（即右的取反）
            return cc.Vec2.RIGHT.negSelf();
        }
    } else {
        // 垂直滑动
        if (vec.y > 0) {
            // 上
            return cc.Vec2.UP;
        } else {
            // 下
            return cc.Vec2.UP.negSelf();
        }
    }
}