PopStar(消滅星星)遊戲源代碼下載、分析及跨平臺移植---第一篇（界面）

背景：

來自星星的你電視劇很火，消滅星星遊戲也很火，好像星星都很火，筆者就以星星爲主題開始這篇博文。消除類的遊戲挺受歡迎的，從2013年度app store最賺錢的遊戲--粉碎糖果傳奇，到總是可以在遊戲排行版看見身影的--消滅星星；玩消除類的遊戲好像挺難的，開發這樣的遊戲是不是巨難？筆者想告訴你的是，開發比玩容易多了。這個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

不同平臺下的效果圖：（window、html5、android）

代碼分析：

消滅星星包括兩個場景：StartLayer和MainLayer；我們先實現開始界面；首先在StartLayer.ccbx設計場景，這個很簡單無需解釋，功能上主要包括：

1 點擊New Game按鈕進入主遊戲場景

StartLayer.prototype.onStartClicked = function () {
    this.newGame.runAction(cc.ScaleTo.create(0.1, 1.2));
    cc.BuilderReader.runScene("", "MainLayer");
}

2 創建背景的煙花粒子效果，有兩個粒子，leaf_open和quanquan

StartLayer.prototype.onEnter = function () {
    this.star.setZOrder(11);
    this.pop.setZOrder(11);
    if (sys.platform != 'browser') {
        if (this.isFirst) {
            this.createBgParticle(200, 800, "leaf_open");
            this.createBgParticle(600, 1000, "quanquan");
            // this.createBgParticle(470, 900, "spark");
            this.isFirst = false;
        }
    }
}

StartLayer.prototype.createBgParticle = function (x, y, name) {
    var particle = cc.ParticleSystem.create("Resources/particles/" + name + ".plist");
    particle.setAnchorPoint(cc.p(0.5, 0.5));
    particle.setPosition(cc.p(x, y));
    particle.setZOrder(10);
    this.rootNode.addChild(particle);
    return particle;
}

接着進入了遊戲主場景，主場景如何設計也不解釋了。隨機創建10*10表格的星星羣，星星從頂部掉落下來的動畫

1 創建隨機星星，並單個星星加入掉落動畫

MainLayer.prototype.getRandomStar = function (colIndex, rowIndex) {
    this.starSize = 72;
    var stars = PS_MAIN_TEXTURE.STARS;
    var randomStar = stars[getRandom(stars.length)];
    var starSprite = cc.Sprite.createWithSpriteFrameName(randomStar);
    starSprite.setAnchorPoint(cc.p(0.5, 0.5));
    starSprite.setPosition(cc.p(36 + colIndex * this.starSize,
        1300));
    starSprite.starData = {name: randomStar, indexOfColumn: colIndex, indexOfRow: rowIndex};
    starSprite.setZOrder(100);

    var flowTime = rowIndex / 10;
    var fallAction = cc.MoveTo.create(flowTime, cc.p(36 + colIndex * this.starSize,
        36 + rowIndex * this.starSize));
    starSprite.runAction(fallAction);
    return starSprite;
}

2 根據表格位置初始化10*10星星羣

MainLayer.prototype.initStarTable = function () {
    this.starTable = new Array(this.numX);
    for (var i = 0; i < this.numX; i++) {
        var sprites = new Array(this.numY);
        for (var j = 0; j < this.numY; j++) {
            var pSprite0 = this.getRandomStar(i, j);
            if (pSprite0 != null) {
                this.rootNode.addChild(pSprite0);
            }

            sprites[j] = pSprite0;
        }
        this.starTable[i] = sprites;
    }
}

在主場景可以點擊單個星星，星星進行縮放，這裏是爲下一篇算法做準備，當前博文代碼還不能消除；

 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)) {
                    this.pSelectedSprite = pSprite0;
                    var scaleAction = cc.Sequence.create(
                        cc.ScaleTo.create(0.2, 1.2), cc.DelayTime.create(0.25), cc.ScaleTo.create(0.2, 1))
                    this.pSelectedSprite.runAction(scaleAction);
                    break;
                }
            }
        }
    }

最後在主場景加入暫停懸浮層，點擊右上角的暫停按鈕，顯示懸浮層，按鈕resume點擊可以隱藏懸浮層，按鈕save&exit點擊可以返回到開始界面

MainLayer.prototype.onPauseClicked = function () {
    this.pauseNode.setVisible(true);
}

MainLayer.prototype.onResumeClicked = function () {
    this.pauseNode.setVisible(false);
}


MainLayer.prototype.onSaveExitClicked = function () {
    cc.BuilderReader.runScene("", "StartLayer");
}

到這裏，消滅星星的基本框架和界面就完成了；

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(消滅星星)遊戲源代碼下載、分析及跨平臺移植---第五篇（移植） ——將寫——