PopStar(掃滅星星)遊戲源代碼下載、分析及跨平台移植-第二篇(演算法)

tags:    時間:2014-03-23 13:56:32
PopStar(消滅星星)遊戲源代碼下載、分析及跨平台移植---第二篇(演算法)

背景:

  上一節,我們已經把消滅星星的界面搭建好了,流程也跑通了。 這一篇涉及到程序的演算法,也許是最難的部分了,理解起來需要多花點時間,而且我提供的演算法未必就是最好的,如果讀者有更優更好的演算法,希望分享出來,我可以鏈接到你那裡。大概的思路是這樣的,第一次點擊一個星星,立刻尋找四周相同顏色的,第二次點擊,消除他們併產生粒子效果;接著星星數組重新走位掉落,補全空缺;然後還要檢測縱行是否出現空缺,有的話,合併到一起;最後必須檢測死局;大概如此。

ps:

1 這是一個系列博文,代碼不會一下子全部放出來,每寫一篇放出相應的代碼。因為筆者也是抽空編一點程序,然後寫一篇博文,斷斷續續的,沒有整塊時間;

2 代碼是基於javascript語言,cocos2d-x遊戲引擎,cocos2d-x editor手游開發工具完成的;

3 運行demo需要配置好cocos2d-x editor,暫不支持其他工具。demo是跨平台的,可移植運行android,ios,html5網頁等。

 

 

源代碼下載:

請到代碼集中營下載(第二篇演算法):http://blog.makeapp.co/?p=319

 

 

不同平台下的效果圖:(windows、html5、android)

 


 


 

          

 

代碼分析:

主要集中在MainLayer.js下面的分析

第一步,10*10星星群檢測觸摸事件,通過this.sameColorList.length可以判斷是第一次觸摸還是第二次觸摸 ;   

    @@    >1表示第二次觸摸,這裡又有分支,觸摸的是剛才同一顏色區域還是其他區域?如果是原來顏色區域,刪除this.removeSameColorStars(),如果不是原來顏色區域,恢復原狀,然後新的檢測

    @@     <=1表示第一次觸摸  直接檢測顏色相同區域

 

[javascript] view plaincopy
 
  1. MainLayer.prototype.onTouchesBegan = function (touches, event) {  
  2.     var loc = touches[0].getLocation();  
  3.     this.ccTouchBeganPos = loc;  
  4.   
  5.     for (var i = 0; i < this.starTable.length; i++) {  
  6.         var sprites = this.starTable[i];  
  7.         for (var j = 0; j < sprites.length; j++) {  
  8.             var pSprite0 = sprites[j];  
  9.             if (pSprite0) {  
  10.                 var ccRect = pSprite0.getBoundingBox();  
  11.                 if (isInRect(ccRect, this.ccTouchBeganPos)) {  
  12.                     if (this.sameColorList.length > 1) {  
  13.                         if (this.sameColorList.contains(pSprite0)) {  
  14.                             cc.AudioEngine.getInstance().playEffect(PS_MAIN_SOUNDS.broken, false);  
  15.                             this.removeSameColorStars();  
  16.                         } else {  
  17.                             for (var k = 0; k < this.sameColorList.length; k++) {  
  18.                                 if (this.sameColorList[k]) {  
  19.                                     this.sameColorList[k].runAction(cc.ScaleTo.create(0.1, 1));  
  20.                                 }  
  21.                             }  
  22.                             this.checkSameColorStars(pSprite0);  
  23.                             if (this.sameColorList.length > 1) {  
  24.                                 cc.AudioEngine.getInstance().playEffect(PS_MAIN_SOUNDS.select, false);  
  25.                             }  
  26.                         }  
  27.                     } else {  
  28.                         this.checkSameColorStars(pSprite0);  
  29.                         if (this.sameColorList.length > 1) {  
  30.                             cc.AudioEngine.getInstance().playEffect(PS_MAIN_SOUNDS.select, false);  
  31.                         }  
  32.                     }  
  33.   
  34.                     break;  
  35.                 }  
  36.             }  
  37.         }  
  38.     }  
  39. };  



 

