eoe 移动开发者论坛

 找回密码
 加入eoe

QQ登录

只需一步,快速开始

查看: 29155|回复: 304
收起左侧

AppStore榜首游戏《别踩白块儿》源代码分析和下载

    [复制链接]

该用户从未签到

9

主题

53

帖子

710

e币
发表于 2014-4-28 12:18:27 | 显示全部楼层 |阅读模式

没有eoe的账号,级别还太低,出门如何吹牛逼?

您需要 登录 才可以下载或查看,没有帐号?加入eoe

x
我的其他eoe帖子热帖链接:




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进不去 请到qq群文件下载)
github下载楼下回复才可见,亲们
https://github.com/makeapp/cocoseditor-piano

不同平台下的效果图:
windows平台


html5平台



android平台

  

代码分析:(只挑选核心主代码分析,更多细节自行研究源码)

1 创建曲谱数组  do、re、mi、fa,sol、la、duo

[mw_shl_code=java,true]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];[/mw_shl_code]


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

[mw_shl_code=java,true]<p style="margin-top: 4px; margin-bottom: 4px; padding-top: 2px; padding-bottom: 2px;" /><pre name="code" class="javascript" style="margin-top: 4px; margin-bottom: 4px;"> //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 = this.newBlock(i, j, random);
        }
        this.tables[j] = sprites;
    }</pre>[/mw_shl_code]
3 创建单个表格元素,可根据colortype在一行里确定一个黑色元素

[mw_shl_code=java,true]<pre name="code" class="javascript" style="margin-top: 4px; margin-bottom: 4px;">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;
};</pre>[/mw_shl_code]


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;

[mw_shl_code=java,true]<pre name="code" class="javascript" style="margin-top: 4px; margin-bottom: 4px;">//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)
                                ));
                            }
                        }
</pre>[/mw_shl_code]


5触摸表格,如果是白色,游戏结束;
#创建分数结束节点this.createTopOverNode();
#改变分数节点的颜色背景,结果失败;

  [mw_shl_code=java,true]<pre name="code" class="javascript" style="margin-top: 4px; margin-bottom: 4px;">                         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)));</pre><p style="margin-top: 4px; margin-bottom: 4px; padding-top: 2px; padding-bottom: 2px;" /><p style="margin-top: 4px; margin-bottom: 4px; padding-top: 2px; padding-bottom: 2px;" />[/mw_shl_code]

6 创建添加新的一行
[mw_shl_code=java,true]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;
};[/mw_shl_code]

7 分数结束节点创建函数

[mw_shl_code=java,true]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;
};[/mw_shl_code]
这是经典模式的核心代码,这一篇就到这里;

CocosEditor开发工具:
CocosEditor,它是开发跨平台的手机游戏工具,运行window/mac系统上,javascript脚本语言,基于cocos2d-x跨平台游戏引擎, 集合代码编辑,场景设计,动画制作,字体设计,还有粒子,物理系统,地图等等的,而且调试方便,和实时模拟;
CocosEditor 下载,介绍和教程:http://blog.csdn.net/touchsnow/article/details/19070665
CocosEditor官方博客:http://blog.makeapp.co/

点评

看下。。  发表于 2014-7-4 10:07
看下。。  发表于 2014-7-4 10:00
学习学习  发表于 2014-7-3 10:59

评分

参与人数 3e币 +115 收起 理由
690498789 + 10 精彩主题,感谢分享
LeoElva + 50 感谢精彩分享!已推送至2014-04-29日eoe微.
ttttotttto + 55 精彩主题,感谢分享

查看全部评分

本帖被以下淘专辑推荐:

  • · 讲解|主题: 7, 订阅: 0

签到天数: 6 天

连续签到: 1 天

[LV.2]偶尔看看I

3

主题

84

帖子

590

e币
发表于 2014-5-4 09:51:23 | 显示全部楼层
回复一下试试……回复一下试试……回复一下试试……回复一下试试……回复一下试试……回复一下试试……回复一下试试……回复一下试试……回复一下试试……回复一下试试……回复一下试试……回复一下试试……回复一下试试……回复一下试试……回复一下试试……回复一下试试……回复一下试试……回复一下试试……

签到天数: 2 天

连续签到: 2 天

[LV.1]初来乍到

10

主题

18

帖子

4

