Source code download, analysis, and cross-platform migration for PopStar games-Article 1 (UI)

Background:

Your TV series from the stars are very popular, and the elimination of Star games is also very popular. It seems that the stars are very popular. I started this blog post with the topic of stars. Elimination games are quite popular. From the most profitable game in app store in 2013-crushing the legend of candy, you can always see it in the ultimate version of the game-eliminating stars; it seems difficult to play elimination games. Is it difficult to develop such games? What I want to tell you is that development is much easier than playing. This PopStar series consists of five topics (ui, algorithm, score, level, and port;

Ps:

1. This is a series of blog posts, and the code will not be released all at once. each article is written to release the corresponding code. Because I also took the time to compile a program and then write a blog post, which is intermittent and has no whole time;

2 code is based on javascript language, cocos2d-x game engine, cocos2d-x editor mobile game development tools completed;

3 run demo need to configure cocos2d-x editor, does not support other tools. The demo is cross-platform and can be transplanted to android, ios, html5 webpages, etc.

Source code download:

Please go to code concentration camp download: http://blog.makeapp.co /? P = 319

Windows, html5, and android platforms)

Code Analysis:

The elimination of stars involves two scenarios: StartLayer and MainLayer. We first implement the start interface. First, we design the scenario in StartLayer. ccbx. This is simple and does not need to be explained. The main functions include:

1. Click the New Game button to enter the main Game scenario.

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

2. Create a fireworks particle effect for the background. There are two particles: leaf_open and quanquan.

StartLayer.prototype.onEnter = function () {    this.star.setZOrder(11);    this.pop.setZOrder(11);    if (sys.platform != 'browser') {        if (this.isFirst) {            this.createBgParticle(200, 800, "leaf_open");            this.createBgParticle(600, 1000, "quanquan");            // this.createBgParticle(470, 900, "spark");            this.isFirst = false;        }    }}StartLayer.prototype.createBgParticle = function (x, y, name) {    var particle = cc.ParticleSystem.create("Resources/particles/" + name + ".plist");    particle.setAnchorPoint(cc.p(0.5, 0.5));    particle.setPosition(cc.p(x, y));    particle.setZOrder(10);    this.rootNode.addChild(particle);    return particle;}

Then we entered the main scenario of the game, and we will not explain how to design the main scenario. Create a group of stars in 10*10 tables at random, and the animation of the stars falling down from the top

 1. Create a random star and add a single star to the drop animation.

MainLayer.prototype.getRandomStar = function (colIndex, rowIndex) {    this.starSize = 72;    var stars = PS_MAIN_TEXTURE.STARS;    var randomStar = stars[getRandom(stars.length)];    var starSprite = cc.Sprite.createWithSpriteFrameName(randomStar);    starSprite.setAnchorPoint(cc.p(0.5, 0.5));    starSprite.setPosition(cc.p(36 + colIndex * this.starSize,        1300));    starSprite.starData = {name: randomStar, indexOfColumn: colIndex, indexOfRow: rowIndex};    starSprite.setZOrder(100);    var flowTime = rowIndex / 10;    var fallAction = cc.MoveTo.create(flowTime, cc.p(36 + colIndex * this.starSize,        36 + rowIndex * this.starSize));    starSprite.runAction(fallAction);    return starSprite;}

  2. initialize the 10*10 star group based on the table location

MainLayer.prototype.initStarTable = function () {    this.starTable = new Array(this.numX);    for (var i = 0; i < this.numX; i++) {        var sprites = new Array(this.numY);        for (var j = 0; j < this.numY; j++) {            var pSprite0 = this.getRandomStar(i, j);            if (pSprite0 != null) {                this.rootNode.addChild(pSprite0);            }            sprites[j] = pSprite0;        }        this.starTable[i] = sprites;    }}

In the main scenario, you can click a single star to zoom in and out the stars. This is to prepare for the next algorithm. The current Blog Code cannot be eliminated;

 for (var i = 0; i < this.starTable.length; i++) {        var sprites = this.starTable[i];        for (var j = 0; j < sprites.length; j++) {            var pSprite0 = sprites[j];            if (pSprite0) {                var ccRect = pSprite0.getBoundingBox();                if (isInRect(ccRect, this.ccTouchBeganPos)) {                    this.pSelectedSprite = pSprite0;                    var scaleAction = cc.Sequence.create(                        cc.ScaleTo.create(0.2, 1.2), cc.DelayTime.create(0.25), cc.ScaleTo.create(0.2, 1))                    this.pSelectedSprite.runAction(scaleAction);                    break;                }            }        }    }

Finally, add the pause suspension layer in the main scenario. Click the pause button in the upper right corner to display the suspension layer. Click the resume button to hide the suspension layer. Click the save & exit button to return to the start interface.

MainLayer.prototype.onPauseClicked = function () {    this.pauseNode.setVisible(true);}MainLayer.prototype.onResumeClicked = function () {    this.pauseNode.setVisible(false);}MainLayer.prototype.onSaveExitClicked = function () {    cc.BuilderReader.runScene("", "StartLayer");}

Now, the basic framework and interface for eliminating stars are complete;

Development Tool (updated to 1.0 Beta ):

Cocos2d-x editor, 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;

Cocos2d-x editor download, introduction and Tutorial: http://blog.csdn.net/touchsnow/article/details/41070665;

Cocos2d-x editor official blog: http://blog.makeapp.co /;

PopStar blog series:

Source code download, analysis, and cross-platform migration for PopStar games-Article 1 (UI)

Download, analyze, and port the game source code across platforms-Article 2 (algorithm)-Write --

Download, analyze, and port the game source code across platforms-Article 3 (score)-Write --

Download, analyze, and port the source code of the PopStar game across platforms-Article 4 (level)-Write --

Download, analyze, and port the game source code across platforms-Article 5 (transplantation)-write --

Portal (premium blog ):

Flappy bird game source code revealing and downloading

Flappy bird game source code exposure and download follow-up-porting to android real machine

Flappy bird game source code exposure and download follow-up-porting to html5 Web Browser

Flappy bird game source code revealing and downloading follow-up-the secret of about $50 thousand daily AdMob ads

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 information. The source code of the cocos2dx editor game will be released soon;

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