下載量已超越千萬的爆紅遊戲2048（同名小3傳奇、1024）源代碼解密和下載（第二篇）

簡介

上一篇我們主要分析了1024原版的基本思路和簡單算法，這一篇我們將繼續分析如何實現各種版本的聚合；

運行demo需要配置好CocosEditor，暫不支持其他工具。demo基於javascript語言，cocos2d-x遊戲引擎，CocosEditor手遊開發工具完成的，可移植運行android，ios，html5網頁等。

apk演示效果

360應用市場（2048 聚合版）：http://zhushou.360.cn/detail/index/soft_id/1634607?recrefer=SE_D_2048%20%E8%81%9A%E5%90%88

豌豆莢應用市場 ：http://www.wandoujia.com/apps/com.touchsnow.game.sudoku

CocosEditor版源代碼下載：

cocos2d-js源代碼請到集中營下載：http://blog.makeapp.co/?p=523

效果圖：

代碼分析

1  建立JS數組，有三個數組 背景顏色-等級分數-版本選擇 建好之後可以在程序裏面直接調用；

版本數組裏面每一個版本名字、類型、字體大小和等級數組

COLOR = [cc.c3b(255, 255, 255),
    cc.c3b(238, 246, 246), cc.c3b(172, 141, 173), cc.c3b(255, 237, 196),
    cc.c3b(242, 197, 170), cc.c3b(191, 164, 157), cc.c3b(125, 125, 106),
    cc.c3b(247, 240, 145), cc.c3b(221, 204, 163), cc.c3b(251, 96, 191), cc.c3b(254, 128, 128),
    cc.c3b(211, 84, 113), cc.c3b(63, 130, 211),

//other
    cc.c3b(100, 85, 39), cc.c3b(75, 34, 255), cc.c3b(58, 68, 104),
    cc.c3b(7, 0, 234), cc.c3b(153, 45, 85), cc.c3b(15, 254, 36), cc.c3b(78, 2, 34),
    cc.c3b(255, 125, 64), cc.c3b(237, 145, 33)
];
SCORES = [0, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048];

VERSIONS = [
    {
        num: 1,
        name: "2048原版",
        type: "number",
        labelFontSize: 50,
        array: [0, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048]
    },
    {
        num: 2,
        name: "歷史版",
        type: "string",
        labelFontSize: 50,
        array: [" ", "商", "周", "秦", "漢", "唐", "宋", "元", "明", "清", "民國", "天朝"]
    },
    {
        num: 3,
        name: "後宮版",
        type: "string",
        labelFontSize: 40,
        array: [" ", "宮女", "答應", "常在", "貴人", "嬪", "妃", "貴妃", "皇貴妃", "皇后", "皇太后", "太皇太后"]
    },
    {
        num: 4,
        name: "軍旅版",
        type: "string",
        labelFontSize: 40,
        array: [" ", "小兵", "班長", "排長", "連長", "營長", "團長", "旅長", "師長", "軍長", "司令", "軍委主席"]
    },
    {
        num: 5,
        name: "學歷版",
        type: "string",
        labelFontSize: 40,
        array: [" ", "幼兒", "小學", "中學", "高中", "專科", "本科", "研究", "碩士", "博士", "博士後", "院士"]
    },
    {
        num: 6,
        name: "金庸版",
        type: "string",
        labelFontSize: 40,
        array: [" ", "令狐沖", "楊過", "郭靖", "虛竹", "風清揚", "張三丰", "東方不敗", "逍遙老祖", "獨孤求敗", "掃地神僧", "達摩老祖"]
    },
    {
        num: 7,
        name: "生肖版",
        type: "string",
        labelFontSize: 40,
        array: [" ", "鼠", "牛", "虎", "兔", "龍", "蛇", "馬", "羊", "猴", "雞", "狗", "豬", "龍"]
    },
    {
        num: 8,
        name: "星座版",
        type: "string",
        labelFontSize: 40,
        array: [" ", "白羊座", "金牛座", "雙子座", "巨蟹座", "獅子座", "處女座", "天秤座", "天蠍座", "射手座", "魔羯座", "水瓶座", "雙魚座"]
    },
    {
        num: 9,
        name: "甲乙丙版",
        type: "string",
        labelFontSize: 40,
        array: [" ", "甲", "乙", "丙", "丁", "戊", "己", "庚", "辛", "壬", "癸"]
    },
    {
        num: 10,
        name: "豪車版",
        type: "string",
        labelFontSize: 40,
        array: [" ", "大衆", "奔馳", "悍馬", "法拉利", "奧迪", "寶馬", "蘭博基尼", "凱迪拉克", "世爵"]
    }
];

