CocosGameFrameWork/assets/Script/Game/MyApp/TouchGame.ts

import { _decorator,  Node, EventTouch, Rect, UITransform, Sprite, SpriteFrame, Vec2, instantiate, Vec3, Component } from 'cc';
import { resMgr } from '../../Frames/ResourcesMgr';
import { Role } from './Role';
import { dataMgr } from '../../Frames/DataManager';
import { RoleData } from '../../DataItem/ItemData';
import { ModulerBase } from '../GameFrameWork/ModulerBase';
import { MyRole } from './GameScene/MyRole';
import { Card } from './Card';
import { Bottom } from './GameScene/Bottom';
const { ccclass, property } = _decorator;

@ccclass('TouchGame')
export class TouchGame extends ModulerBase {
    private _characterSlot: Node = null;
    private _load: Node = null;
    private _dragNode: Node = null; // 拖拽节点  
    private _isDragging: boolean = false; // 拖拽状态    
    private _imgName: string = null;
    private _roleData: RoleData[] = null;

    //高亮索引
    private _highLightIdx: number = 0;
    //高亮高度
    _hight: number = 82;
    private _clickedNode: Node = null;
    private _clickedNodeCom: any = null;
    protected onLoad(): void {
        this._characterSlot = this.node.parent.getChildByName("CharacterSlot");
        this._load = this.node.parent.parent.getChildByName("Road");
        this._hight = this._load.getChildByName("Node").getComponent(UITransform).height;
        this._roleData = dataMgr.getAllDataByName("RoleCardData");
        // 创建拖拽节点  
        this._dragNode = instantiate(resMgr.getPrefab("DragNode"));
        this._dragNode.active = false; // 初始状态隐藏  
        this._dragNode.parent = this._load;
    }

    protected start(): void {
        this.node.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.node.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        this.node.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
        this.node.on(Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this); // 处理触摸取消事件  
    }

    private onTouchStart(event: EventTouch) {
        if (this._isDragging) return;

        const pos = event.getUILocation();
        for (const element of this._characterSlot.children) {
            const box: Rect = element.getComponent(UITransform).getBoundingBoxToWorld();
            if (box.contains(pos)) {
                this._clickedNode = element;
                this._clickedNodeCom = this._clickedNode.getComponent(Card);
                if(!this._clickedNodeCom.disabled && this._clickedNodeCom.clickable){
                    const img: SpriteFrame = element.getChildByName("Sprite").getComponent(Sprite).spriteFrame;
                    if (!img) {
                        this._isDragging = false;
                        return;
                    }
                    if (img) {
                        this._isDragging = true;
                        this._dragNode.getComponent(Sprite).spriteFrame = img;
                        this._dragNode.active = true;
                        this._imgName = img.name;
                        this.setDragNodePosition(pos);
                    }
                    break; // 找到一个就停止遍历 
                } 
            }
        }
    }

    private onTouchMove(event: EventTouch) {
        if (!this._isDragging) return;
        if (this._isDragging) {
            this.setDragNodePosition(event.getUILocation());
        } else {
            return;
        }
        for (const element of this._load.children) {
            if (element.name !== "Roles") {
                const box = element.getComponent(UITransform).getBoundingBoxToWorld();
                if (box.contains(event.getUILocation())) {
                    element.active = true;
                } else {
                    element.active = false;
                }
            }
        }
    }

    private onTouchEnd(event: EventTouch) {
        if (!this._isDragging) return;
        const pos: Vec3 = new Vec3(event.getUILocation().x, event.getUILocation().y, 0)
        this.stopDragging(pos);
    }

    //设置拖拽物体的坐标  
    private setDragNodePosition(pos: Vec2) {
        this._dragNode.setWorldPosition(pos.x, pos.y, 0);
    }

    private stopDragging(pos: Vec3) {
        this._isDragging = false;
        for (const element of this._load.children) {
            if (element.name !== "Roles") {
                const box = element.getComponent(UITransform).getBoundingBoxToWorld();
                if (box.contains(new Vec2(pos.x,pos.y))) {
                    this._highLightIdx = element.getSiblingIndex();
                    if (this._highLightIdx >= 6) {
                        this._hideNode();
                        return;
                    }
                    break;
                }
            }
        }
        const role: Node = instantiate(resMgr.getPrefab("Role"));
        role.parent = this._load.getChildByName("Roles");

        const roleTS: Role = role.getComponent(MyRole);

        const y = 180 + (this._highLightIdx + 1) * this._hight - this._hight / 2;
        const rolePos: Vec3 = new Vec3(50, y, pos.z)

        roleTS.init(this._imgName, rolePos, this._roleData, 1);
        //消耗矿石
        this.node.parent.getComponent(Bottom).onReduce(this._clickedNodeCom.consumeCount);
        //冷却当中
        this._clickedNode.getComponent(Card).aniPlay();
        this._hideNode();
    }
    
    private _hideNode() {
        this._dragNode.active = false;
        this._dragNode.getComponent(Sprite).spriteFrame = null;
        for (const element of this._load.children) {
            if (element.name !== "Roles") {
                element.active = false;
            }
        }
    }

    protected onDestroy(): void {
        this.node.off(Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.node.off(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        this.node.off(Node.EventType.TOUCH_END, this.onTouchEnd, this);
        this.node.off(Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this);
    }
}