Download and decryption of source code (article 1) of 2048 game games with more than 10 million downloads)

A picture tells you how hot 2048 is.



Tragedy of small 3There will be one or two games in each phase of the phone, whether on a public car, on a bed, on a toilet or before going to bed or before dinner, you will always have the desire to open your cell phone. Most people are overwhelmed by Flappy bird and cannot take care of themselves. At this time of crisis, a digital puzzle game named the legend of little 3 appeared in our field of view. The game is simple, complex, simple, and ever-changing, it's hard to stop people! But the story is like this. Two developers of legend 3 spent nearly a year and a half before developing the core gameplay of this game, however, it was copied by "1024" only 21 days after the appstore was launched. In 2048, the 19-year-old Gabriel Cirulli used only one week to adapt the first two games, but he achieved the greatest success, while little 3 was not known; from its launch to the present, the downloads of such games, whether in the app store or android Market, have far exceeded 10 million. There are various online versions;


CocosEditor open source Edition
The author took a night, finally completed the cocos2d-js open source version, encoding is easy, creative is not easy, and the line and cherish;
This version contains various popular online versions. It includes nearly 10 versions including the original version, dynasty version, Jin Yong version, constellation, and luxury cars. The code is open-source, and readers are expected to make various versions based on open source code for full-name entertainment;
CocosEditor must be configured to run the demo. Other tools are not supported. Demo is cross-platform, can be transplanted to run android, ios, html5 web pages, code is based on javascript language, cocos2d-x game engine, CocosEditor mobile game development tools to complete.

This article consists of two parts: the first one is the original version, and the second one is the analysis of various versions. This code is for reference only. If you have better implementation methods, you can comment on it;



Released apk demo
Several hours of development, one-day review and launch, which is the speed at which CocosEditor develops games

Download CocosEditor source code:

Cocos2d-js source code please go to concentration camp download: http://blog.makeapp.co /? P = 523

Github version management-https://github.com/makeapp/cocoseditor-2048

In Github, Daniel provides versions in various languages.
Including (java, css, shell, python, objective-c and so on), readers can download the https://github.com/search on their own? Q = 2048 & ref = terraform

For different platforms:

Windows

Html5 webpage

Android platform (various theme versions)

Code Analysis:

1 initialization; enter the game, initialize 4*4 tables, and randomly generate two 2;

# Two-dimensional array this. tables Table stores data cyclically

# Four random numbers random1, random2, random11, and random22 can determine the xy positions of two 2;

# In the newNumber method, a new number can be determined based on location I, j, and level num; the digital label cellLabel on the Background cell and cell is created; and the cellLabel is determined based on num; finally, associate the cell with a data. In particular, the number: num here is not the number above the genie but the level of the genie. For example, if number = 11, the number is 1024.