第二步,建立單個星星的四個方向檢測,上下左右,把顏色相同的放在一個數組裡面,回調這個數組;其實最後用這個函數的時候主要是判斷數組的大小;數組大於1,說明四周有相同顏色的;

 

[javascript] view plaincopy
 
  1. MainLayer.prototype.checkOneStarFourSide = function (sprite) {  
  2.     if (sprite == null) {  
  3.         return;  
  4.     }  
  5.     // cc.log("checkOneStarFourSide");  
  6.     var fourSideSpriteList = [];  
  7.     var color = sprite.starData.color;  
  8.     var col = sprite.starData.indexOfColumn;  
  9.     var row = sprite.starData.indexOfRow;  
  10.   
  11.     //up  
  12.     if (row < 9) {  
  13.         var upSprite = this.starTable[col][row + 1];  
  14.         if (upSprite != null && upSprite.starData.color == color) {  
  15.             fourSideSpriteList.push(upSprite);  
  16.         }  
  17.     }  
  18.   
  19.     //down  
  20.     if (row > 0) {  
  21.         var downSprite = this.starTable[col][row - 1];  
  22.         if (downSprite != null && downSprite.starData.color == color) {  
  23.             fourSideSpriteList.push(downSprite);  
  24.         }  
  25.     }  
  26.   
  27.     //left  
  28.     if (col > 0) {  
  29.         var leftSprite = this.starTable[col - 1][row];  
  30.         if (leftSprite != null && leftSprite.starData.color == color) {  
  31.             fourSideSpriteList.push(leftSprite);  
  32.         }  
  33.     }  
  34.   
  35.     //right  
  36.     if (col < 9) {  
  37.         var rightSprite = this.starTable[col + 1][row];  
  38.         if (rightSprite != null && rightSprite.starData.color == color) {  
  39.             fourSideSpriteList.push(rightSprite);  
  40.         }  
  41.     }  
  42.     return fourSideSpriteList;  
  43. }  



 

第三步,檢測相同顏色區域,這裡的演算法比較複雜;有兩個數組this.sameColorList和newSameColorList,前者是全局星星數組,後者是每次擴展新加入的星星;比如這樣情況,一個星星左右上有相同的星星,上面的上面還有一個星星,總共五個相同星星:三次檢測情況是this.sameColorList為1---4----5 ,而newSameColorList為1--3--1,各種曲折,讀者好好理解下;

 

[javascript] view plaincopy
 
  1. MainLayer.prototype.checkSameColorStars = function (sprite) {  
  2.     if (sprite == null) {  
  3.         return;  
  4.     }  
  5.     this.sameColorList = [];  
  6.     this.sameColorList.push(sprite);  
  7.     var newSameColorList = [];  
  8.     newSameColorList.push(sprite);  
  9.   
  10.     //by logic ,check the same color star list  
  11.     while (newSameColorList.length > 0) {  
  12.         for (var i = 0; i < newSameColorList.length; i++) {  
  13.             var fourSide = this.checkOneStarFourSide(newSameColorList[i]);  
  14.             if (fourSide.length > 0) {  
  15.                 for (var j = 0; j < fourSide.length; j++) {  
  16.                     if (!this.sameColorList.contains(fourSide[j])) {  
  17.                         this.sameColorList.push(fourSide[j]);  
  18.                         newSameColorList.push(fourSide[j]);  
  19.                     }  
  20.                 }  
  21.             }  
  22.             newSameColorList.splice(i, 1);  
  23.         }  
  24.     }  
  25.     cc.log("sameColorList length==" + this.sameColorList.length);  
  26.     if (this.sameColorList.length > 1) {  
  27.         for (var k = 0; k < this.sameColorList.length; k++) {  
  28.             var simpleStar = this.sameColorList[k];  
  29.             if (simpleStar) {  
  30.                 simpleStar.runAction(cc.ScaleTo.create(0.1, 1.08));  
  31.             }  
  32.         }  
  33.     }  
  34. }  



 

