JumpGame/assets/Script/Map/MyMap.ts

// Learn TypeScript:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/typescript.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html



const { ccclass, property } = cc._decorator;

type MapDataType = {
    bg: string,
    fs: {
        sp: number,
        ro: number,
        sc: number,
        x: number,
        y: number,
    }[]
}
type MapType = {
    map: MapDataType[],
    mapX: number,
    mapY: number,
}

type MapPosData = {
    index_x: number,
    index_y: number,
    Id: number,
    NodePos: cc.Vec2,
    SubMapData: MapDataType,
}


type NeedUpdataIndex = {
    x: number,
    y: number,
}


@ccclass
export default class MyMap extends cc.Component {
    MapjsonData: MapType

    @property(cc.Node)
    CharacterNode: cc.Node = null;

    MapPosData: MapPosData[] = []

    private _CurrentMapPosData: MapPosData = null;
    public get CurrentMapPosData(): MapPosData {
        return this._CurrentMapPosData;
    }
    public set CurrentMapPosData(value: MapPosData) {
        if (this._CurrentMapPosData == value) {

        } else {
            this._CurrentMapPosData = value;
            this.UpdateMap()
        }
    }

    //更新自己位置数据的间隔s
    UpMyindexInterval: number = 0.1


    //更新自己位置数据的间隔s
    NeedUpdataIndexData: NeedUpdataIndex[] = []

    protected start(): void {
        this.Load('3')
    }

    public Load(level: string) {
        cc.resources.load("json/map" + level, cc.JsonAsset, this.LoadDone.bind(this));
        this.schedule(() => {
            let wordPos = this.CharacterNode.parent.convertToWorldSpaceAR(this.CharacterNode.position)
            let mapPos = this.node.convertToNodeSpaceAR(wordPos)

            // console.log(mapPos);

            this.Myindex(mapPos)
        }, this.UpMyindexInterval)
    }

    private LoadDone(error: Error, resource: cc.JsonAsset) {
        if (error) {
            console.log(error.message);
            return;
        }

        if (window['map99']) {
            this.MapjsonData = window['map99']

        } else {
            this.MapjsonData = resource.json;
        }


        if (this.MapjsonData) {
            this.initMap()
        }
    }

    initMap() {
        this.NeedUpdataIndexData = this.GetMapUpdateIndex()



        //宽多少个
        this.MapjsonData.mapX
        //高多少个
        this.MapjsonData.mapY

        let total = this.MapjsonData.mapX * this.MapjsonData.mapY

        let index_x = 0
        let index_y = 0

        //生成全部地图
        for (let index = 0; index < total; index++) {
            // const SubMap = this.MapjsonData.map[index];
            // console.log(SubMap);
            //console.log('ID:', index);
            if (index % this.MapjsonData.mapX == 0) {
                index_y++
                index_x = 0
            }
            index_x++

            let SubMapPosData: MapPosData = {
                index_x: 1,
                index_y: 1,
                Id: 1,
                NodePos: null,
                SubMapData: this.MapjsonData.map[index]
            }

            SubMapPosData.Id = index
            SubMapPosData.index_x = (index_x - 1)
            SubMapPosData.index_y = (index_y - 1)
            SubMapPosData.NodePos = new cc.Vec2(750 * (index_x - 1), 1334 * (index_y - 1))



            this.MapPosData.push(SubMapPosData)

            let MapNode = cc.instantiate(new cc.Node())
            MapNode.addComponent(cc.Sprite)

            MapNode.setContentSize(750, 1334)

            MapNode.setPosition(SubMapPosData.NodePos)

            MapNode.name = 'bg' + index

            MapNode.parent = this.node
        }



        let wordpos = this.node.getChildByName('bg' + this.MapjsonData['BronID']).convertToWorldSpaceAR(
            cc.v2(this.MapjsonData['BronX'], this.MapjsonData['BronY']))

        // []}],"mapX":3,"mapY":3,"BronID":0,"BronX":55,"BronY":55}

        this.CharacterNode.setPosition(this.CharacterNode.parent.convertToNodeSpaceAR(wordpos))



        return


        console.log(this.MapPosData);
    }


