PopStar(消灭星星)游戏源代码下载、分析及跨平台移植

背景：

   来自星星的你电视剧很火，消灭星星游戏也很火，好像星星都很火，笔者就以星星为主题开始这篇博文。消除类的游戏挺受欢迎的，从2013年度app store最赚钱的游戏--粉碎糖果传奇，到总是可以在游戏排行版看见身影的--消灭星星；玩消除类的游戏好像挺难的，开发这样的游戏是不是巨难？笔者想告诉你的是，开发比玩容易多了。这个PopStar系列总共有五篇，包括（界面，算法，分数，关卡，移植）这五个主题；

ps：

1 这是一个系列博文，代码不会一下子全部放出来，每写一篇放出相应的代码。因为笔者也是抽空编一点程序，然后写一篇博文，断断续续的，没有整块时间；

2 代码是基于javascript语言，cocos2d-x游戏引擎，cocos2d-x editor手游开发工具完成的；

3 运行demo需要配置好cocos2d-x editor，暂不支持其他工具。demo是跨平台的，可移植运行android，ios，html5网页等。

源代码下载：

请到代码集中营下载：http://blog.makeapp.co/?p=319

不同平台下的效果图：（window、html5、android）

代码分析：

消灭星星包括两个场景：StartLayer和MainLayer；我们先实现开始界面；首先在StartLayer.ccbx设计场景，这个很简单无需解释，功能上主要包括：

 1 点击New Game按钮进入主游戏场景 

[javascript] view plaincopy

1. StartLayer.prototype.onStartClicked = function () {  
2.     this.newGame.runAction(cc.ScaleTo.create(0.1, 1.2));  
3.     cc.BuilderReader.runScene("", "MainLayer");  
4. }  

[javascript] view plaincopy

1. StartLayer.prototype.onEnter = function () {  
2.     this.star.setZOrder(11);  
3.     this.pop.setZOrder(11);  
4.     if (sys.platform != 'browser') {  
5.         if (this.isFirst) {  
6.             this.createBgParticle(200, 800, "leaf_open");  
7.             this.createBgParticle(600, 1000, "quanquan");  
8.             // this.createBgParticle(470, 900, "spark");  
9.             this.isFirst = false;  
10.         }  
11.     }  
12. }  
13.   
14. StartLayer.prototype.createBgParticle = function (x, y, name) {  
15.     var particle = cc.ParticleSystem.create("Resources/particles/" + name + ".plist");  
16.     particle.setAnchorPoint(cc.p(0.5, 0.5));  
17.     particle.setPosition(cc.p(x, y));  
18.     particle.setZOrder(10);  
19.     this.rootNode.addChild(particle);  
20.     return particle;  
21. }  

 1 创建随机星星，并单个星星加入掉落动画

[javascript] view plaincopy

1. MainLayer.prototype.getRandomStar = function (colIndex, rowIndex) {  
2.     this.starSize = 72;  
3.     var stars = PS_MAIN_TEXTURE.STARS;  
4.     var randomStar = stars[getRandom(stars.length)];  
5.     var starSprite = cc.Sprite.createWithSpriteFrameName(randomStar);  
6.     starSprite.setAnchorPoint(cc.p(0.5, 0.5));  
7.     starSprite.setPosition(cc.p(36 + colIndex * this.starSize,  
8.         1300));  
9.     starSprite.starData = {name: randomStar, indexOfColumn: colIndex, indexOfRow: rowIndex};  
10.     starSprite.setZOrder(100);  
11.   
12.     var flowTime = rowIndex / 10;  
13.     var fallAction = cc.MoveTo.create(flowTime, cc.p(36 + colIndex * this.starSize,  
14.         36 + rowIndex * this.starSize));  
15.     starSprite.runAction(fallAction);  
16.     return starSprite;  
17. }  

[javascript] view plaincopy

1. MainLayer.prototype.initStarTable = function () {  
2.     this.starTable = new Array(this.numX);  
3.     for (var i = 0; i < this.numX; i++) {  
4.         var sprites = new Array(this.numY);  
5.         for (var j = 0; j < this.numY; j++) {  
6.             var pSprite0 = this.getRandomStar(i, j);  
7.             if (pSprite0 != null) {  
8.                 this.rootNode.addChild(pSprite0);  
9.             }  
10.   
11.             sprites[j] = pSprite0;  
12.         }  
13.         this.starTable[i] = sprites;  
14.     }  
15. }  

[javascript] view plaincopy

1. for (var i = 0; i < this.starTable.length; i++) {  
2.        var sprites = this.starTable[i];  
3.        for (var j = 0; j < sprites.length; j++) {  
4.            var pSprite0 = sprites[j];  
5.            if (pSprite0) {  
6.                var ccRect = pSprite0.getBoundingBox();  
7.                if (isInRect(ccRect, this.ccTouchBeganPos)) {  
8.                    this.pSelectedSprite = pSprite0;  
9.                    var scaleAction = cc.Sequence.create(  
10.                        cc.ScaleTo.create(0.2, 1.2), cc.DelayTime.create(0.25), cc.ScaleTo.create(0.2, 1))  
11.                    this.pSelectedSprite.runAction(scaleAction);  
12.                    break;  
13.                }  
14.            }  
15.        }  
16.    }  

[javascript] view plaincopy

1. MainLayer.prototype.onPauseClicked = function () {  
2.     this.pauseNode.setVisible(true);  
3. }  
4.   
5. MainLayer.prototype.onResumeClicked = function () {  
6.     this.pauseNode.setVisible(false);  
7. }  
8.   
9.   
10. MainLayer.prototype.onSaveExitClicked = function () {  
11.     cc.BuilderReader.runScene("", "StartLayer");  
12. }  

开发工具(2013-02-14 已更新到1.0Beta)：

cocos2d-x editor，它是开发跨平台的手机游戏工具，运行window/mac系统上，javascript脚本语言，基于cocos2d-x跨平台游戏引擎, 集合代码编辑，场景设计，动画制作，字体设计，还有粒子，物理系统，地图等等的，而且调试方便，和实时模拟；

cocos2d-x editor 下载，介绍和教程：http://blog.csdn.net/touchsnow/article/details/19070665；

cocos2d-x  editor 官方博客：http://blog.makeapp.co/；

PopStar博文系列：

PopStar(消灭星星)游戏源代码下载、分析及跨平台移植---第一篇（界面） 

PopStar(消灭星星)游戏源代码下载、分析及跨平台移植---第二篇（算法）  ——将写——

PopStar(消灭星星)游戏源代码下载、分析及跨平台移植---第三篇（分数）  ——将写——

PopStar(消灭星星)游戏源代码下载、分析及跨平台移植---第四篇（关卡）  ——将写——

PopStar(消灭星星)游戏源代码下载、分析及跨平台移植---第五篇（移植）  ——将写——

传送门（优质博文）：

flappy bird游戏源代码揭秘和下载

flappy bird游戏源代码揭秘和下载后续---移植到android真机上

flappy bird游戏源代码揭秘和下载后续---移植到html5网页浏览器

flappy bird游戏源代码揭秘和下载后续---日进5万美元的秘诀AdMob广告 

笔者语：

想了解更多请进入官方博客，最新博客和代码在官方博客首发；请持续关注，还有更多cocos2dx editor游戏源码即将放出；

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