Leaped to the top of the AppStore game < don't step on the white block > Source code Analysis and download (first article)----How can it be red?

AppStore and Android Market conditions

Soehow the red game

Really inexplicable, the author of this game two times, the first time in the Pea pod list to see this game, the name of a strange, download down to try, did not think there is anything new, still in the thinking this is not brush the list brush up, decisively unloaded; the weekend when the app store, suddenly see the first ranking is dont Tap the White Tile (later renamed Panio tiles), translation is not to do not step on the block, the author shocked, too inexplicable, this thing is really fire, not brush the list brush out! Gamers are really elusive, and red a game;

Recent red-Burst games

From Flappy Bird to 2048 to Dont Tap the white Tile, are all fast track approach games, independent developers do, it seems that the individual developers still have the opportunity to get a cup of the game Red Sea, and the author's blog series also experienced these three games;

Flappy Bird game source code disclosure and download follow-up

2048 game source code decryption and download

Don ' t Tap the white tile game source code to decrypt and download

The author of the follow-up

I also drift, what game fire, open-source what game code, of course, this is not a bad thing! In their own people are benefiting, you have a lot of children shoes support AH. This Series A total of three articles, the code is not complete, this one completed the game Classic mode;

Game Source code Download

Running the demo requires a cocoseditor configuration, and no other tools are supported at this stage. Demo is a cross-platform, portable Run ANDROID,IOS,HTML5 Web page, etc., code is based on the JavaScript language, Cocos2d-x game engine, Cocoseditor hand-tour development tools completed.

GitHub Download: Https://github.com/makeapp/cocoseditor-piano (Recent network reorganization of the net disk is not to put if GitHub into not go to QQ group file download)

Under different platforms:

Windows platform

HTML5 platform

Android Platform

Code Analysis: (only select core Master code analysis, more details of self-study source)

1 Create a music array 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 Initialize the table, originally created the table of the length of the list, but in order to optimize, first create the 4*5 table, the use of new additions to the table;

 //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 Create a single table element to determine a black element in a line based on 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 Touch the table, if it is black, if it is the previous line of the current line to continue;

#If you have not reached the top, create a new line moveAddNewSprites, if it reaches the top, create a score end node createTopOverNode;

#If the entire table is moved to the top if (block.blockData.row == (this.pianoLengthIndex - 1)), the game ends this.gameStatus = OVER;

#If it doesn't reach the top, move the entire table down one. this.blockNode.runAction(cc.MoveTo.create(0.2, cc.p(0, (this.blockNode.getPositionY() - this.blockHeight * heightNum)))))

#单元素Run a zoom animation, move steps +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 Touch the table, if it is white, the game is over;

#Create a score end node this.createTopOverNode();

#Change the color background of the score node, the result fails;

   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 Create Add a new row

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 Fractional End node creation function

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;
};

This is the core code of Classic mode, this one is here;

Cocos2d-x cross-platform game engine
Cocos2d-x is a world-renowned game engine, with many developers around the world, spanning a wide range of well-known game developers at home and abroad. Currently, the Cocos2d-x engine has been implemented across iOS, Android, Bada, MeeGo, BlackBerry, Marmalade, Windows, Linux and other platforms. Write once, run around, divided into two versions of cocos2d-c++ and COCOS2D-JS This article uses the latter; Cocos2d-x official website: Http://cocos2d-x.org/cocos2d-x Download/http/ Cocos2d-x.org/download

Cocoseditor Development tools:

Cocoseditor, it is the development of cross-platform mobile game tools, running Window/mac system, JavaScript scripting language, based on Cocos2d-x cross-platform game engine, collection code editing, scene design, animation production, font design, as well as particle, physical system, Maps and so on, and debugging convenient, and real-time simulation;

Cocoseditor Download, Introduction and tutorials: http://blog.csdn.net/touchsnow/article/details/19070665;

Cocoseditor Official blog: http://blog.makeapp.co/;

Author's language:

Want to know more please go to the official blog, the latest blog and code in the official blog debut, please continue to pay attention, there are more Cocoseditor game source is about to release;

Contact Author: [Email protected] (e-mail) QQ Group: 232361142

Leaped to the top of the AppStore game < don't step on the white block > Source code Analysis and download (first article)----How can it be red?