    Myindex(target: cc.Vec3) {
        let SceneSize = cc.v2(750, 1334)
        let halfX = SceneSize.x / 2
        let halfY = SceneSize.y / 2

        //是否越界
        let iscross = true
        for (let index = 0; index < this.MapPosData.length; index++) {
            const e = this.MapPosData[index];

            if (target.x > e.NodePos.x - halfX &&
                target.x <= e.NodePos.x + halfX &&
                target.y <= e.NodePos.y + halfY &&
                target.y > e.NodePos.y - halfY) {

                this.CurrentMapPosData = e

                console.log('ID  x  y', e.Id, e.index_x, e.index_y);
                iscross = false
                break;
            }
        }

        if (iscross == true) {
            console.error('越界了 发送事件');
        }


    }

    总共生成的地图数组 = []

    UpdateMap() {
        // for (let index = 0; index < this.NeedUpdataIndexData.length; index++) {
        //     const element = this.NeedUpdataIndexData[index];
        //     if (element.x == this.CurrentMapPosData.index_x && element.y == this.CurrentMapPosData.index_y) {
        //     }
        // }

        //当前我在的地图下标
        this.CurrentMapPosData.index_x
        this.CurrentMapPosData.index_y
        this.CurrentMapPosData.Id


        //需要生成的地图数组

        let bronMap = []

        let MyIndex = cc.v2(this.CurrentMapPosData.index_x, this.CurrentMapPosData.index_y);

        // bronMap.push({ x: MyIndex.x - 1, y: MyIndex.y + 1, Id: this.CurrentMapPosData.Id + this.MapjsonData.mapX - 1 })
        // bronMap.push({ x: MyIndex.x, y: MyIndex.y + 1, Id: this.CurrentMapPosData.Id + this.MapjsonData.mapX })
        // bronMap.push({ x: MyIndex.x + 1, y: MyIndex.y + 1, Id: this.CurrentMapPosData.Id + this.MapjsonData.mapX + 1 })

        // bronMap.push({ x: MyIndex.x - 1, y: MyIndex.y, Id: this.CurrentMapPosData.Id - 1 })
        // bronMap.push({ x: MyIndex.x, y: MyIndex.y, Id: this.CurrentMapPosData.Id })
        // bronMap.push({ x: MyIndex.x + 1, y: MyIndex.y, Id: this.CurrentMapPosData.Id + 1 })

        // bronMap.push({ x: MyIndex.x - 1, y: MyIndex.y - 1, Id: this.CurrentMapPosData.Id - this.MapjsonData.mapX - 1 })
        // bronMap.push({ x: MyIndex.x, y: MyIndex.y - 1, Id: this.CurrentMapPosData.Id - this.MapjsonData.mapX })
        // bronMap.push({ x: MyIndex.x + 1, y: MyIndex.y - 1, Id: this.CurrentMapPosData.Id - this.MapjsonData.mapX + 1 })


        bronMap.push({ x: MyIndex.x, y: MyIndex.y, Id: this.CurrentMapPosData.Id })
        bronMap.push({ x: MyIndex.x, y: MyIndex.y + 1, Id: this.CurrentMapPosData.Id + this.MapjsonData.mapX })
        bronMap.push({ x: MyIndex.x, y: MyIndex.y - 1, Id: this.CurrentMapPosData.Id - this.MapjsonData.mapX })
        bronMap.push({ x: MyIndex.x - 1, y: MyIndex.y, Id: this.CurrentMapPosData.Id - 1 })
        bronMap.push({ x: MyIndex.x + 1, y: MyIndex.y, Id: this.CurrentMapPosData.Id + 1 })


        bronMap.push({ x: MyIndex.x - 1, y: MyIndex.y + 1, Id: this.CurrentMapPosData.Id + this.MapjsonData.mapX - 1 })
        bronMap.push({ x: MyIndex.x + 1, y: MyIndex.y + 1, Id: this.CurrentMapPosData.Id + this.MapjsonData.mapX + 1 })
        bronMap.push({ x: MyIndex.x - 1, y: MyIndex.y - 1, Id: this.CurrentMapPosData.Id - this.MapjsonData.mapX - 1 })
        bronMap.push({ x: MyIndex.x + 1, y: MyIndex.y - 1, Id: this.CurrentMapPosData.Id - this.MapjsonData.mapX + 1 })



        for (let index = 0; index < bronMap.length; index++) {

            console.log(bronMap[index].Id);


            if (bronMap[index].x < 0 || bronMap[index].x > (this.MapjsonData.mapX - 1)) {
                continue
            }
            if (bronMap[index].y < 0 || bronMap[index].y > (this.MapjsonData.mapY - 1)) {
                continue
            }

            const SubMap = this.getSubMapDataByID(bronMap[index].Id)

            if (SubMap) {
                if (this.总共生成的地图数组.includes(SubMap.Id)) {

                } else {
                    this.BronSubMap(SubMap)
                    this.总共生成的地图数组.push(SubMap.Id)
                }
            }
        }



        // const array1 = [1, 2, 3, 4];
        // const array2 = [3, 4, 5, 6];

        // const differentElements = array1.filter(item => !array2.includes(item)).concat(
        //     array2.filter(item => !array1.includes(item))
        // );

        // console.log(differentElements);



        for (let index = 0; index < this.总共生成的地图数组.length; index++) {
            const MapId = this.总共生成的地图数组[index];
            const SubMap = this.getSubMapDataByID(MapId)
            if (SubMap) {
                for (let j = 0; j < bronMap.length; j++) {
                    const element = bronMap[j];
                    if (element.Id == MapId) {
                        break
                    }
                    if (j == bronMap.length - 1) {
                        this.DeleteSubMap(SubMap)


                        const array = this.总共生成的地图数组
                        const elementToRemove = MapId; // 要删除的元素

                        this.总共生成的地图数组 = array.filter(item => item !== elementToRemove);



                    }
                }
            }
        }
    }


