雄踞AppStore榜首的游戏<别踩到白块儿>源代码分析和下载(第一篇)----它怎么也能爆红？

本文转载自http://blog.csdn.net/touchsnow/article/details/24148421

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

[javascript]  view plain copy

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

2 初始化表格，本来先创建4*曲谱数组长度的表格，但为了优化，先创建4*5表格，使用时候再不断新建增加表格；

[javascript]  view plain copy

1. //tables  
2.    this.tables = new Array(this.pianoLengthIndex);  
3.    for (var j = 0; j < this.pianoLength; j++) {  
4.        var sprites = new Array(4);  
5.        var random = getRandom(4);  
6.        for (var i = 0; i < 4; i++) {  
7.            sprites[i] = this.newBlock(i, j, random);  
8.        }  
9.        this.tables[j] = sprites;  
10.    }  

3 创建单个表格元素，可根据colortype在一行里确定一个黑色元素

[javascript]  view plain copy

1. MainLayer.prototype.newBlock = function (i, j, colorType) {  
2.     //simple block  
3.     var block = cc.Sprite.create("res/whiteBlock.png");  
4.     block.setPosition(cc.p(this.blockWidth / 2 + this.blockWidth * i, this.blockHeight / 2 + this.blockHeight * j));  
5.     block.setScaleX(this.scaleX);  
6.     block.setScaleY(this.scaleY);  
7.     block.setZOrder(100);  
8.     block.setAnchorPoint(cc.p(0.5, 0.5));  
9.     var color = "white";  
10.     if (j == 0) {  
11.         block.setColor(cc.c3b(0, 255, 0));  
12.     } else {  
13.         if (i == colorType) {  
14.             block.setColor(cc.c3b(30, 30, 30));  
15.             color = "black";  
16.         }  
17.     }  
18.     block.blockData = {col: i, row: j, color: color};  
19.     this.blockNode.addChild(block);  
20.     return block;  
21. };  

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;

[javascript]  view plain copy

1. //touch black  
2.                         if (block.blockData.color == "black") {  
3.                             if (block.blockData.row == (this.moveNum + 1)) {  
4.   
5.                                 //create new sprite   
6.                                 if (this.pianoLength < this.pianoLengthIndex) {  //not reach top  
7.                                     this.moveAddNewSprites();  
8.                                 }  
9.   
10.                                 if (this.pianoLength == this.pianoLengthIndex) {  //when reach top  
11.                                     this.createTopOverNode();  
12.                                 }  
13.   
14.                                 //move down  
15.                                 cc.AudioEngine.getInstance().playEffect(PIANO_SIMPLE[this.pianoListIndex[j - 1]], false);  
16.                                 block.setColor(cc.c3b(100, 100, 100));  
17.                                 var heightNum = 1;  
18.                                 if (block.blockData.row == (this.pianoLengthIndex - 1)) { //when last row ,game success end, move two height  
19.                                     heightNum = 2;  
20.                                     cc.log("end");  
21.                                     this.gameStatus = OVER;  
22.                                     cc.AudioEngine.getInstance().playEffect(SOUNDS.win, false);  
23.   
24.                                 }  
25.                                 this.blockNode.runAction(cc.MoveTo.create(0.2, cc.p(0, (this.blockNode.getPositionY() - this.blockHeight * heightNum))));  
26.                                 this.moveNum += 1;  
27.                                 block.runAction(cc.Sequence.create(  
28.                                     cc.ScaleTo.create(0, this.scaleX * 4 / 5, this.scaleY),  
29.                                     cc.ScaleTo.create(0.2, this.scaleX, this.scaleY)  
30.                                 ));  
31.                             }  
32.                         }  

5触摸表格，如果是白色，游戏结束；

#创建分数结束节点this.createTopOverNode();

#改变分数节点的颜色背景，结果失败；

[javascript]  view plain copy

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

6 创建添加新的一行

[javascript]  view plain copy

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

7 分数结束节点创建函数

[javascript]  view plain copy

1. MainLayer.prototype.createTopOverNode = function () {  
2.     //top score node  
3.     this.scoreNode = cc.Node.create();  
4.     this.scoreNode.setPosition(cc.p(0, this.blockHeight * this.pianoLength));  
5.     this.scoreNode.setAnchorPoint(cc.p(0, 0));  
6.     this.scoreNode.setZOrder(130);  
7.     this.blockNode.addChild(this.scoreNode);  
8.   
9.     //color bg  
10.     var bgColor = cc.Sprite.create("res/whiteBlock.png");  
11.     bgColor.setPosition(cc.p(0, 0));  
12.     bgColor.setScaleX(720 / 300);  
13.     bgColor.setScaleY(1280 / 500);  
14.     bgColor.setAnchorPoint(cc.p(0, 0));  
15.     bgColor.setColor(cc.c3b(0, 255, 0));  
16.     this.scoreNode.addChild(bgColor);  
17.     this.scoreNode.bgColor = bgColor;  
18.   
19.     //mode  
20.     var wordsMode = ["经典", "街机", "禅"];  
21.     var modeLabel = cc.LabelTTF.create(wordsMode[GAME_MODE] + "模式", "Arial", 70);  
22.     this.scoreNode.addChild(modeLabel);  
23.     modeLabel.setPosition(cc.p(350, 1000));  
24.     modeLabel.setColor(cc.c3b(0, 0, 0));  
25.     modeLabel.setAnchorPoint(cc.p(0.5, 0.5));  
26.   
27.     //result  
28.     var resultLabel = cc.LabelTTF.create("成功了", "Arial", 110);  
29.     this.scoreNode.addChild(resultLabel);  
30.     resultLabel.setPosition(cc.p(360, 750));  
31.     resultLabel.setAnchorPoint(cc.p(0.5, 0.5));  
32.     resultLabel.setColor(cc.c3b(139, 58, 58));  
33.     this.scoreNode.result = resultLabel;  
34.   
35.     //back  
36.     var backLabel = cc.LabelTTF.create("返回", "Arial", 50);  
37.     this.scoreNode.addChild(backLabel);  
38.     backLabel.setPosition(cc.p(200, 400));  
39.     backLabel.setAnchorPoint(cc.p(0.5, 0.5));  
40.     backLabel.setColor(cc.c3b(0, 0, 0));  
41.     this.scoreNode.back = backLabel;  
42.   
43.     //return  
44.     var returnLabel = cc.LabelTTF.create("重来", "Arial", 50);  
45.     this.scoreNode.addChild(returnLabel);  
46.     returnLabel.setPosition(cc.p(500, 400));  
47.     returnLabel.setAnchorPoint(cc.p(0.5, 0.5));  
48.     returnLabel.setColor(cc.c3b(0, 0, 0));  
49.     this.scoreNode.return = returnLabel;  
50. };  

这是经典模式的核心代码，这一篇就到这里；

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游戏源码即将放出；

联系笔者：zuowen@makeapp.co（邮箱） qq群：232361142