第四步 移除相同的星星,併產生粒子效果

 

[javascript] view plaincopy
 
  1. MainLayer.prototype.removeSameColorStars = function () {  
  2.     for (var k = 0; k < this.sameColorList.length; k++) {  
  3.         var simpleStar = this.sameColorList[k];  
  4.         if (simpleStar) {  
  5.             var col = simpleStar.starData.indexOfColumn;  
  6.             var row = simpleStar.starData.indexOfRow;  
  7.             this.starTable[col].splice(row, 1, null);  
  8.             this.rootNode.removeChild(simpleStar);  
  9.             if (sys.platform != 'browser') {  
  10.                 var starParticle = cc.StarParticle.create(this.rootNode, (36 + col * this.starSize), (36 + row * this.starSize), "spark");  
  11.                 starParticle.runAction(cc.Sequence.create(cc.DelayTime.create(0.8), cc.CleanUp.create(starParticle)));  
  12.             }  
  13.         }  
  14.     }  
  15.     this.sameColorList = [];  
  16.     this.fallStar();  
  17. }  



 

第五步 星星掉落 填充空缺,主要是如果一個地方有空缺,就把它上面的星星位置和數據交換,用到數組的方法splice,可到網上查看js數組的一些方法應用

 

[javascript] view plaincopy
 
  1. MainLayer.prototype.fallStar = function () {  
  2.     for (var i = 0; i < this.starTable.length; i++) {  
  3.         var sprites = this.starTable[i];  
  4.         var length = sprites.length;  
  5.         for (var j = 0; j < length; j++) {  
  6.             var pSprite0 = sprites[j];  
  7.             if (pSprite0 == null) {  
  8.                 var k = j + 1;  
  9.                 while (k < length) {  
  10.                     var upSprite = sprites[k];  
  11.                     if (upSprite != null) {  
  12.                         upSprite.starData.indexOfColumn = i;  
  13.                         upSprite.starData.indexOfRow = j;  
  14.                         this.starTable[i].splice(j, 1, upSprite);  
  15.                         this.starTable[i].splice(k, 1, null);  
  16.                         k = length;  
  17.                         var flowTime = 0.2;  
  18.                         var fallAction = cc.MoveTo.create(flowTime, cc.p(36 + i * this.starSize,  
  19.                             36 + j * this.starSize));  
  20.                         upSprite.runAction(fallAction);  
  21.                     }  
  22.                     k++;  
  23.                 }  
  24.             }  
  25.         }  
  26.     }  
  27.   
  28.     this.deadStar();  
  29.     // this.combineStar();  
  30. }  



 

第六步 合併星星,如果最底部有空缺,星星必須向左合併,這裡筆者調試有問題,時間匆忙 來不及修改,讀者可以自行研究修改;不解釋了

 

[javascript] view plaincopy
 
  1. MainLayer.prototype.combineStar = function () {  
  2.     for (var m = 0; m < this.starTable.length; m++) {  
  3.         var mSprite0 = this.starTable[m][0];  
  4.         if (mSprite0 == null) {  
  5.             if (m == (this.starTable.length - 1)) {  
  6.                 for (var j = 0; j < this.starTable[m].length; j++) {  
  7.                     this.starTable[m].splice(j, 1, null);  
  8.                 }  
  9.             }  
  10.             else {  
  11.                 for (var i = (m + 1); i < this.starTable.length; i++) {  
  12.                     // this.starTable.splice((i - 1), 1, this.starTable[i]);  
  13.                     for (var j = 0; j < this.starTable[i].length; j++) {  
  14.                         var pSprite0 = this.starTable[i][j];  
  15.                         this.starTable[i - 1].splice(j, 1, pSprite0);  
  16.                         if (pSprite0 != null) {  
  17.                             pSprite0.starData.indexOfColumn = (i - 1);  
  18.                             var col = pSprite0.starData.indexOfColumn;  
  19.                             var row = pSprite0.starData.indexOfRow;  
  20.                             var moveAction = cc.MoveTo.create(0.1, cc.p(36 + col * this.starSize,  
  21.                                 36 + row * this.starSize));  
  22.                             pSprite0.runAction(moveAction);  
  23.                         }  
  24.                     }  
  25.                 }  
  26.             }  
  27.         }  
  28.     }  
  29.     this.deadStar();  
  30. }  



 

