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                     this.firstTouchStar = null;
 64                     this.removeSameColorStar();
 65                 }
 66             }
 67         }
 68     },
 69     //消灭相连在一块儿的同色星星
 70     removeSameColorStar:function()
 71     {
 72         for(var i = 0; i < this.starList.length; i++)
 73         {
 74             //this.starObjArr是二维数组
 75             for(var j = 0; j < this.starObjArr.length; j++)
 76             {
 77                 for(var k = 0; k < this.starObjArr.length; k++)
 78                 {
 79                     if(this.starObjArr[j][k].col == this.starList[i].col && this.starObjArr[j][k].row == this.starList[i].row)
 80                     {
 81                         this.starObjArr[j][k].removeFromParent();
 82                     }
 83                 }
 84             }
 85         }
 86         this.starList.splice(0);
 87     },
 88     //寻找相连在一块儿同色的星星
 89     findSameColorStar:function(target)
 90     {
 91         //相连同色星星列表
 92         this.starList.splice(0);    //将列表清空
 93         this.starList = this.getSameColorStar(target.col, target.row, target.type);
 94         //将知足条件的相连同色星星设为选中状态,玩家能对消除星星数量一幕了然
 95         this.showCurrentSameStarSelectedState(this.starList);
 96     },
 97     //若是两次选择的不是同种颜色的星星,则将以前选择的星星设为初始状态
 98     setStarListItemToNomal:function(starList)
 99     {
100         for(var i = 0; i < starList.length; i++)
101         {
102             //还原列表中星星的初始type值
103             starList[i].type = starList[i].normalType;
104             starList[i].isSelected = false;
105             starList[i].updateTexture();
106             starList[i].count = 0;
107         }
108     },
109     //将知足条件的相连同色星星设为选中状态
110     showCurrentSameStarSelectedState:function(starList)
111     {
112         for(var i = 0; i < starList.length; i++)
113         {
114             starList[i].isSelected = true;
115             starList[i].updateTexture();
116             starList[i].count++;
117         }
118     },
119     //得到相连同色星星列表
120     getSameColorStar:function(col, row, type)
121     {
122         var starList = [];
123         //星星必须在矩阵范围内(9X9)
124         if(this.jugementStarPostion(col, row) == -1)
125         {
126             return starList;    
127         }
128         if(this.starObjArr[col][row].type == type)
129         {
130             starList.push(this.starObjArr[col][row]);
131             this.starObjArr[col][row].type = -1;
132             //递归调用,寻找当前星星四周的同色星星
133             starList = starList.concat(this.getSameColorStar(col+1, row, type));//右边
134             starList = starList.concat(this.getSameColorStar(col - 1, row, type));//左边
135             starList = starList.concat(this.getSameColorStar(col, row + 1, type));//上方
136             starList = starList.concat(this.getSameColorStar(col, row - 1, type));//下方
137         }
138         return starList;
139     },
140     //判断col,row值是否在矩阵范围内,
141     jugementStarPostion:function(col, row)
142     {
143         if(col < 0 ||col >9)    //超出水平范围
144         {
145             return -1;
146         }
147         if(row < 0 || row > 9) //超出垂直范围
148         {
149             return -1;
150         }
151         if(this.starObjArr[col][row] == null || this.starObjArr[col][row] == undefined)    //该对象不存在
152         {
153             return -1;
154         }
155         return this.starObjArr[col][row].type;
156     },
157     //初始化
158     zinit:function()
159     {
160         this.size = cc.size(480, 500);
161         //设置层的大小
162         this.setSize(this.size);
163         //将星星资源存放到数字中
164         this.starArr = [
165                         {id:1, normal:res.star1, selected:res.star1s},
166                         {id:2, normal:res.star2, selected:res.star2s},
167                         {id:3, normal:res.star3, selected:res.star3s},
168                         {id:4, normal:res.star4, selected:res.star4s},
169                         {id:5, normal:res.star5, selected:res.star5s}
170                         ];
171         for(var i = 0; i < 10; i++)
172         {
173             this.starObjArr.push([]);
174         }
175     }
176 });
177 //实例化
178 GameStarLayout.createLayout = function()
179 {
180     var starLayout = new GameStarLayout();
181     return starLayout;
182 };
/***************************effect image****************************/