首页 > 代码库 > 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 之消灭星星(九) 处理星星类之——移动和消灭星星