e币
发表于 2014-4-30 00:47:41 | 显示全部楼层
我的其他eoe帖子热帖链接: flappy bird游戏源代码; 消灭星星(popstar)源代码 Fruit Ninja(水果忍者)源代码 2048源代码分析和下载     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进不去 请到qq群文件下载) github下载(楼下回复才可见,亲们) macqq,如果您要查看本帖隐藏内容请回复   不同平台下的效果图: windows平台

签到天数: 16 天

连续签到: 1 天

[LV.4]偶尔看看III

0

主题

47

帖子

205

e币
发表于 2015-6-25 04:25:34 | 显示全部楼层
没有天生的信心,只有不断培养的信心。http://www.baixuetyn.com 这个地方真想去看看  <a  target="_blank">オンラインカジノ</a> 草青黄,寒风狂,纷纷叶落树旁;花带露,月如霜,江湖夜雨思念长;立冬到,你登场,今晚我要你来暖床;http://www.bfcyzc.com 外汇排行榜-<a  target="_blank">外汇排行榜</a>-教你炒汇赚大钱

签到天数: 4 天

连续签到: 1 天

[LV.2]偶尔看看I

0

主题

235

帖子

13

e币
QQ认证社区认证会员
发表于 2014-4-28 14:27:11 | 显示全部楼层
看看了不错的源码可以学学

该用户从未签到

14

主题

109

帖子

31

e币
发表于 2014-4-28 14:28:07 | 显示全部楼层

签到天数: 1 天

连续签到: 1 天

[LV.1]初来乍到

0

主题

793

帖子

69

e币
发表于 2014-4-28 14:29:05 | 显示全部楼层
AppStore榜首游戏《别踩白块儿》源代码分析和下载

该用户从未签到

0

主题

9

帖子

10

e币
发表于 2014-4-28 14:37:02 | 显示全部楼层
膜拜膜拜··························

签到天数: 22 天

连续签到: 1 天

[LV.4]偶尔看看III

1

主题

1112

帖子

1324

e币
发表于 2014-4-28 14:43:05 | 显示全部楼层
给力的难得的贴啊

该用户从未签到

1

主题

329

帖子

320

e币
发表于 2014-4-28 14:45:56 | 显示全部楼层
膜拜膜拜··························

签到天数: 5 天

连续签到: 1 天

[LV.2]偶尔看看I

0

主题

93

帖子

406

e币
发表于 2014-4-28 14:48:36 | 显示全部楼层
看看,辛苦楼主了!

该用户从未签到

3

主题

87

帖子

499

e币
发表于 2014-4-28 14:58:50 | 显示全部楼层
辛苦了,真心想学习源码呀

该用户从未签到

0

主题

14

帖子

141

e币
发表于 2014-4-28 15:05:08 | 显示全部楼层
很好的思路,“)

签到天数: 4 天

连续签到: 1 天

[LV.2]偶尔看看I

5

主题

217

帖子

771

e币
发表于 2014-4-28 15:13:19 | 显示全部楼层
看看,辛苦楼主了!

签到天数: 76 天

连续签到: 1 天

[LV.6]常住居民II

1

主题

423

帖子

2354

e币
发表于 2014-4-28 15:31:19 | 显示全部楼层
我只想找到Android的源码来分析一下,其它的就算了。

签到天数: 1 天

连续签到: 1 天

[LV.1]初来乍到

23

主题

1180

帖子

3052

e币
发表于 2014-4-28 15:40:11 | 显示全部楼层
程序从不曾

签到天数: 11 天

连续签到: 1 天

[LV.3]偶尔看看II

1

主题

847

帖子

2379

e币
发表于 2014-4-28 16:26:09 | 显示全部楼层
好玩吗?

该用户从未签到

14

主题

367

帖子

549

e币
发表于 2014-4-28 16:45:07 | 显示全部楼层
have a look ..............为什么要20个字。。。。。。。。。。

点评

榜首游戏《别踩白块儿》源代码分析和下载  详情 回复 发表于 2014-6-28 19:03
*滑动验证:
您需要登录后才可以回帖 登录 | 加入eoe

本版积分规则

推荐阅读
赞助商们

QQ|联系我们|小黑屋|手机版|eoe 移动开发者论坛 ( 京ICP备11018032 京公网安11010802020210  

GMT+8, 2017-11-19 05:32 , Processed in 0.600948 second(s), 51 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表
关闭

扫一扫 关注eoe官方微信