躍居AppStore榜首的遊戲<別踩到白塊兒>原始碼分析和下載(第一篇)----它怎麼也能爆紅？

標籤：別踩白塊兒原始碼   piano tiles原始碼   cocos2d-x   cocoseditor   

AppStore和Android市場情況

莫名其妙爆紅的遊戲

真的莫名其妙，筆者下這個遊戲兩次，第一次在豌豆莢熱門排行榜看到這款遊戲，名字怪怪的，下載下來嘗試一下，沒覺得有什麼新穎的，還在思慮這是不是刷榜刷上去的，果斷卸載了；周末的時候逛逛app store，突然看到熱門排行榜首位是Dont Tap The White Tile（後更名panio tiles ），翻譯一下不就是別踩到白塊兒，筆者震驚了，太莫名其妙了，這東西是真的火，不是刷榜刷出來的！遊戲玩家們心理真的難以捉摸，又捧紅了一款遊戲；

近期爆紅的遊戲

從flappy bird 到2048 再到 Dont Tap The White Tile，都是短平快的遊戲，都是獨立開發人員做的，看來個人開發人員還是有機會在遊戲紅海中獲得一杯羹滴；同時筆者的博文系列也經曆這三個遊戲；

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

2048遊戲原始碼解密和下載

Don‘t Tap The White Tile遊戲原始碼解密和下載

跟風的筆者

筆者也是隨波逐流，什麼遊戲火，就開源什麼遊戲代碼，當然這不是一件壞事！於己於人都是受益的，各位童鞋多多支援呀。本系列總共三篇，代碼未全部完成，這一篇完成了遊戲的傳統模式；

遊戲原始碼下載

運行demo需要配置好CocosEditor，暫不支援其他工具。demo是跨平台的，可移植運行android，ios，html5網頁等，代碼是基於javascript語言，cocos2d-x遊戲引擎，CocosEditor手遊開發工具完成的。

github下載：https://github.com/makeapp/cocoseditor-piano （近期網路整頓  網盤都不給放  如果github進不去 請到qq群檔案下載）

不同平台下的：

windows平台

html5平台

android平台

  

程式碼分析：（只挑選核心主程式碼分析，更多細節自行研究源碼）

1 建立曲譜數組  do、re、mi、fa，sol、la、duo

CITY_OF_SKY = [    4, 3, 4, 1, 3 , 3, 1, 1, 1, 7, 4, 4, 7, 7, 6, 7,    1, 7, 1, 3, 7 , 3 , 6, 5, 6, 1 , 5 , 3, 3];

2 初始化表格，本來先建立4*曲譜數組長度的表格，但為了最佳化，先建立4*5表格，使用時候再不斷建立增加表格；

 //tables    this.tables = new Array(this.pianoLengthIndex);    for (var j = 0; j < this.pianoLength; j++) {        var sprites = new Array(4);        var random = getRandom(4);        for (var i = 0; i < 4; i++) {            sprites[i] = this.newBlock(i, j, random);        }        this.tables[j] = sprites;    }

3 建立單個表格元素，可根據colortype在一行裡確定一個黑色元素

