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表示第一次觸摸  直接檢測顏色相同地區

MainLayer.prototype.onTouchesBegan = function (touches, event) {    var loc = touches[0].getLocation();    this.ccTouchBeganPos = loc;    for (var i = 0; i < this.starTable.length; i++) {        var sprites = this.starTable[i];        for (var j = 0; j < sprites.length; j++) {            var pSprite0 = sprites[j];            if (pSprite0) {                var ccRect = pSprite0.getBoundingBox();                if (isInRect(ccRect, this.ccTouchBeganPos)) {                    if (this.sameColorList.length > 1) {                        if (this.sameColorList.contains(pSprite0)) {                            cc.AudioEngine.getInstance().playEffect(PS_MAIN_SOUNDS.broken, false);                            this.removeSameColorStars();                        } else {                            for (var k = 0; k < this.sameColorList.length; k++) {                                if (this.sameColorList[k]) {                                    this.sameColorList[k].runAction(cc.ScaleTo.create(0.1, 1));                                }                            }                            this.checkSameColorStars(pSprite0);                            if (this.sameColorList.length > 1) {                                cc.AudioEngine.getInstance().playEffect(PS_MAIN_SOUNDS.select, false);                            }                        }                    } else {                        this.checkSameColorStars(pSprite0);                        if (this.sameColorList.length > 1) {                            cc.AudioEngine.getInstance().playEffect(PS_MAIN_SOUNDS.select, false);                        }                    }                    break;                }            }        }    }};

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

