Top game in the AppStore list & lt; do not step on the white block & gt; source code analysis and download (Article 1)-How can it burst into red?

AppStore and Android Market Conditions

An inexplicable game

It's really inexplicable. I tried this game twice. The first time I saw this game in the pods ranking, I got a strange name. I downloaded it and tried it. I didn't think there was anything new, I was still thinking about whether it was a click on The list and uninstalling it. On The weekend, I browsed The app store and suddenly saw Dont Tap The White Tile (and renamed panio tiles) at The top of The list ), the translation is not just to step on the white block. I was shocked. It was so inexplicable. It was a real fire, not a fake list! The psychology of game players is really unpredictable, and a game is also popular;

Recent games

From flappy bird to 2048 and then to Dont Tap The White Tile, they are all short and fast games made by independent developers. It seems that individual developers still have The opportunity to get a piece of cake in The game's Red Ocean; at the same time, the author's blog series also experienced these three games;

Flappy bird game source code revealing and downloading follow-up

2048 game source code decryption and download

Don't Tap The White Tile game source code decryption and download

Follow-up author

This is not a bad thing, of course, because the author is also a stream-by-stream. What kind of game fire should open source game code! Everyone has benefited from it. You have a lot of support for kids shoes. There are three articles in this series, and the code is not all completed. This article completes the Classic Mode of the game;

Download game source code

CocosEditor must be configured to run the demo. Other tools are not supported. Demo is cross-platform, can be transplanted to run android, ios, html5 web pages, code is based on javascript language, cocos2d-x game engine, CocosEditor mobile game development tools to complete.

Github download: https://github.com/makeapp/cocoseditor-piano (recent network rectification Network Disk are not to put if github can not go to the QQ group File Download)

For different platforms:

Windows Platform

Html5 Platform

Android platform

Code analysis: (only the core main code analysis is selected. For more details, study the source code)

1 create a curve 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. A table with a 4 * curve array length is created first. To optimize the table, a 4*5 Table is created first, and the table is continuously created and added when used;

 //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. You can determine a black element in a row 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, the previous row of the current row can continue;

# If not, create a new moveAddNewSprites line. If it reaches the top, create the 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 does not reach the top, move the entire table down one line this. blockNode. runAction (cc. moveTo. create (0.2, cc. p (0, (this. blockNode. getPositionY ()-this. blockHeight * heightNum ))));

# Run a scaling animation with the number of moving steps plus 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 ends;

# Create the score End Node this. createTopOverNode ();

# Failed to change the color background of the score node;

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 ("failed"); this. scoreNode. runAction (cc. moveTo. create (0.2, cc. p (0, this. blockHeight * this. moveNum )));

6. Create and 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. Create a function for the End Node of the score

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. setscale( 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 = ["classic", "Arcade", "Zen"]; var modeLabel = cc. labelTTF. create (wordsMode [GAME_MODE] + "Mode", "Arial", 70); this. scoreNode. addChild (modeLabel); modeLabel. setPosition (cc. p (350,100 0); modeLabel. setColor (cc. c3b (0, 0, 0); modeLabel. setAnchorPoint (cc. p (0.5, 0.5); // result var resultLabel = cc. labelTTF. create ("succeeded", "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 ("return", "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 ("re", "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 the Classic mode;

Cocos2d-x cross-platform game engine
Cocos2d-x is a world-renowned game engine, engine in the world has a large number of developers, covering all well-known game developers at home and abroad. At present, Cocos2d-x engine has been achieved across ios, Android, Bada, MeeGo, BlackBerry, Marmalade, Windows, Linux and other platforms. Write once, run everywhere, 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 data download http://cocos2d-x.org/download

CocosEditor development tool:

CocosEditor, it is the development of cross-platform mobile game tools, run Windows/mac system, javascript scripting language, based on cocos2d-x cross-platform game engine, set code editing, Scene Design, animation production, font design, as well as particle, physical system, MAP and so on, and easy debugging, and real-time simulation;

Download CocosEditor, introduction and Tutorial: http://blog.csdn.net/touchsnow/article/details/41070665;

CocosEditor blog: http://blog.makeapp.co /;

Author's note:

For more information, please go to the official blog. The latest blog and code will be launched on the official blog. Please stay tuned for more CocosEditor game source code coming soon;

Contact me: zuowen@makeapp.co (Mailbox) QQ group: 232361142