MainLayer. prototype. onEnter = function () {// version this. versionNum = indexVersions; this. indexVersion = VERSIONS [this. versionNum]; this. title. setString (this. indexVersion. name + "target:" + this. indexVersion. array [this. indexVersion. array. length-1] + ""); var random1 = getRandom (4); var random2 = getRandom (4); while (random1 = random2) {random2 = getRandom (4);} var random11 = getRandom (4); var random22 = getRandom (4); this. tables = new Array (4); for (var I = 0; I <4; I ++) {var sprites = new Array (4); for (var j = 0; j <4; j ++) {if (I = random1 & j = random11) {sprites [j] = this. newNumber (I, j, 1);} else if (I = random2 & j = random22) {sprites [j] = this. newNumber (I, j, 1);} else {sprites [j] = this. newNumber (I, j, 0) ;}} this. tables [I] = sprites;} this. totalScore = 0 ;}; MainLayer. prototype. newNumber = function (I, j, num) {var cell = cc. mySprite. create (this. rootNode, "5.png", this. getPosition (I, j), 1); var cellLabel = cc. mySprite. createLabel (cell, ""); if (num> 0) {cell. setColor (COLOR [num]); cellLabel. setVisible (true); cellLabel. setString (this. indexVersion. array [num]); cellLabel. setFontSize (this. indexVersion. labelFontSize);} else {cellLabel. setVisible (false);} cell. data = {col: I, row: j, numberLabel: cellLabel, number: num}; return cell ;};

Two Algorithms in four directions. When you play a game, you can touch the four directions, and the table will merge the algorithms in four directions: leftCombineNumber, rightCombineNumber, downCombineNumber, and upCombineNumber. The algorithms of the four methods and functions are the same, I only analyze one leftCombineNumber;

Step 1: overlap the same data:

# J increases from left to right, And I increases from bottom to top; that is, the initial position is the lower left corner;

# If the cell level is not empty, cell. data. number! = 0;

# Var k = I + 1 from the right; loop traversal while (k <4) {k ++ };

# If the traversal to the cell level is not an empty background if (nextCell. data. number! = 0) End of traversal k = 4; break ;;

# And if the two units have the same level, if (cell. data. number = nextCell. data. number)

# Level data number refresh changes

Cell. data. number + = 1;

NextCell. data. number = 0;

Step 2 fill in empty data;

# Similarly, the first step is to traverse while (k <4) {k ++} cyclically if the background is empty if (cell. data. number = 0 };

# If the traversal to the cell level is not an empty background if (nextCell. data. number! = 0), empty background to get the data of the cell, and the cell is set to empty background;

Cell. data. number = nextCell. data. number;
NextCell. data. number = 0;

//direction leftMainLayer.prototype.leftCombineNumber = function () {    for (var j = 0; j < 4; j++) {        for (var i = 0; i < 4; i++) {            var cell = this.tables[i][j];            if (cell.data.number != 0) {                var k = i + 1;                while (k < 4) {                    var nextCell = this.tables[k][j];                    if (nextCell.data.number != 0) {                        if (cell.data.number == nextCell.data.number) {                            cell.data.number += 1;                            nextCell.data.number = 0;                            this.totalScore += SCORES[cell.data.number];                        }                        k = 4;                        break;                    }                    k++;                }            }        }    }    for (j = 0; j < 4; j++) {        for (i = 0; i < 4; i++) {            cell = this.tables[i][j];            if (cell.data.number == 0) {                k = i + 1;                while (k < 4) {                    nextCell = this.tables[k][j];                    if (nextCell.data.number != 0) {                        cell.data.number = nextCell.data.number;                        nextCell.data.number = 0;                        k = 4;                    }                    k++;                }            }        }    }    this.refreshNumber();};//direction rightMainLayer.prototype.rightCombineNumber = function () {    for (var j = 0; j < 4; j++) {        for (var i = 3; i >= 0; i--) {            var cell = this.tables[i][j];            if (cell.data.number != 0) {                var k = i - 1;                while (k >= 0) {                    var nextCell = this.tables[k][j];                    if (nextCell.data.number != 0) {                        if (cell.data.number == nextCell.data.number) {                            cell.data.number += 1;                            nextCell.data.number = 0;                            this.totalScore += SCORES[cell.data.number];                        }                        k = -1;                        break;                    }                    k--;                }            }        }    }    for (j = 0; j < 4; j++) {        for (i = 3; i >= 0; i--) {            cell = this.tables[i][j];            if (cell.data.number == 0) {                k = i - 1;                while (k >= 0) {                    nextCell = this.tables[k][j];                    if (nextCell.data.number != 0) {                        cell.data.number = nextCell.data.number;                        nextCell.data.number = 0;                        k = -1;                    }                    k--;                }            }        }    }    this.refreshNumber();};MainLayer.prototype.downCombineNumber = function () {    for (var i = 0; i < 4; i++) {        for (var j = 0; j < 4; j++) {            var cell = this.tables[i][j];            if (cell.data.number != 0) {                var k = j + 1;                while (k < 4) {                    var nextCell = this.tables[i][k];                    if (nextCell.data.number != 0) {                        if (cell.data.number == nextCell.data.number) {                            cell.data.number += 1;                            nextCell.data.number = 0;                            this.totalScore += SCORES[cell.data.number];                        }                        k = 4;                        break;                    }                    k++;                }            }        }    }    for (i = 0; i < 4; i++) {        for (j = 0; j < 4; j++) {            cell = this.tables[i][j];            if (cell.data.number == 0) {                k = j + 1;                while (k < 4) {                    nextCell = this.tables[i][k];                    if (nextCell.data.number != 0) {                        cell.data.number = nextCell.data.number;                        nextCell.data.number = 0;                        k = 4;                    }                    k++;                }            }        }    }    this.refreshNumber();};//touch upMainLayer.prototype.upCombineNumber = function () {    for (var i = 0; i < 4; i++) {        for (var j = 3; j >= 0; j--) {            var cell = this.tables[i][j];            if (cell.data.number != 0) {                var k = j - 1;                while (k >= 0) {                    var nextCell = this.tables[i][k];                    if (nextCell.data.number != 0) {                        if (cell.data.number == nextCell.data.number) {                            cell.data.number += 1;                            nextCell.data.number = 0;                            this.totalScore += SCORES[cell.data.number];                        }                        k = -1;                        break;                    }                    k--;                }            }        }    }    for (i = 0; i < 4; i++) {        for (j = 3; j >= 0; j--) {            cell = this.tables[i][j];            if (cell.data.number == 0) {                k = j - 1;                while (k >= 0) {                    nextCell = this.tables[i][k];                    if (nextCell.data.number != 0) {                        cell.data.number = nextCell.data.number;                        nextCell.data.number = 0;                        k = -1;                    }                    k--;                }            }        }    }    this.refreshNumber();};

3. Refresh the data and color;

The above algorithm is complete, but the data in the data of the genie has changed, but there is no visual change, so you need to refresh the data and color

# Create an empty background array emptyCellList;

# This. tables

# Obtain the text label and level cellNumber of the cell.

# If it is not an empty background cellNumber! = 0. The label displays and sets the text content and size. If it is detected to be the highest level, the game ends successfully.

# If the background is empty, label hides emptyCellList and adds this element emptyCellList. push (cell );;

# After obtaining an emptyCellList, if the size of the array is found to be empty, a number 2 cannot be generated, and the game is over;

# If the array size is not empty, set randomCell to a random location, set the data level to 0, number to 2, and play the scaling animation runAction;

MainLayer. prototype. refreshNumber = function () {var emptyCellList = []; for (var I = 0; I <4; I ++) {var numbers = ""; for (var j = 0; j <4; j ++) {var cell = this. tables [I] [j]; var label = cell. data. numberLabel; var cellNumber = cell. data. number; if (cellNumber! = 0) {cell. setColor (COLOR [cellNumber]); label. setString (this. indexVersion. array [cellNumber] + ""); label. setFontSize (this. indexVersion. labelFontSize); label. setVisible (true); if (cellNumber = (this. indexVersion. array. length-1) {// check success var toast = cc. toast. create (this. rootNode, "successfully arrived:" + this. indexVersion. array [cellNumber], 2); toast. setColor (cc. c3b (255, 0, 0); this. rootNode. schedul EOnce (function () {cc. builderReader. runScene ("", "MainLayer") ;}, 2) }} else {cell. setColor (COLOR [cellNumber]); label. setVisible (false); emptyCellList. push (cell);} numbers + = "" + cellNumber;} cc. log ("numbers =" + numbers);} // score this. scoreLabel. setString ("score:" + this. totalScore); if (emptyCellList. length <1) {// check fail var toast = cc. toast. create (this. rootNode, "failed! ", 2); toast. setColor (cc. c3b (255, 0, 0); this. rootNode. scheduleOnce (function () {cc. builderReader. runScene ("", "MainLayer") ;}, 2)} else {// create random cell var randomCell = emptyCellList [getRandom (emptyCellList. length)]; randomCell. data. number = 1; randomCell. data. numberLabel. setVisible (true); randomCell. data. numberLabel. setString (VERSIONS [this. versionNum]. array [1] + ""); randomCell. data. numberLabel. setFontSize (this. indexVersion. labelFontSize); randomCell. setColor (COLOR [1]); randomCell. runAction (cc. sequence. create (cc. scaleTo. create (0, 0.8), cc. scaleTo. create (0.5, 1 )));}};

4. Touch to detect two touch points this. pEnded this. pBegan determine the direction based on x y, and then determine the left and right and top and bottom based on the distance;

MainLayer.prototype.onTouchesEnded = function (touches, event) {    this.pEnded = touches[0].getLocation();    if (this.pBegan) {        if (this.pEnded.x - this.pBegan.x > 50) {            this.rightCombineNumber();        }        else if (this.pEnded.x - this.pBegan.x < -50) {            this.leftCombineNumber();        }        else if (this.pEnded.y - this.pBegan.y > 50) {            this.upCombineNumber();        }        else if (this.pEnded.y - this.pBegan.y < -50) {            this.downCombineNumber();        }    }};

The idea is clear and simple, but the game is simple and not simple;

Cocos2d-x cross-platform game engine
Cocos2d-x is a world-renowned game engine, engine in the world has a large number of developers, covering all well-known game developers at home and abroad. At present, Cocos2d-x engine has been achieved across ios, Android, Bada, MeeGo, BlackBerry, Marmalade, Windows, Linux and other platforms. Write once, run everywhere, divided into two versions of cocos2d-c ++ and cocos2d-html5 this article uses the latter; cocos2d-x Official Website: http://cocos2d-x.org/cocos2d-x data download http://cocos2d-x.org/download

CocosEditor development tool:

CocosEditor, 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;

Download CocosEditor, introduction and Tutorial: http://blog.csdn.net/touchsnow/article/details/41070665;

CocosEditor blog: http://blog.makeapp.co /;

2048 series of articles

2048 source code decryption and download (first analysis of the original version)

2048 source code decryption and download (Article 2 analyzes various versions)

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

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)

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

Download, analyze, and port the game source code across platforms-Article 4 (checkpoints)

Fruit Ninja game source code download and Analysis (I)

Fruit Ninja game source code download and Analysis (medium)

Fruit Ninja (Fruit Ninja) game source code download and Analysis (II)

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 CocosEditor game source code coming soon;

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

Appendix:

Sort out various versions of 2048 online games and get up;

1. Original Version 2048
Http://gabrielecirulli.github.io/2048/
2. 2048 advanced edition (features of multiplication and continuous playback)
Http://baiqiang.github.io/2048-advanced/
3. 2048 Chinese Version 1: A, B, and C
Http://tiansh.github.io/2048/zhong/
4. 2048 Chinese Version 2: Shang Zhou Qin and Han Dynasties
Http://oprilzeng.github.io/2048/
5. 2048 meow version: weak color and careful
Http://hczhcz.github.io/2048/20mu/
6. 2048 mourning version: 8*8
Http://cyberzhg.github.io/2048/
7. 2048flappy
Http://hczhcz.github.io/Flappy-2048/
8. 2048 hexagonal Edition
Http://baiqiang.github.io/2048-hexagon/
9. 2048cross
Http://baiqiang.github.io/2048-cross/
Version 10 and 2048double
Http://baiqiang.github.io/2048-double/
11. 2048 philosophy Edition
Http://learn.tsinghua.edu.cn: 8080/2013310744/philosopher2048/

12. 2048 one-step Installation
Http://jennypeng.me/2048/
13. 2048 Fibonacci Series
Http://mike199515.free3v.com/1597/2.htm
14. 2048 dual combat Edition
Http://emils.github.io/2048-multiplayer/
15. 2048 changed to Version 2
Https://www.prism.gatech.edu /~ Hli362/
2048 line edition
Http://tiansh.github.io/2048/
17. Added 3D version 2048:
Http://baiqiang.github.io/2048-3d/
18. A collection of 2048:
Http://get2048.com/