MainLayer.prototype.checkOneStarFourSide = function (sprite) {    if (sprite == null) {        return;    }    // cc.log("checkOneStarFourSide");    var fourSideSpriteList = [];    var color = sprite.starData.color;    var col = sprite.starData.indexOfColumn;    var row = sprite.starData.indexOfRow;    //up    if (row < 9) {        var upSprite = this.starTable[col][row + 1];        if (upSprite != null && upSprite.starData.color == color) {            fourSideSpriteList.push(upSprite);        }    }    //down    if (row > 0) {        var downSprite = this.starTable[col][row - 1];        if (downSprite != null && downSprite.starData.color == color) {            fourSideSpriteList.push(downSprite);        }    }    //left    if (col > 0) {        var leftSprite = this.starTable[col - 1][row];        if (leftSprite != null && leftSprite.starData.color == color) {            fourSideSpriteList.push(leftSprite);        }    }    //right    if (col < 9) {        var rightSprite = this.starTable[col + 1][row];        if (rightSprite != null && rightSprite.starData.color == color) {            fourSideSpriteList.push(rightSprite);        }    }    return fourSideSpriteList;}

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

MainLayer.prototype.checkSameColorStars = function (sprite) {    if (sprite == null) {        return;    }    this.sameColorList = [];    this.sameColorList.push(sprite);    var newSameColorList = [];    newSameColorList.push(sprite);    //by logic ,check the same color star list    while (newSameColorList.length > 0) {        for (var i = 0; i < newSameColorList.length; i++) {            var fourSide = this.checkOneStarFourSide(newSameColorList[i]);            if (fourSide.length > 0) {                for (var j = 0; j < fourSide.length; j++) {                    if (!this.sameColorList.contains(fourSide[j])) {                        this.sameColorList.push(fourSide[j]);                        newSameColorList.push(fourSide[j]);                    }                }            }            newSameColorList.splice(i, 1);        }    }    cc.log("sameColorList length==" + this.sameColorList.length);    if (this.sameColorList.length > 1) {        for (var k = 0; k < this.sameColorList.length; k++) {            var simpleStar = this.sameColorList[k];            if (simpleStar) {                simpleStar.runAction(cc.ScaleTo.create(0.1, 1.08));            }        }    }}

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

MainLayer.prototype.removeSameColorStars = function () {    for (var k = 0; k < this.sameColorList.length; k++) {        var simpleStar = this.sameColorList[k];        if (simpleStar) {            var col = simpleStar.starData.indexOfColumn;            var row = simpleStar.starData.indexOfRow;            this.starTable[col].splice(row, 1, null);            this.rootNode.removeChild(simpleStar);            if (sys.platform != 'browser') {                var starParticle = cc.StarParticle.create(this.rootNode, (36 + col * this.starSize), (36 + row * this.starSize), "spark");                starParticle.runAction(cc.Sequence.create(cc.DelayTime.create(0.8), cc.CleanUp.create(starParticle)));            }        }    }    this.sameColorList = [];    this.fallStar();}

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

MainLayer.prototype.fallStar = function () {    for (var i = 0; i < this.starTable.length; i++) {        var sprites = this.starTable[i];        var length = sprites.length;        for (var j = 0; j < length; j++) {            var pSprite0 = sprites[j];            if (pSprite0 == null) {                var k = j + 1;                while (k < length) {                    var upSprite = sprites[k];                    if (upSprite != null) {                        upSprite.starData.indexOfColumn = i;                        upSprite.starData.indexOfRow = j;                        this.starTable[i].splice(j, 1, upSprite);                        this.starTable[i].splice(k, 1, null);                        k = length;                        var flowTime = 0.2;                        var fallAction = cc.MoveTo.create(flowTime, cc.p(36 + i * this.starSize,                            36 + j * this.starSize));                        upSprite.runAction(fallAction);                    }                    k++;                }            }        }    }    this.deadStar();    // this.combineStar();}

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

MainLayer.prototype.combineStar = function () {    for (var m = 0; m < this.starTable.length; m++) {        var mSprite0 = this.starTable[m][0];        if (mSprite0 == null) {            if (m == (this.starTable.length - 1)) {                for (var j = 0; j < this.starTable[m].length; j++) {                    this.starTable[m].splice(j, 1, null);                }            }            else {                for (var i = (m + 1); i < this.starTable.length; i++) {                    // this.starTable.splice((i - 1), 1, this.starTable[i]);                    for (var j = 0; j < this.starTable[i].length; j++) {                        var pSprite0 = this.starTable[i][j];                        this.starTable[i - 1].splice(j, 1, pSprite0);                        if (pSprite0 != null) {                            pSprite0.starData.indexOfColumn = (i - 1);                            var col = pSprite0.starData.indexOfColumn;                            var row = pSprite0.starData.indexOfRow;                            var moveAction = cc.MoveTo.create(0.1, cc.p(36 + col * this.starSize,                                36 + row * this.starSize));                            pSprite0.runAction(moveAction);                        }                    }                }            }        }    }    this.deadStar();}

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

MainLayer.prototype.deadStar = function () {    var isDead = true;    for (var i = 0; i < this.starTable.length; i++) {        var sprites = this.starTable[i];        var length = sprites.length;        for (var j = 0; j < length; j++) {            var pSprite0 = sprites[j];            if (pSprite0 != null) {                if (this.checkOneStarFourSide(pSprite0).length > 0) {                    isDead = false;                    return;                }            }        }    }    if (isDead) {        for (var jj = 9; jj >= 0; jj--) {            for (var ii = 0; ii < 10; ii++) {                var pSprite0 = this.starTable[ii][jj];                if (pSprite0 != null) {                    var delay = 4 + 0.3 * ii - 0.4 * jj;                    pSprite0.runAction(cc.Sequence.create(                        cc.DelayTime.create(delay),                        cc.CleanUp.create(pSprite0)                    ));                    var starParticle = cc.StarParticle.create(this.rootNode, (36 + ii * this.starSize), (36 + jj * this.starSize), "spark");                    starParticle.runAction(cc.Sequence.create(cc.ScaleTo.create(0, 0),                        cc.DelayTime.create(delay), cc.ScaleTo.create(0, 1), cc.DelayTime.create(0.8),                        cc.CleanUp.create(starParticle)));                }            }        }    }}

基本的流程就是這樣      觸摸——檢測顏色——消除星星——掉落移動——合并星星——檢測死局——結束  消除類的遊戲思路都差不多是這樣，把這個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/；

PopStar博文系列：

PopStar(消滅星星)遊戲原始碼下載、分析及跨平台移植---第一篇（介面） 

PopStar(消滅星星)遊戲原始碼下載、分析及跨平台移植---第二篇（演算法） 

PopStar(消滅星星)遊戲原始碼下載、分析及跨平台移植---第三篇（分數）  ——將寫——

PopStar(消滅星星)遊戲原始碼下載、分析及跨平台移植---第四篇（關卡）  ——將寫——

PopStar(消滅星星)遊戲原始碼下載、分析及跨平台移植---第五篇（移植）  ——將寫——

傳送門（優質博文）：

flappy bird遊戲原始碼揭秘和下載

flappy bird遊戲原始碼揭秘和下載後續---移植到android真機上

flappy bird遊戲原始碼揭秘和下載後續---移植到html5網頁瀏覽器

flappy bird遊戲原始碼揭秘和下載後續---日進5萬美元的秘訣AdMob廣告 

筆者語：

想瞭解更多請進入官方部落格，最新部落格和代碼在官方部落格首發；請持續關注，還有更多cocos2dx editor遊戲源碼即將放出；

聯絡筆者：zuowen@makeapp.co（郵箱） qq群：232361142

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