第七步 遊戲到最後 會發生死局情況,程序自動判斷消除;這裡主要是循環檢測每一個星星,如果所有的星星四周都沒有相同星星的時候,就確認為死局,程序自動消除星星 

 

[javascript] view plaincopy
 
  1. MainLayer.prototype.deadStar = function () {  
  2.     var isDead = true;  
  3.     for (var i = 0; i < this.starTable.length; i++) {  
  4.         var sprites = this.starTable[i];  
  5.         var length = sprites.length;  
  6.         for (var j = 0; j < length; j++) {  
  7.             var pSprite0 = sprites[j];  
  8.             if (pSprite0 != null) {  
  9.                 if (this.checkOneStarFourSide(pSprite0).length > 0) {  
  10.                     isDead = false;  
  11.                     return;  
  12.                 }  
  13.             }  
  14.         }  
  15.     }  
  16.   
  17.     if (isDead) {  
  18.         for (var jj = 9; jj >= 0; jj--) {  
  19.             for (var ii = 0; ii < 10; ii++) {  
  20.                 var pSprite0 = this.starTable[ii][jj];  
  21.                 if (pSprite0 != null) {  
  22.                     var delay = 4 + 0.3 * ii - 0.4 * jj;  
  23.                     pSprite0.runAction(cc.Sequence.create(  
  24.                         cc.DelayTime.create(delay),  
  25.                         cc.CleanUp.create(pSprite0)  
  26.                     ));  
  27.                     var starParticle = cc.StarParticle.create(this.rootNode, (36 + ii * this.starSize), (36 + jj * this.starSize), "spark");  
  28.                     starParticle.runAction(cc.Sequence.create(cc.ScaleTo.create(0, 0),  
  29.                         cc.DelayTime.create(delay), cc.ScaleTo.create(0, 1), cc.DelayTime.create(0.8),  
  30.                         cc.CleanUp.create(starParticle)));  
  31.                 }  
  32.             }  
  33.         }  
  34.     }  
  35. }  



 

基本的流程就是這樣      觸摸——檢測顏色——消除星星——掉落移動——合併星星——檢測死局——結束  消除類的遊戲思路都差不多是這樣,把這個demo理解透了 任何消除類的遊戲都很簡單




cocos2d-x跨平台遊戲引擎
 
cocos2d-x是全球知名的遊戲引擎 ,引擎在全球範圍內擁有眾多開發者,涵蓋國內外各知名遊戲開發商。目前Cocos2d-x引擎已經實現橫跨ios、Android、Bada、MeeGo、BlackBerry、Marmalade、Windows、Linux等平台。編寫一次,到處運行,分為兩個版本 cocos2d-c++和cocos2d-html5 本文使用了後者;
cocos2d-x 官網:http://cocos2d-x.org/
cocos2d-x 資料下載  http://cocos2d-x.org/download

 

 

 

cocos2d-x editor開發工具:

cocos2d-x editor,它是開發跨平台的手機遊戲工具,運行window/mac系統上,javascript腳本語言,基於cocos2d-x跨平台遊戲引擎, 集合代碼編輯,場景設計,動畫製作,字體設計,還有粒子,物理系統,地圖等等的,而且調試方便,和實時模擬;

cocos2d-x editor 下載,介紹和教程:http://blog.csdn.net/touchsnow/article/details/19070665;

cocos2d-x editor官方博客:http://blog.makeapp.co/;

推薦閱讀文章

Bookmark the permalink ,來源:互聯網