    getSubMapDataByID(ID: number) {
        for (let k = 0; k < this.MapPosData.length; k++) {
            const SubMap = this.MapPosData[k];

            if (SubMap.Id == ID) {
                return SubMap
            }
        }
        console.error('不存在');
        return null
    }

    BronSubMap(SubMap: MapPosData) {
        if (this.node.getChildByName('bg' + SubMap.Id).getComponent(cc.Sprite)?.spriteFrame?.name == 'bg' + SubMap.SubMapData.bg) {

        } else {
            cc.resources.load('bg/bg' + SubMap.SubMapData.bg, cc.SpriteFrame, (err, SpriteFrame) => {
                if (err) {
                    console.log("bg_error:" + err);
                    return
                }
                this.node.getChildByName('bg' + SubMap.Id).getComponent(cc.Sprite).spriteFrame = SpriteFrame
            });
        }
        for (let j = 0; j < SubMap.SubMapData.fs.length; j++) {
            const fs = SubMap.SubMapData.fs[j];

            cc.resources.load('footstep/footstep' + fs.sp, cc.Prefab, (err, Prefab) => {
                if (err) {
                    console.log("bg_error:" + err);
                    return
                }
                let SubPrefab = cc.instantiate(Prefab)
                SubPrefab.setPosition(fs.x, fs.y)
                SubPrefab.angle = fs.ro
                SubPrefab.setScale(fs.sc)
                SubPrefab.active = true
                this.node.getChildByName('bg' + SubMap.Id).addChild(SubPrefab)
            });
        }
    }


    DeleteSubMap(SubMap: MapPosData) {
        this.总共生成的地图数组 = this.总共生成的地图数组.filter(item => item !== SubMap.Id);

        this.node.getChildByName('bg' + SubMap.Id).getComponent(cc.Sprite).spriteFrame = null

        this.node.getChildByName('bg' + SubMap.Id).children.forEach(e => { e.destroy() })
    }

    //得到需要更新地图的下标
    GetMapUpdateIndex() {
        this.MapjsonData.mapX
        this.MapjsonData.mapY

        let NeedUpMapArray = []

        //只有长宽都大于3的
        let X_Has_Couont = 0
        let Y_Has_Couont = 0
        let Youhua = false
        if (this.MapjsonData.mapX >= 3 && this.MapjsonData.mapY >= 3) {
            X_Has_Couont = this.MapjsonData.mapX - 2
            Y_Has_Couont = this.MapjsonData.mapY - 2
            Youhua = true
        }

        if (Youhua) {
            //开启优化
            for (let i = 1; i < this.MapjsonData.mapX - 1; i++) {
                for (let j = 1; j < this.MapjsonData.mapY - 1; j++) {
                    //输出所有在这个ID需要更新的地图
                    // console.log(i + j * this.MapjsonData.mapX)
                    NeedUpMapArray.push({ x: i, y: j })
                }
            }
        } else {
            //不开启优化
        }


        console.log(NeedUpMapArray);

        return NeedUpMapArray

    }
}