當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
Cocos2d JS 之消灭星星(九) 处理星星类之——移动和消灭星星
生活随笔
收集整理的這篇文章主要介紹了
Cocos2d JS 之消灭星星(九) 处理星星类之——移动和消灭星星
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1 /*
2 * 本層擁有處理星星的實例化以及對星星的操作
3 * 1/排列星星
4 * 2/移動和刪除星星
5 */
6 var GAMESTARLAYOUT;
7 var GameStarLayout = ccui.Layout.extend(
8 {
9 size:null,
10 starArr:[],//存放點擊與被點擊狀態的星星資源
11 starObjArr:[],//存放游戲中星星的二位數組
12 firstTouchStar:null,//第一次選擇的星星,用于判斷兩次選擇的星星顏色是否一致
13 isSelected:false,//是否選擇星星,如果已選擇則再次點擊將星星消滅
14 starList:[],//相連同色星星列表
15 starNum:0,//當前關卡星星個數
16 ctor:function()
17 {
18 this._super();
19 this.zinit();
20 this.layoutStar();
21 },
22 //將星星按10*10的矩陣排列出來
23 layoutStar:function()
24 {
25 for(var i = 0; i < 10; i++)
26 {
27 for(var j = 0; j < 10; j++)
28 {
29 //隨機從5種不同顏色的星星中選擇一個
30 var randomNumber = Math.floor(Math.random()*this.starNum);
31 var starResource = this.starArr[randomNumber];
32 var star = new GameCreateStar(starResource.normal, starResource.id,starResource.selected, i, j);
33 this.addChild(star, 0);
34 //星星出現的動畫
35 var moveTo = cc.moveTo(i/10, cc.p(star.width*i, star.height*j));
36 star.runAction(moveTo);
37 //將星星裝到數組中
38 this.starObjArr[i][j] = star;
39 //給每一個星星注冊偵聽器
40 star.addTouchEventListener(this.onTouchStarFunc, this);
41 }
42 }
43 },
44 //星星觸摸偵聽函數
45 onTouchStarFunc:function(target, state)
46 {
47 if(state == ccui.Widget.TOUCH_ENDED) //松開
48 {
49 if(!this.firstTouchStar) //如果第一次選擇的星星為空,則將當前星星賦給它
50 {
51 this.firstTouchStar = target;
52 this.findSameColorStar(target);
53 //如果計分動作未完成則結束動作,取消定時器
54 GAMETOP.cancelSchedule();
55 }
56 else
57 {
58 if(this.starList.length <1){return;} //確保相連同色星星列表不為空,代碼才會向下執行
59 if(this.starList[0].count != target.count) //第二次點擊的不是上一次選擇的星星
60 {
61 //將列表中的星星type還原
62 this.setStarListItemToNomal(this.starList);
63 this.findSameColorStar(target);
64 }
65 else //第二次點擊相連同色星星列表中的星星
66 {
67 if(this.starList.length >1)
68 {
69 this.firstTouchStar = null;
70 this.getScore();
71 this.resetStarRow();
72 }
73 }
74 }
75 }
76 },
77 //消滅信息獲得積分
78 getScore:function()
79 {
80 //GAMETOP對象為GameTopInformation的實例;
81 GAMETOP.updateGameScore(this.starList);
82 },
83 //當消滅星星后,如果上方還有星星存在,則要重新設置他們的row值,用于向下移動星星
84 resetStarRow:function()
85 {
86 for(var i = 0; i < this.starList.length; i++)
87 {
88 this.starList[i].type = -1;
89 this.starList[i].removeFromParent();
90 for(var j = this.starList[i].row+1; j< 10; j++)
91 {
92 if(!this.starObjArr[this.starList[i].col][j]){continue;}
93 this.starObjArr[this.starList[i].col][j].row--;
94 this.starObjArr[this.starList[i].col][j-1] = this.starObjArr[this.starList[i].col][j];
95 this.starObjArr[this.starList[i].col][j] = null;
96 }
97 }
98 },
99 //消滅相連在一起的同色星星
100 removeSameColorStar:function()
101 {
102 for(var i = 0; i < this.starList.length; i++)
103 {
104 //this.starObjArr是二維數組
105 for(var j = 0; j < this.starObjArr.length; j++)
106 {
107 for(var k = 0; k < this.starObjArr.length; k++)
108 {
109 if(!this.starObjArr[j][k]){continue;}
110 if(this.starObjArr[j][k].col == this.starList[i].col && this.starObjArr[j][k].row == this.starList[i].row)
111 {
112 this.starObjArr[j][k].removeFromParent();
113 }
114 }
115 }
116 }
117 this.starList.splice(0);
118 },
119 //逐幀監聽器,在游戲過程中一直執行
120 update:function()
121 {
122 //檢測是否有需要移動的星星(上邊的向下移動,右邊的向左邊移動
123 this.checkMove();
124 },
125 //檢測是否有需要移動的星星,如果被消除的星星上方還有星星,則上方的需要掉下來,如果這一列為空了且右邊還有星星,則右邊的需要往做移動
126 checkMove:function()
127 {
128 //檢測上方
129 this.checkTop();
130 },
131 //檢測被移除星星上方是否還有星星,如果有則下移
132 checkTop:function()
133 {
134 var needMove = false;
135 for(var i = 0; i < 10; i++)
136 {
137 for(var j = 0; j < 10; j++)
138 {
139 if(this.starObjArr[i][j] !=null && this.starObjArr[i][j].type != -1)
140 {
141 //向下移動
142 if(this.starObjArr[i][j].y > this.starObjArr[i][j].row*48)
143 {
144 this.starObjArr[i][j].y -= 8;
145 needMove = true;
146 }
147 //向左移動
148 if(this.starObjArr[i][j].x > this.starObjArr[i][j].col*48)
149 {
150 this.starObjArr[i][j].x -= 8;
151 needMove = true;
152 }
153 }
154 }
155 }
156 //當有星星向下移動時,不能移動列
157 if(!needMove)
158 {
159 //檢測是否有空列,如果有則把其右邊的列向左移動
160 this.checkEmptyColums();
161 }
162 },
163 //檢測空列
164 checkEmptyColums:function()
165 {
166 var existEmptyCol = false;
167 for(var i = 0; i < 10; i++)
168 {
169 if(!existEmptyCol)
170 {
171 //只有在消滅星星后才能檢測空列
172 if(this.firstTouchStar == null)
173 {
174 //當列的最下面元素為空時,說明該列為空
175 if(this.starObjArr[i][0] == null || this.starObjArr[i][0].type == -1)
176 {
177 existEmptyCol = true;
178 }
179 }
180 }
181 //當有空列時,處理列的移動和col屬性的設置
182 else if(existEmptyCol)
183 {
184 for(var j = 0; j < 10; j++)
185 {
186 if(this.starObjArr[i][j] != null )
187 {
188 this.starObjArr[i][j].col--;
189 this.starObjArr[i-1][j] = this.starObjArr[i][j];
190 this.starObjArr[i][j] = null;
191 }
192 }
193 }
194 }
195 },
196 //尋找相連在一起同色的星星
197 findSameColorStar:function(target)
198 {
199 //相連同色星星列表
200 this.starList.splice(0); //將列表清空
201 this.starList = this.getSameColorStar(target.col, target.row, target.type);
202 //將滿足條件的相連同色星星設為選中狀態,玩家能對消除星星數量一幕了然
203 this.showCurrentSameStarSelectedState(this.starList);
204 },
205 //如果兩次選擇的不是同種顏色的星星,則將之前選擇的星星設為初始狀態
206 setStarListItemToNomal:function(starList)
207 {
208 for(var i = 0; i < starList.length; i++)
209 {
210 //還原列表中星星的初始type值
211 starList[i].type = starList[i].normalType;
212 starList[i].isSelected = false;
213 starList[i].updateTexture();
214 starList[i].count = 0;
215 }
216 },
217 //將滿足條件的相連同色星星設為選中狀態
218 showCurrentSameStarSelectedState:function(starList)
219 {
220 for(var i = 0; i < starList.length; i++)
221 {
222 starList[i].isSelected = true;
223 starList[i].updateTexture();
224 starList[i].count++;
225 }
226 },
227 //獲得相連同色星星列表
228 getSameColorStar:function(col, row, type)
229 {
230 var starList = [];
231 //星星必須在矩陣范圍內(9X9)
232 if(this.jugementStarPostion(col, row) == -1)
233 {
234 return starList;
235 }
236 if(this.starObjArr[col][row].type == type)
237 {
238 starList.push(this.starObjArr[col][row]);
239 this.starObjArr[col][row].type = -1;
240 //遞歸調用,尋找當前星星四周的同色星星
241 starList = starList.concat(this.getSameColorStar(col+1, row, type));//右邊
242 starList = starList.concat(this.getSameColorStar(col - 1, row, type));//左邊
243 starList = starList.concat(this.getSameColorStar(col, row + 1, type));//上方
244 starList = starList.concat(this.getSameColorStar(col, row - 1, type));//下方
245 }
246 return starList;
247 },
248 //判斷col,row值是否在矩陣范圍內,
249 jugementStarPostion:function(col, row)
250 {
251 if(col < 0 ||col >9) //超出水平范圍
252 {
253 return -1;
254 }
255 if(row < 0 || row > 9) //超出垂直范圍
256 {
257 return -1;
258 }
259 if(this.starObjArr[col][row] == null || this.starObjArr[col][row] == undefined) //該對象不存在
260 {
261 return -1;
262 }
263 return this.starObjArr[col][row].type;
264 },
265 //檢測游戲結束當沒有可以消除的星星時游戲宣布結束
266 checkGameOver:function()
267 {
268 //遍歷所有的星星
269 for(var i = 0; i < 10; i++)
270 {
271 for(var j = 0; j < 10; j++)
272 {
273 var starType = this.jugementStarPostion(i, j);
274 if(starType == -1){continue;}//不存在星星,則繼續下一次循環(當starType =-1時表示該位置沒有星星)
275 if(starType == this.jugementStarPostion(i, j+1)){return;}//同理
276 if(starType == this.jugementStarPostion(i+1, j)){return;}//當相鄰有相同顏色星星時還回(因為是遍歷每一個星星,所以水平方向只需要檢測星星相鄰右側是否有相同顏色的就可以了)
277 }
278 }
279 //當沒有相同顏色的星星時,宣布游戲結束
280 this.endGame();
281 },
282 //游戲結束
283 endGame:function()
284 {
285 //未通關,還回游戲初始界面
286 if(GAMETOP.intermediaryScore < GAMETOP.standardScore)
287 {
288 GAMETOP.passedLevelEffect(res.fail);
289 var delayTime = cc.DelayTime.create(2.2);
290 var callFunc = cc.CallFunc.create(function()
291 {
292 PlayerLocalData.deleteItem();//刪除游戲紀錄
293 var newGameScene = GameInitializeScene.createScene();
294 cc.director.runScene(cc.TransitionFade.create(1, newGameScene));
295 }, this);
296 this.runAction(cc.Sequence.create(delayTime, callFunc));
297 }
298 else//通過,彈出繼續游戲和保存退出按鈕
299 {
300 var endX = 240;
301 var endY = 850;
302 var b = 400;
303 var c = 330;
304 //繼續游戲
305 var continueGameBtn = new myButton(res.resume);
306 continueGameBtn.setAnchorPoint(0.5, 0.5);
307 continueGameBtn.name = "continueGame";
308 continueGameBtn.x = endX;
309 continueGameBtn.y = endY
310 this.addChild(continueGameBtn, 1);
311 //action2
312 var moveTo2 = cc.MoveTo.create(4, cc.p(endX, b));
313 var easeOut2 = moveTo2.clone().easing(cc.easeElasticOut());
314 continueGameBtn.runAction(easeOut2);
315 //保存退出
316 var saveAndOut = new myButton("img/saveexit.png");
317 saveAndOut.setAnchorPoint(0.5, 0.5);
318 saveAndOut.name = "save";
319 saveAndOut.x = endX;
320 saveAndOut.y = endY;
321 this.addChild(saveAndOut, 1);
322 //action3
323 var moveTo3 = cc.MoveTo.create(3, cc.p(endX, c));
324 var easeOut3 = moveTo3.clone().easing(cc.easeElasticOut());
325 saveAndOut.runAction(easeOut3);
326
327 continueGameBtn.addTouchEventListener(this.btnControlGameFunc, this);
328 saveAndOut.addTouchEventListener(this.btnControlGameFunc, this);
329 }
330 cc.log("endGame "+" **********************************************************")
331 },
332 //按鈕偵聽函數
333 btnControlGameFunc:function(target, state)
334 {
335 if(state == ccui.Widget.TOUCH_ENDED)//松開
336 {
337 switch (target.name)
338 {
339 case "continueGame"://繼續游戲
340 var newGameScene = TransitionScene.createScene(false);
341 cc.director.runScene(cc.TransitionFade.create(1, newGameScene));
342 cc.log("newGame");
343 break;
344
345 case "save"://保存退出
346 var newGameScene = GameInitializeScene.createScene();
347 cc.director.runScene(cc.TransitionFade.create(1, newGameScene));
348 break;
349
350 default:
351 break;
352 }
353 }
354 },
355 //初始化
356 zinit:function()
357 {
358 this.size = cc.size(480, 500);
359 GAMESTARLAYOUT = this;//對本類的引用對象
360 //設置層的大小
361 this.setSize(this.size);
362 //將星星資源存放到數字中
363 this.starArr = [
364 {id:1, normal:res.star1, selected:res.star1s},
365 {id:2, normal:res.star2, selected:res.star2s},
366 {id:3, normal:res.star3, selected:res.star3s},
367 {id:4, normal:res.star4, selected:res.star4s},
368 {id:5, normal:res.star5, selected:res.star5s},
369 {id:5, normal:res.star5, selected:res.star5s},
370 {id:5, normal:res.star5, selected:res.star5s},
371 {id:5, normal:res.star5, selected:res.star5s},
372 {id:5, normal:res.star5, selected:res.star5s},
373 {id:5, normal:res.star5, selected:res.star5s},
374 {id:5, normal:res.star5, selected:res.star5s},
375 {id:5, normal:res.star5, selected:res.star5s},
376 {id:5, normal:res.star5, selected:res.star5s},
377 {id:5, normal:res.star5, selected:res.star5s}
378 ];
379 for(var i = 0; i < 10; i++)
380 {
381 this.starObjArr.push([]);
382 }
383 //開啟偵聽器,逐偵監聽
384 this.scheduleUpdate();
385 this.playerGameData = playerGameData;//給玩家信息定義一個新的實例
386 this.levelNumber = this.playerGameData.currentLevel;//玩家達到的關卡數
387 //獲得當前關卡的星星個數
388 for(var i = 0; i < levelData.length; i++)
389 {
390 if(this.levelNumber == levelData[i].level)
391 {
392 this.starNum = levelData[i].starNumber;
393 break;
394 }
395 }
396 }
397 });
398 //實例化
399 GameStarLayout.createLayout = function()
400 {
401 var starLayout = new GameStarLayout();
402 return starLayout;
403 };
?
轉載于:https://www.cnblogs.com/zfsSuperDream/p/4080947.html
總結
以上是生活随笔為你收集整理的Cocos2d JS 之消灭星星(九) 处理星星类之——移动和消灭星星的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【Javascript】 DOM节点
- 下一篇： javascript学习-创建json对