MainLayer.prototype.newBlock = function (i, j, colorType) {    //simple block    var block = cc.Sprite.create("res/whiteBlock.png");    block.setPosition(cc.p(this.blockWidth / 2 + this.blockWidth * i, this.blockHeight / 2 + this.blockHeight * j));    block.setScaleX(this.scaleX);    block.setScaleY(this.scaleY);    block.setZOrder(100);    block.setAnchorPoint(cc.p(0.5, 0.5));    var color = "white";    if (j == 0) {        block.setColor(cc.c3b(0, 255, 0));    } else {        if (i == colorType) {            block.setColor(cc.c3b(30, 30, 30));            color = "black";        }    }    block.blockData = {col: i, row: j, color: color};    this.blockNode.addChild(block);    return block;};

4 觸摸表格，如果是黑色；如果是當前一行的上一行才能繼續；

#如果沒到頂，建立新的一行moveAddNewSprites，如果到頂了，建立分數結束節點createTopOverNode；

#如果整個表格移動到頂if (block.blockData.row == (this.pianoLengthIndex - 1))，遊戲結束 this.gameStatus = OVER;

#如果沒到頂，整個表格往下移一行this.blockNode.runAction(cc.MoveTo.create(0.2, cc.p(0, (this.blockNode.getPositionY() - this.blockHeight * heightNum))));

#單個元素運行一個縮放動畫，移動步數+1； this.moveNum += 1;

//touch black                        if (block.blockData.color == "black") {                            if (block.blockData.row == (this.moveNum + 1)) {                                //create new sprite                                 if (this.pianoLength < this.pianoLengthIndex) {  //not reach top                                    this.moveAddNewSprites();                                }                                if (this.pianoLength == this.pianoLengthIndex) {  //when reach top                                    this.createTopOverNode();                                }                                //move down                                cc.AudioEngine.getInstance().playEffect(PIANO_SIMPLE[this.pianoListIndex[j - 1]], false);                                block.setColor(cc.c3b(100, 100, 100));                                var heightNum = 1;                                if (block.blockData.row == (this.pianoLengthIndex - 1)) { //when last row ,game success end, move two height                                    heightNum = 2;                                    cc.log("end");                                    this.gameStatus = OVER;                                    cc.AudioEngine.getInstance().playEffect(SOUNDS.win, false);                                }                                this.blockNode.runAction(cc.MoveTo.create(0.2, cc.p(0, (this.blockNode.getPositionY() - this.blockHeight * heightNum))));                                this.moveNum += 1;                                block.runAction(cc.Sequence.create(                                    cc.ScaleTo.create(0, this.scaleX * 4 / 5, this.scaleY),                                    cc.ScaleTo.create(0.2, this.scaleX, this.scaleY)                                ));                            }                        }

5觸摸表格，如果是白色，遊戲結束；

#建立分數結束節點this.createTopOverNode();

#改變分數節點的顏色背景，結果失敗；

                           this.createTopOverNode();   //create score node and move                             this.gameStatus = OVER;                            cc.AudioEngine.getInstance().playEffect(SOUNDS.error, false);                            block.setColor(cc.c3b(255, 0, 0));                            block.runAction(cc.Sequence.create(                                cc.ScaleTo.create(0, this.scaleX * 4 / 5, this.scaleY * 4 / 5),                                cc.ScaleTo.create(0.2, this.scaleX, this.scaleY)                            ));                            this.scoreNode.bgColor.setColor(cc.c3b(255, 0, 0));                            this.scoreNode.result.setString("失敗了");                            this.scoreNode.runAction(cc.MoveTo.create(0.2, cc.p(0, this.blockHeight * this.moveNum)));

6 建立添加新的一行

MainLayer.prototype.moveAddNewSprites = function () {    cc.log("moveAddNewSprites");    var sprites = new Array(4);    var random = getRandom(4);    for (var k = 0; k < 4; k++) {        sprites[k] = this.newBlock(k, this.pianoLength, random);    }    this.tables[this.pianoLength] = sprites;    this.pianoLength += 1;};

7 分數結束節點建立函數

MainLayer.prototype.createTopOverNode = function () {    //top score node    this.scoreNode = cc.Node.create();    this.scoreNode.setPosition(cc.p(0, this.blockHeight * this.pianoLength));    this.scoreNode.setAnchorPoint(cc.p(0, 0));    this.scoreNode.setZOrder(130);    this.blockNode.addChild(this.scoreNode);    //color bg    var bgColor = cc.Sprite.create("res/whiteBlock.png");    bgColor.setPosition(cc.p(0, 0));    bgColor.setScaleX(720 / 300);    bgColor.setScaleY(1280 / 500);    bgColor.setAnchorPoint(cc.p(0, 0));    bgColor.setColor(cc.c3b(0, 255, 0));    this.scoreNode.addChild(bgColor);    this.scoreNode.bgColor = bgColor;    //mode    var wordsMode = ["經典", "街機", "禪"];    var modeLabel = cc.LabelTTF.create(wordsMode[GAME_MODE] + "模式", "Arial", 70);    this.scoreNode.addChild(modeLabel);    modeLabel.setPosition(cc.p(350, 1000));    modeLabel.setColor(cc.c3b(0, 0, 0));    modeLabel.setAnchorPoint(cc.p(0.5, 0.5));    //result    var resultLabel = cc.LabelTTF.create("成功了", "Arial", 110);    this.scoreNode.addChild(resultLabel);    resultLabel.setPosition(cc.p(360, 750));    resultLabel.setAnchorPoint(cc.p(0.5, 0.5));    resultLabel.setColor(cc.c3b(139, 58, 58));    this.scoreNode.result = resultLabel;    //back    var backLabel = cc.LabelTTF.create("返回", "Arial", 50);    this.scoreNode.addChild(backLabel);    backLabel.setPosition(cc.p(200, 400));    backLabel.setAnchorPoint(cc.p(0.5, 0.5));    backLabel.setColor(cc.c3b(0, 0, 0));    this.scoreNode.back = backLabel;    //return    var returnLabel = cc.LabelTTF.create("重來", "Arial", 50);    this.scoreNode.addChild(returnLabel);    returnLabel.setPosition(cc.p(500, 400));    returnLabel.setAnchorPoint(cc.p(0.5, 0.5));    returnLabel.setColor(cc.c3b(0, 0, 0));    this.scoreNode.return = returnLabel;};

這是傳統模式的核心代碼，這一篇就到這裡；

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

CocosEditor開發工具：

CocosEditor，它是開發跨平台的手機遊戲工具，運行window/mac系統上，javascript指令碼語言，基於cocos2d-x跨平台遊戲引擎, 集合代碼編輯，情境設計，動畫製作，字型設計，還有粒子，物理系統，地圖等等的，而且調試方便，和即時類比；

CocosEditor 下載，介紹和教程：http://blog.csdn.net/touchsnow/article/details/19070665；

CocosEditor官方部落格：http://blog.makeapp.co/；

筆者語：

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

聯絡筆者：[email protected]（郵箱） qq群：232361142

躍居AppStore榜首的遊戲<別踩到白塊兒>原始碼分析和下載(第一篇)----它怎麼也能爆紅？