zj-Exercise/CocosCreator/myxiaoxiaole/assets/Script/View/GridView.js

import {
    CELL_HEIGHT,
    CELL_WIDTH,
    GRID_HEIGHT,
    GRID_PIXEL_HEIGHT,
    GRID_PIXEL_WIDTH,
    GRID_WIDTH
} from "../Model/ConstValue";

import AudioUtils from "../Utils/AudioUtils";

import GameModel from "../Model/GameModel";

cc.Class({
    extends: cc.Component,

    properties: {
        aniPre:{
            default:[],
            type:[cc.Prefab]
        },
        effectLayer:{
            default: null,
            type: cc.Node
        },
        audioUtils:{
            default:null,
            type:AudioUtils
        },

        grid_width: 0,
        grid_height: 0,
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
        this.setListener();
        this.lastTouchPos = cc.Vec2(-1,-1);
        this.isCanMove = true;
        this.isInPlayAni = false;   //是否在播放中

        this.grid_width = 6;
        this.grid_height = 6;

        this.grid_pixel_width = this.grid_width * CELL_WIDTH;    //格子像素宽度
        this.grid_pixel_height = this.grid_height * CELL_HEIGHT; //格子像素高度

        //根据行数和列数设置格子区域的大小
        this.node.width = this.grid_width * CELL_WIDTH;
        this.node.height = this.grid_height * CELL_HEIGHT;
    },

    setController(controller){
        this.controller = controller;
    },

    initWithCellModels(cellsModels){
        // console.log("cellsModels:",cellsModels)
        this.cellViews = [];
        for (let i = 1; i <= this.grid_height; i++){   //行，y
            this.cellViews[i] = [];
            for (let j = 1; j <= this.grid_width; j++){   //列，x
                let type = cellsModels[i][j].type;
                // console.log(`cellsModels[${i}][${j}]:`,cellsModels[i][j])
                let aniView = cc.instantiate(this.aniPre[type]);
                aniView.parent = this.node;
                let cellViewScript = aniView.getComponent("CellView");
                cellViewScript.initWithModel(cellsModels[i][j]);
                this.cellViews[i][j] = aniView;
            }
        }
    },

    setListener(){
        this.node.on(cc.Node.EventType.TOUCH_START,function (eventTouch) {
            if (this.isInPlayAni){  //播放动画中，不允许点击
                return true;
            }
            let touchPos = eventTouch.getLocation();
            let cellPos = this.convertTouchPosToCell(touchPos);

            // 消除一个格子的技能
            if(this.controller.isCrushOne){
                this.controller.isCrushOne = false;
                this.controller.eliminateOneNum--;
                this.controller.showSkillTip(false);
                const result = this.controller.processCrushOne(cellPos);
                // console.log("cellpos:",cellPos)
                // console.log("消除一个格子result:",result)
                let changeModels = result[0]; // 有改变的cell
                let effectsQueue = result[1]; //各种特效
                this.playEffect(effectsQueue);
                this.disableTouch(this.getPlayAniTime(changeModels), this.getStep(effectsQueue));
                this.updateView(changeModels);
                this.controller.cleanCmd();
                // console.log("rerr:",result)

                return false;
            }

            //道具消除整行
            if (this.controller.isCrushRow){
                this.controller.isCrushRow = false;
                // console.log("crushRowAllNum:",this.controller.crushRowAllNum)
                this.controller.crushRowAllNum--;
                this.controller.showSkillTip(false);
                const crushRowResult = this.controller.processCrushRow(cellPos);
                // console.log("消除一行的pos:",cellPos)
                // console.log("crushRowResult:",crushRowResult)
                let changeModels = crushRowResult[0];

                let effectsQueue = crushRowResult[1]; //各种特效

                this.playEffect(effectsQueue);
                this.disableTouch(this.getPlayAniTime(changeModels), this.getStep(effectsQueue));
                this.updateView(changeModels);
                this.controller.cleanCmd();
                return false;
            }

            //道具消除整列
            if (this.controller.isCrushCol){
                this.audioUtils.playClick();
                this.controller.isCrushCol = false;
                this.controller.crushColAllNum--;
                this.controller.showSkillTip(false);
                const crushColResult = this.controller.processCrushCol(cellPos);
                let changeModels = crushColResult[0];

                let effectsQueue = crushColResult[1]; //各种特效

                this.playEffect(effectsQueue);
                this.disableTouch(this.getPlayAniTime(changeModels), this.getStep(effectsQueue));
                this.updateView(changeModels);
                this.controller.cleanCmd();
                return false;
            }

            //道具消除一种类型
            if (this.controller.isCrushOneType){
                this.audioUtils.playClick();
                this.controller.isCrushOneType = false;
                this.controller.crushOneTypeNum--;
                this.controller.showSkillTip(false);
                const crushOneTypeResult = this.controller.processCrushOneType(cellPos);
                // console.log("crushOneTypeResult:",crushOneTypeResult)
                let changeModels = crushOneTypeResult[0];

                let effectsQueue = crushOneTypeResult[1]; //各种特效

                this.playEffect(effectsQueue);
                this.disableTouch(this.getPlayAniTime(changeModels), this.getStep(effectsQueue));
                this.updateView(changeModels);
                this.controller.cleanCmd();
                return false;
            }

            if (cellPos){
                let changeModels = this.selectCell(cellPos);
                this.isCanMove = changeModels.length < 3;
            }else {
                this.isCanMove = false;
            }
            return true;
        },this);
        //滑动操作逻辑
        this.node.on(cc.Node.EventType.TOUCH_MOVE,function (eventTouch) {
            if (this.isCanMove){
                let startTouchPos = eventTouch.getStartLocation();
                let startCellPos = this.convertTouchPosToCell(startTouchPos);
                let touchPos = eventTouch.getLocation();
                let cellPos = this.convertTouchPosToCell(touchPos);
                if (startCellPos.x != cellPos.x || startCellPos.y != cellPos.y){
                    this.isCanMove = false;
                    let changeModels = this.selectCell(cellPos);
                    // console.log("changeModels:",changeModels)
                }
            }
        },this);
        this.node.on(cc.Node.EventType.TOUCH_END, function (eventTouch) {
            // console.log("1111");
        },this);
        this.node.on(cc.Node.EventType.TOUCH_CANCEL,function (eventTouch) {
            // console.log("2222");
        },this);
    },

    //根据点击的像素位置，转换成网格中的位置
    convertTouchPosToCell(pos){
        pos = this.node.convertToNodeSpaceAR(pos);
        if (pos.x < 0 || pos.x >= this.grid_pixel_width || pos.y < 0 || pos.y >= this.grid_pixel_height){
            return false;
        }
        let x = Math.floor(pos.x / CELL_WIDTH) + 1;
        let y = Math.floor(pos.y / CELL_HEIGHT) + 1;
        return cc.v2(x, y);
    },

    //移动格子
    updateView(changeModels){
        let newCellViewInfo = [];
        for (let i in changeModels){
            let model = changeModels[i];
            let viewInfo = this.findViewByModel(model);
            let view = null;

            if (!viewInfo){ //如果原来的cell不存在，则新建
                let type = model.type;
                let aniView = cc.instantiate(this.aniPre[type]);
                aniView.parent = this.node;
                let cellViewScript = aniView.getComponent("CellView");
                cellViewScript.initWithModel(model);
                view = aniView;
            }else { //如果已经存在
                view = viewInfo.view;
                this.cellViews[viewInfo.y][viewInfo.x] = null;
            }
            let cellScript = view.getComponent("CellView");
            cellScript.updateView();    //执行移动动作
            if (!model.isDeath){
                newCellViewInfo.push({
                    model: model,
                    view: view
                });
            }
        }
        //重新标记this.cellViews的信息
        newCellViewInfo.forEach(function (ele) {
            let model = ele.model;
            this.cellViews[model.y][model.x] = ele.view;
        },this);
    },

    //显示选中的格子背景
    updateSelect(pos){
        for (let i = 1; i <= this.grid_height; i++){   //行，y值
            for (let j = 1; j <= this.grid_width; j++){   //列，x值
                // console.log(`选中的格子：cellViews[${i}][${j}]:`,this.cellViews[i][j])
                if (this.cellViews[i][j]){
                    let cellScript = this.cellViews[i][j].getComponent("CellView");
                    // console.log("cellScript:",cellScript)
                    if (pos.x == j && pos.y == i){
                        cellScript.setSelect(true);
                        // console.log("选中了")
                    }else {
                        cellScript.setSelect(false);
                    }
                }
            }
        }
    },

    //根据cell的model返回对应的View
    findViewByModel(model){
        // console.log("model:",model);
        for (let i = 1; i <= this.grid_height; i++){   //行，y值
            for (let j = 1; j <= this.grid_width; j++){   //列，x值
                // console.log(`cellViews[${i}][${j}]:`,this.cellViews[i][j]);  //此处打印会出现死循环
                if (this.cellViews[i][j] && this.cellViews[i][j].getComponent("CellView").model == model){
                    return {view:this.cellViews[i][j], x:j, y:i};
                }
            }
        }
        return null;
    },

    getPlayAniTime(changeModels){
        if (!changeModels){
            return 0;
        }
        let maxTime = 0;
        changeModels.forEach(function (ele) {
            ele.cmd.forEach(function (cmd) {
                if (maxTime < cmd.playTime + cmd.keepTime){
                    maxTime = cmd.playTime + cmd.keepTime;
                }
            },this)
        },this);
        return maxTime;
    },

    //获得爆炸次数，同一个时间算一个
    getStep(effectsQueue){
        if (!effectsQueue){
            return 0;
        }
        return effectsQueue.reduce(function (maxValue, effectCmd) {
            return Math.max(maxValue, effectCmd.step || 0);
        },0);
    },

    //一段时间内禁止操作
    disableTouch(time, step){
        if (time <= 0){
            return;
        }
        this.isInPlayAni = true;
        this.node.runAction(cc.sequence(cc.delayTime(time),cc.callFunc(function (){
            this.isInPlayAni = false;
            this.audioUtils.playContinuousMatch(step);
        },this)));
    },

    //正常击中格子后的操作
    selectCell(cellPos){
        let result = this.controller.selectCell(cellPos);   //直接先丢给model处理数据逻辑
        // console.log("result:",result);
        let changeModels = result[0];   //有改变的cell，包含新生成的cell和生成马上摧毁的格子
        let effectsQueue = result[1];   //各种特效
        this.playEffect(effectsQueue);
        this.disableTouch(this.getPlayAniTime(changeModels),this.getStep(effectsQueue));
        this.updateView(changeModels);
        this.controller.cleanCmd();
        if (changeModels.length >= 2){
            this.updateSelect(cc.v2(-1, -1));
            this.audioUtils.playSwap();
        }else {
            this.updateSelect(cellPos);
            this.audioUtils.playClick();
        }
        return changeModels;
    },
    playEffect(effectsQueue){
        this.effectLayer.getComponent("EffectLayer").playEffects(effectsQueue, this.controller);
    },

    start () {

    },

    update (dt) {
        console.log("grid_width:",this.grid_width)
    },


});