首页 > 代码库 > Cocos2d JS 之消灭星星(九) 处理星星类之——移动和消灭星星
Cocos2d JS 之消灭星星(九) 处理星星类之——移动和消灭星星
1 /* 2 * 本层拥有处理星星的实例化以及对星星的操作 3 * 1/排列星星 4 * 2/移动和删除星星 5 */ 6 var GameStarLayout = ccui.Layout.extend( 7 { 8 size:null, 9 starArr:[],//存放点击与被点击状态的星星资源 10 starObjArr:[],//存放游戏中星星的二位数组 11 firstTouchStar:null,//第一次选择的星星,用于判断两次选择的星星颜色是否一致 12 isSelected:false,//是否选择星星,如果已选择则再次点击将星星消灭 13 starList:[],//相连同色星星列表 14 ctor:function() 15 { 16 this._super(); 17 this.zinit(); 18 this.layoutStar(); 19 }, 20 //将星星按10*10的矩阵排列出来 21 layoutStar:function() 22 { 23 for(var i = 0; i < 10; i++) 24 { 25 for(var j = 0; j < 10; j++) 26 { 27 //随机从5种不同颜色的星星中选择一个 28 var randomNumber = Math.floor(Math.random()*this.starArr.length); 29 var starResource = this.starArr[randomNumber]; 30 var star = new GameCreateStar(starResource.normal, starResource.id,starResource.selected, i, j); 31 this.addChild(star, 0); 32 //星星出现的动画 33 var moveTo = cc.moveTo(i/10, cc.p(star.width*i, star.height*j)); 34 star.runAction(moveTo); 35 //将星星装到数组中 36 this.starObjArr[i][j] = star; 37 //给每一个星星注册侦听器 38 star.addTouchEventListener(this.onTouchStarFunc, this); 39 } 40 } 41 }, 42 //星星触摸侦听函数 43 onTouchStarFunc:function(target, state) 44 { 45 if(state == ccui.Widget.TOUCH_ENDED) //松开 46 { 47 if(!this.firstTouchStar) //如果第一次选择的星星为空,则将当前星星赋给它 48 { 49 this.firstTouchStar = target; 50 this.findSameColorStar(target); 51 } 52 else 53 { 54 if(this.starList.length <1){return;} //确保相连同色星星列表不为空,代码才会向下执行 55 if(this.starList[0].count != target.count) //第二次点击的不是上一次选择的星星 56 { 57 //将列表中的星星type还原 58 this.setStarListItemToNomal(this.starList); 59 this.findSameColorStar(target); 60 } 61 else //第二次点击相连同色星星列表中的星星 62 { 63 if(this.starList.length >1) 64 { 65 this.firstTouchStar = null; 66 this.resetStarRow(); 67 } 68 } 69 } 70 } 71 }, 72 //当消灭星星后,如果上方还有星星存在,则要重新设置他们的row值,用于向下移动星星 73 resetStarRow:function() 74 { 75 for(var i = 0; i < this.starList.length; i++) 76 { 77 this.starList[i].type = -1; 78 this.starList[i].removeFromParent(); 79 for(var j = this.starList[i].row+1; j< 10; j++) 80 { 81 if(!this.starObjArr[this.starList[i].col][j]){continue;} 82 this.starObjArr[this.starList[i].col][j].row--; 83 this.starObjArr[this.starList[i].col][j-1] = this.starObjArr[this.starList[i].col][j]; 84 this.starObjArr[this.starList[i].col][j] = null; 85 } 86 } 87 },109 //逐帧监听器,在游戏过程中一直执行110 update:function()111 {112 //检测是否有需要移动的星星(上边的向下移动,右边的向左边移动113 this.checkMove();114 },115 //检测是否有需要移动的星星,如果被消除的星星上方还有星星,则上方的需要掉下来,如果这一列为空了且右边还有星星,则右边的需要往做移动116 checkMove:function() 117 {118 //检测上方119 this.checkTop();120 },121 //检测被移除星星上方是否还有星星,如果有则下移122 checkTop:function()123 {124 var needMove = false;125 for(var i = 0; i < 10; i++)126 {127 for(var j = 0; j < 10; j++)128 {129 if(this.starObjArr[i][j] !=null && this.starObjArr[i][j].type != -1)130 {131 //向下移动132 if(this.starObjArr[i][j].y > this.starObjArr[i][j].row*48)133 {134 this.starObjArr[i][j].y -= 8;135 needMove = true;136 }137 //向左移动138 if(this.starObjArr[i][j].x > this.starObjArr[i][j].col*48)139 {140 this.starObjArr[i][j].x -= 8;141 needMove = true;142 }143 }144 }145 }146 //当有星星向下移动时,不能移动列147 if(!needMove)148 {149 //检测是否有空列,如果有则把其右边的列向左移动150 this.checkEmptyColums();151 }152 },153 //检测空列154 checkEmptyColums:function()155 {156 var existEmptyCol = false;157 for(var i = 0; i < 10; i++)158 {159 if(!existEmptyCol)160 {161 //只有在消灭星星后才能检测空列162 if(this.firstTouchStar == null)163 {164 //当列的最下面元素为空时,说明该列为空165 if(this.starObjArr[i][0] == null || this.starObjArr[i][0].type == -1)166 {167 existEmptyCol = true;168 }169 }170 }171 //当有空列时,处理列的移动和col属性的设置172 else if(existEmptyCol)173 {174 for(var j = 0; j < 10; j++)175 {176 if(this.starObjArr[i][j] != null )177 {178 this.starObjArr[i][j].col--;179 this.starObjArr[i-1][j] = this.starObjArr[i][j];180 this.starObjArr[i][j] = null;181 }182 }183 }184 }185 },186 //寻找相连在一起同色的星星187 findSameColorStar:function(target)188 {189 //相连同色星星列表190 this.starList.splice(0); //将列表清空191 this.starList = this.getSameColorStar(target.col, target.row, target.type);192 //将满足条件的相连同色星星设为选中状态,玩家能对消除星星数量一幕了然193 this.showCurrentSameStarSelectedState(this.starList);194 },195 //如果两次选择的不是同种颜色的星星,则将之前选择的星星设为初始状态196 setStarListItemToNomal:function(starList)197 {198 for(var i = 0; i < starList.length; i++)199 {200 //还原列表中星星的初始type值201 starList[i].type = starList[i].normalType;202 starList[i].isSelected = false;203 starList[i].updateTexture();204 starList[i].count = 0;205 }206 },207 //将满足条件的相连同色星星设为选中状态208 showCurrentSameStarSelectedState:function(starList)209 {210 for(var i = 0; i < starList.length; i++)211 {212 starList[i].isSelected = true;213 starList[i].updateTexture();214 starList[i].count++;215 }216 },217 //获得相连同色星星列表218 getSameColorStar:function(col, row, type)219 {220 var starList = [];221 //星星必须在矩阵范围内(9X9)222 if(this.jugementStarPostion(col, row) == -1)223 {224 return starList; 225 }226 if(this.starObjArr[col][row].type == type)227 {228 starList.push(this.starObjArr[col][row]);229 this.starObjArr[col][row].type = -1;230 //递归调用,寻找当前星星四周的同色星星231 starList = starList.concat(this.getSameColorStar(col+1, row, type));//右边232 starList = starList.concat(this.getSameColorStar(col - 1, row, type));//左边233 starList = starList.concat(this.getSameColorStar(col, row + 1, type));//上方234 starList = starList.concat(this.getSameColorStar(col, row - 1, type));//下方235 }236 return starList;237 },238 //判断col,row值是否在矩阵范围内,239 jugementStarPostion:function(col, row)240 {241 if(col < 0 ||col >9) //超出水平范围242 {243 return -1;244 }245 if(row < 0 || row > 9) //超出垂直范围246 {247 return -1;248 }249 if(this.starObjArr[col][row] == null || this.starObjArr[col][row] == undefined) //该对象不存在250 {251 return -1;252 }253 return this.starObjArr[col][row].type;254 },255 //初始化256 zinit:function()257 {258 this.size = cc.size(480, 500);259 //设置层的大小260 this.setSize(this.size);261 //将星星资源存放到数字中262 this.starArr = [263 {id:1, normal:res.star1, selected:res.star1s},264 {id:2, normal:res.star2, selected:res.star2s},265 {id:3, normal:res.star3, selected:res.star3s},266 {id:4, normal:res.star4, selected:res.star4s},267 {id:5, normal:res.star5, selected:res.star5s}268 ];269 for(var i = 0; i < 10; i++)270 {271 this.starObjArr.push([]);272 }273 //开启侦听器,逐侦监听274 this.scheduleUpdate();275 }276 });277 //实例化278 GameStarLayout.createLayout = function()279 {280 var starLayout = new GameStarLayout();281 return starLayout;282 };
/********************effect image******************************/
Cocos2d JS 之消灭星星(九) 处理星星类之——移动和消灭星星
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。