三消游戏解析（一）

最新推荐文章于 2025-06-17 10:21:05 发布

原创最新推荐文章于 2025-06-17 10:21:05 发布 · 2.5k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了三消游戏的基本原理，包括游戏开始时如何避免立即出现三个同色块，以及玩家点击色块时的透明度变化、块的位置交换和消除逻辑。通过图片交换代码和细胞下落方法阐述了游戏的核心操作过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很多原理上是和消除游戏相似的，也是建立好行列，游戏开始的同时，我们需要解决的是一开始的时候不会出现三个同色的块，就是说你一出来的时候就只有一个或者两个同色块儿在一起。

 buildRandomToWithout3:function(){
        var sameArr = this.check3Same();
        cc.log('第'+this.timeCount++ +'次', sameArr.length)
        if(sameArr.length > 0){
            for(var index in sameArr){
                var po = sameArr[index]
                this.cellArr[po.x][po.y].randomColor()
            }
            this.buildRandomToWithout3()
        }else{
            cc.log('生成成功')
        }
    },

检测是否有三个同色的

  check3Same:function(){
        var with3Arr = []
        for (var i = 0;i < GameData.W_NUM; i++) {
            for(var j = 0;j < GameData.H_NUM;j++){
                if( i < GameData.W_NUM - 2 &&
                    this.cellArr[i][j].type == this.cellArr[i+1][j].type &&
                    this.cellArr[i+1][j].type == this.cellArr[i+2][j].type
                ){
                    with3Arr.push(cc.p(i,j),cc.p(i+1,j),cc.p(i+2,j))
                }   //下面的碎片和下面的两个碎片同色那么就都存起来
                if( j < GameData.H_NUM - 2 &&
                    this.cellArr[i][j].type == this.cellArr[i][j+1].type &&
                    this.cellArr[i][j+1].type == this.cellArr[i][j+2].type
                ){
                    with3Arr.push(cc.p(i,j),cc.p(i,j+1),cc.p(i,j+2))
                }//检测右边的两个色块相同就存起来
            }
        }

接下来就是点击色块的时候改变透明度，两次同时点击同一个块就取消透明度

checkArr:function(event){
        if(this.toucher == true)  return
        var cell = event.getUserData()
        if(this.oldCell == null){    //没有块被点中过
            this.oldCell = cell    //获得的数据等于原先的块
            cell.changeCellSelect(true)    //改变透明度
        }else{
            cc.log('进行oldcell比较')
            //两次同此点击一个块，更改透明度
            if(this.oldCell == cell){
                cell.changeCellSelect(false)
                this.oldCell = null
                return
            }

如果点击不一样，那么就交换位置，，如果不能三个一起消除那么点击的就会还原回来

  if(      //如果两次点击不一样，切点击的方块在第一个的四周就交换位置
                (this.oldCell.arrayIndex.x == cell.arrayIndex.x ||
                this.oldCell.arrayIndex.y == cell.arrayIndex.y) &&
                Math.abs(this.oldCell.arrayIndex.x+this.oldCell.arrayIndex.y-
                    cell.arrayIndex.x-cell.arrayIndex.y
                ) == 1
            ){   //放两个块移动切改变透明度
                cc.log('让2个块互换')
                this.change2Cell(this.oldCell, cell, true,false)
                this.oldCell.changeCellSelect(false)
                this.oldCell = null

            }else{    //如果点击不一样的块，将第一个块透明度还原，给第二个块透明度
                this.oldCell.changeCellSelect(false)
                cell.changeCellSelect(true)
                this.oldCell = cell

            }
        }
    },

图片交换代码

 runToCell : function(cell){
        this.runAction(cc.moveTo(0.5,cell.getPosition()))
        this.arrayIndex = cell.arrayIndex

    },

change2Cell是我们写的一个图片的方法

 change2Cell:function(cell1, cell2, endCheck,star){
        if(star == false){
            this.toucher = true
        }  else{
            this.toucher = false
        }
        var temp = cell2.creatTempCell()           //赋值了temp2的属性
        this.cellArr[cell1.arrayIndex.x][cell1.arrayIndex.y] = cell2
        this.cellArr[temp.arrayIndex.x][temp.arrayIndex.y] = cell1   //交换下标
        cell2.runToCell(cell1)
        cell1.runToCell(temp)  //  让两个块相互移动

        if(endCheck){
            this.scheduleOnce(function(){
                var end = this.check3Same()   // end = 三个块的数组
                if(end.length == 0){     //数组长度为零
                    this.change2Cell(cell1, cell2, false,false)   //交换后不能消除就再次换回来
                }else if(end.length == 4){
                    var specil = cell1
                    this.cellFallDown(end,specil)   //把三个一样的消除
                }else{
                    this.cellFallDown(end)
                }
            },0.51)   //计时器延时0.51秒执行
        }
    },

cellFallDown就是我们消除掉落的一个方法

cellFallDown : function(arrayIndexArr,cell){
                //检查arrayIndexArr 里所有的块是否有special的
        var specilArr = []
        for(var index in arrayIndexArr){
            var arrayIndex = arrayIndexArr[index]
            if(this.cellArr[arrayIndex.x][arrayIndex.y].isSpecial){
                for(var i = 0;i<GameData.W_NUM;i++ ){
                    specilArr.push(cc.p(i,arrayIndex.y))
                }
                this.cellArr[arrayIndex.x][arrayIndex.y].resetSpecial()
            }
        }
        arrayIndexArr = this.filterDelSame(specilArr,arrayIndexArr)