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******************************/