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