首页分享三消游戏开发详解

三消游戏开发详解

来源：花匠小妙招时间：2026-02-02 00:06

三消游戏
1.显示若干随机块儿

this.type= parseInt(1+Math.random()*5);//随机生成数

this.initWithFile("res/square"+this.type+".png"); //显示随机图块

3.检查横行里是否有3个同色相连的块,结果存为数组，
类似[[cc.p(1,0),cc.p(1,1),cc.p(1,2)],...]
a.一个二维数组，里面是若干块
b.块有type属性，记录了颜色值
算法：
遍历检测每一个块右侧的两个块颜色是否一致，一致则说明3个相连
需要注意的是在横行数 - 2的位置停止检测，防止越界

var arr = []; for(var i = 0 ; i < GAMEDATA.LINE ; i++){ for( var j = 0; j <GAMEDATA.LIST; j++){ if( i < GAMEDATA.LINE - 2 && this.spArr[i][j].type == this.spArr[i+1][j].type && this.spArr[i+1][j].type == this.spArr[i+2][j].type){ arr.push(this.spArr[i][j].primary,this.spArr[i+1][j].primary,this.spArr[i+2][j].primary); } if( j < GAMEDATA.LIST - 2 && this.spArr[i][j].type == this.spArr[i][j+1].type && this.spArr[i][j+1].type == this.spArr[i][j+2].type){ arr.push(this.spArr[i][j].primary,this.spArr[i][j+1].primary,this.spArr[i][j+2].primary); } } }

4.把竖行也添加上
5.将以上检查封装成一个函数,将会返回相连的点的数组

6.创建初始没有三个相连的数组
目前拥有:a.二维数组检查的fun
b.一个已经填充了随机块的二维数组
算法:生成完成后，进行检查，发现相同数组长度大于0，
将相同的3个块中任意一块换成随机颜色，继续检查，直至检测长度为0

//=-------------------------------------------------------------------
点击行为的处理
7.重复点选以及取消的逻辑
a.点击一个块，该块出现选中图标
b.再次点击该块，选中图标消失
c.点击另外一块，如果该块属于a点击块的上下左右，则cc.log('交换')
否则进入流程a 选中另外一块
Math.abs(VALUE) 对VALUE取绝对值

      8.交换逻辑
2个块交换位置   并且更新在二维数组中的下标
用第五步的方法检查，如果3连长度为0，交换失败，将2个换回去
      如果3连长度不为0，使用fun将相连的块找到消除，掉落
进入稳定状态后，上方刷出随机颜色快掉落，并且消除三连直至稳定状态

//消除 cellFallDown:function(arrayIndex){ if(arrayIndex.length>0) { for (var index in arrayIndex) { var xo = arrayIndex[index] cc.log(xo.x,xo.y) this.spArr[xo.x][xo.y].removeFromParent(true) this.spArr[xo.x][xo.y] = null } //掉落 for (var i = 0; i < GAMEDATA.LINE; i++) { for (var j = GAMEDATA.LIST - 1; j >= 0; j--) { if (this.spArr[i][j] == null) { continue } var tempAdd = 0 for (var k = j; k < GAMEDATA.LIST; k++) { if (this.spArr[i][k] == null) tempAdd++ } this.spArr[i][j].fallDownNum = tempAdd } } for (var i = 0; i < GAMEDATA.LINE; i++) { for (var j = GAMEDATA.LIST - 1; j >= 0; j--) { this.updateCellByFallDownNum(this.spArr[i][j]) } } } this.scheduleOnce(this.fillEmpty.bind(this),1.1) },

updateCellByFallDownNum:function(cell){ if(cell == null) return if(cell.fallDownNum == 0) return var tempPo = cc.pAdd(cc.p(0,cell.fallDownNum), cell.primary) this.spArr[tempPo.x][tempPo.y] = cell this.spArr[cell.primary.x][cell.primary.y] = null cell.fallDown() cell.fallDownNum = 0 },

fillEmpty:function(){ for(var i = 0;i<GAMEDATA.LINE; i++) { for (var j = 0; j<GAMEDATA.LIST; j++) { if (this.spArr[i][j] == null) { var cells = new cell() cells.labels(i,j) cells.setPosition(50 + i * 40, cc.winSize.height - 40 - j * 40) this.addChild(cells) this.spArr[i][j] = cells } } } var end = this.rahgar() if(end.length == 0 ){ cc.log("进入稳定状态停止") }else { this.scheduleOnce(function (){ this.cellFallDown(end) },0.51) } },

//文本

this.Lale = new cc.LabelBMFont("Score:",res.mikado); this.Lale.setPosition((cc.winSize.width>>1)-240,(cc.winSize.height>>1)+450); this.addChild(this.Lale);

//按钮

var menuFont = new cc.MenuItemImage("res/kaishi.png","res/kaishi1.png", this.startGame, this); menuFont.setPosition((-cc.winSize.width >> 1) + 300, (-cc.winSize.height >> 1) + 420); var menu = new cc.Menu(menuFont); this.addChild(menu);

//掉落

//掉落 for (var i = 0; i < GAMEDATA.LINE; i++) { for (var j = GAMEDATA.LIST - 1; j >= 0; j--) { if (this.spArr[i][j] == null) { continue } var tempAdd = 0 for (var k = j; k < GAMEDATA.LIST; k++) { if (this.spArr[i][k] == null) tempAdd++ } this.spArr[i][j].fallDownNum = tempAdd } } for (var i = 0; i < GAMEDATA.LINE; i++) { for (var j = GAMEDATA.LIST - 1; j >= 0; j--) { this.updateCellByFallDownNum(this.spArr[i][j]) } } } this.scheduleOnce(this.fillEmpty.bind(this),1)//掉落下落生成时间

//检测是否有三个相连的方块 rahgar:function(){ var arr = []; for(var i = 0 ; i < GAMEDATA.LINE ; i++){ for( var j = 0; j <GAMEDATA.LIST; j++){ if( i < GAMEDATA.LINE - 2 && this.spArr[i][j].type == this.spArr[i+1][j].type && this.spArr[i+1][j].type == this.spArr[i+2][j].type){ arr.push(this.spArr[i][j].primary,this.spArr[i+1][j].primary,this.spArr[i+2][j].primary); } if( j < GAMEDATA.LIST - 2 && this.spArr[i][j].type == this.spArr[i][j+1].type && this.spArr[i][j+1].type == this.spArr[i][j+2].type){ arr.push(this.spArr[i][j].primary,this.spArr[i][j+1].primary,this.spArr[i][j+2].primary); } } } arr = this.filterDelSame(arr,[]) return arr },