2 然後找到建好的版本選擇LevelLayer.js，初始化4*4版本選擇表格和點擊單個表格跳轉到不同的版本里面

#把plist加入緩存addSpriteFrames（）；

#雙層循環this.tables,每一個單元格放入一個新建的精靈cell=cc.MySprite.create(this.rootNode, "6.png", cc.p(px, py), 1)

#根據i，j確定cell的編號num=4*i+j；

#有了編號num可以從VERSIONS數組裏面獲取版本名字VERSIONS[num].name

#建立文字標籤cellLabel = cc.MySprite.createLabel(cell, VERSIONS[num].name);

#表格初始化之後需要添加觸摸事件；又一次雙層循環this.tables

#檢測精靈觸摸cc.rectContainsPoint(sprite.getBoundingBox(), loc）

#找到編號num，傳值到全局變量indexVersions=num；主場景就根據這個標示來確定版本；

#跳轉到主場景cc.BuilderReader.runScene("", "MainLayer");

LevelLayer.prototype.onEnter = function () {
    cc.SpriteFrameCache.getInstance().addSpriteFrames("res/main.plist");
this.initX = 9;
this.initY = 850;
this.cellSize = 162;
this.cellSpace = 18;

this.tables = new Array(4);
for (var j = 0; j < 4; j++) {
var sprites = new Array(4);
for (var i = 0; i < 4; i++) {
var px = this.initX + this.cellSize / 2 + i * (this.cellSize + this.cellSpace);
var py = this.initY + this.cellSize / 2 - j * (this.cellSize + this.cellSpace);
var cell = cc.MySprite.create(this.rootNode, "6.png", cc.p(px, py), 1);
var num = 4 * j + i;
if (num < VERSIONS.length) {
var cellLabel = cc.MySprite.createLabel(cell, VERSIONS[num].name);
                cellLabel.setFontSize(30);
            }
            sprites[i] = cell;
        }
this.tables[j] = sprites;
    }

};

LevelLayer.prototype.onTouchesBegan = function (touches, event) {
    cc.log("onTouchesBegan");
var loc = touches[0].getLocation();

for (var j = 0; j < 4; j++) {
for (var i = 0; i < 4; i++) {
var sprite = this.tables[j][i];
if (cc.rectContainsPoint(sprite.getBoundingBox(), loc)) {
var num = 4 * j + i;
                cc.log("num==" + num);
if (num < VERSIONS.length) {
                    indexVersions = num;
                    cc.BuilderReader.runScene("", "MainLayer");
                }
            }
        }
    }

};

3 進入主場景，根據第二步得到的indexVersions，從數組VERSIONS裏面獲取版本實體this.indexVersion = VERSIONS[this.versionNum];

MainLayer.prototype.onEnter = function () {
//version
this.versionNum = indexVersions;
this.indexVersion = VERSIONS[this.versionNum];
this.title.setString(this.indexVersion.name + "目標：" + this.indexVersion.array[this.indexVersion.array.length - 1] + "");}

4 刷新按鈕事件和返回按鈕；刷新按鈕比較簡單，關鍵是返回按鈕，它是一個文字標籤，cocos裏面沒有關聯點擊事件；這裏筆者通過觸摸和創建矩形的方法來解決了這個問題；

MainLayer.prototype.onRefreshClicked = function () {
    cc.BuilderReader.runScene("", "MainLayer");
};

MainLayer.prototype.onTouchesBegan = function (touches, event) {
this.pBegan = touches[0].getLocation();

//back
var backRect = cc.rectCreate(this.back.getPosition(), [50, 30]);
if (cc.rectContainsPoint(backRect, this.pBegan)) {
this.back.runAction(cc.Sequence.create(cc.ScaleTo.create(0.2, 1.1),
            cc.CallFunc.create(function () {
                cc.AudioEngine.getInstance().stopAllEffects();
                cc.BuilderReader.runScene("", "LevelLayer");
            })
        ));
    }
};

兩篇博文完結；