温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-07-03 20:37:23 来源:网络 阅读:715 作者:makeapp628 栏目:游戏开发

AppStore和Android市场情况

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



莫名其妙爆红的游戏

真的莫名其妙,笔者下这个游戏两次,第一次在豌豆荚排行榜看到这款游戏,名字怪怪的,下载下来尝试一下,没觉得有什么新颖的,还在思虑这是不是刷榜刷上去的,果断卸载了;周末的时候逛逛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平台

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


html5平台


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


android平台


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


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


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


[javascript]view plaincopy雄踞AppStore榜首的游戏<别踩到白块儿>源代码分析和下载(第一篇)----它怎么也能爆红?雄踞AppStore榜首的游戏<别踩到白块儿>源代码分析和下载(第一篇)----它怎么也能爆红?
  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 plaincopy雄踞AppStore榜首的游戏<别踩到白块儿>源代码分析和下载(第一篇)----它怎么也能爆红?雄踞AppStore榜首的游戏<别踩到白块儿>源代码分析和下载(第一篇)----它怎么也能爆红?
  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 plaincopy雄踞AppStore榜首的游戏<别踩到白块儿>源代码分析和下载(第一篇)----它怎么也能爆红?雄踞AppStore榜首的游戏<别踩到白块儿>源代码分析和下载(第一篇)----它怎么也能爆红?
  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 plaincopy雄踞AppStore榜首的游戏<别踩到白块儿>源代码分析和下载(第一篇)----它怎么也能爆红?雄踞AppStore榜首的游戏<别踩到白块儿>源代码分析和下载(第一篇)----它怎么也能爆红?
  1. //touch black

  2. if (block.blockData.color == "black") {  

  3. if (block.blockData.row == (this.moveNum + 1)) {  

  4. //create new sprite

  5. if (this.pianoLength < this.pianoLengthIndex) {  //not reach top

  6. this.moveAddNewSprites();  

  7.                                }  

  8. if (this.pianoLength == this.pianoLengthIndex) {  //when reach top

  9. this.createTopOverNode();  

  10.                                }  

  11. //move down

  12.                                cc.AudioEngine.getInstance().playEffect(PIANO_SIMPLE[this.pianoListIndex[j - 1]], false);  

  13.                                block.setColor(cc.c3b(100, 100, 100));  

  14. var heightNum = 1;  

  15. if (block.blockData.row == (this.pianoLengthIndex - 1)) { //when last row ,game success end, move two height

  16.                                    heightNum = 2;  

  17.                                    cc.log("end");  

  18. this.gameStatus = OVER;  

  19.                                    cc.AudioEngine.getInstance().playEffect(SOUNDS.win, false);  

  20.                                }  

  21. this.blockNode.runAction(cc.MoveTo.create(0.2, cc.p(0, (this.blockNode.getPositionY() - this.blockHeight * heightNum))));  

  22. this.moveNum += 1;  

  23.                                block.runAction(cc.Sequence.create(  

  24.                                    cc.ScaleTo.create(0, this.scaleX * 4 / 5, this.scaleY),  

  25.                                    cc.ScaleTo.create(0.2, this.scaleX, this.scaleY)  

  26.                                ));  

  27.                            }  

  28.                        }  




5触摸表格,如果是白色,游戏结束;

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

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


[javascript]view plaincopy雄踞AppStore榜首的游戏<别踩到白块儿>源代码分析和下载(第一篇)----它怎么也能爆红?雄踞AppStore榜首的游戏<别踩到白块儿>源代码分析和下载(第一篇)----它怎么也能爆红?
  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 plaincopy雄踞AppStore榜首的游戏<别踩到白块儿>源代码分析和下载(第一篇)----它怎么也能爆红?雄踞AppStore榜首的游戏<别踩到白块儿>源代码分析和下载(第一篇)----它怎么也能爆红?
  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 plaincopy雄踞AppStore榜首的游戏<别踩到白块儿>源代码分析和下载(第一篇)----它怎么也能爆红?雄踞AppStore榜首的游戏<别踩到白块儿>源代码分析和下载(第一篇)----它怎么也能爆红?
  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. //color bg

  9. var bgColor = cc.Sprite.create("res/whiteBlock.png");  

  10.    bgColor.setPosition(cc.p(0, 0));  

  11.    bgColor.setScaleX(720 / 300);  

  12.    bgColor.setScaleY(1280 / 500);  

  13.    bgColor.setAnchorPoint(cc.p(0, 0));  

  14.    bgColor.setColor(cc.c3b(0, 255, 0));  

  15. this.scoreNode.addChild(bgColor);  

  16. this.scoreNode.bgColor = bgColor;  

  17. //mode

  18. var wordsMode = ["经典", "街机", "禅"];  

  19. var modeLabel = cc.LabelTTF.create(wordsMode[GAME_MODE] + "模式", "Arial", 70);  

  20. this.scoreNode.addChild(modeLabel);  

  21.    modeLabel.setPosition(cc.p(350, 1000));  

  22.    modeLabel.setColor(cc.c3b(0, 0, 0));  

  23.    modeLabel.setAnchorPoint(cc.p(0.5, 0.5));  

  24. //result

  25. var resultLabel = cc.LabelTTF.create("成功了", "Arial", 110);  

  26. this.scoreNode.addChild(resultLabel);  

  27.    resultLabel.setPosition(cc.p(360, 750));  

  28.    resultLabel.setAnchorPoint(cc.p(0.5, 0.5));  

  29.    resultLabel.setColor(cc.c3b(139, 58, 58));  

  30. this.scoreNode.result = resultLabel;  

  31. //back

  32. var backLabel = cc.LabelTTF.create("返回", "Arial", 50);  

  33. this.scoreNode.addChild(backLabel);  

  34.    backLabel.setPosition(cc.p(200, 400));  

  35.    backLabel.setAnchorPoint(cc.p(0.5, 0.5));  

  36.    backLabel.setColor(cc.c3b(0, 0, 0));  

  37. this.scoreNode.back = backLabel;  

  38. //return

  39. var returnLabel = cc.LabelTTF.create("重来", "Arial", 50);  

  40. this.scoreNode.addChild(returnLabel);  

  41.    returnLabel.setPosition(cc.p(500, 400));  

  42.    returnLabel.setAnchorPoint(cc.p(0.5, 0.5));  

  43.    returnLabel.setColor(cc.c3b(0, 0, 0));  

  44. this.scoreNode.return = returnLabel;  

  45. };  


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






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


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI