简介
上一篇我们主要分析了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数组,有三个数组 背景颜色-等级分数-版本选择 建好之后可以在程序里面直接调用;

版本数组里面每一个版本名字、类型、字体大小和等级数组


[javascript] view plain copy
  1. COLOR = [cc.c3b(255, 255, 255),  

  2.    cc.c3b(238, 246, 246), cc.c3b(172, 141, 173), cc.c3b(255, 237, 196),  

  3.    cc.c3b(242, 197, 170), cc.c3b(191, 164, 157), cc.c3b(125, 125, 106),  

  4.    cc.c3b(247, 240, 145), cc.c3b(221, 204, 163), cc.c3b(251, 96, 191), cc.c3b(254, 128, 128),  

  5.    cc.c3b(211, 84, 113), cc.c3b(63, 130, 211),  

  6. //other

  7.    cc.c3b(100, 85, 39), cc.c3b(75, 34, 255), cc.c3b(58, 68, 104),  

  8.    cc.c3b(7, 0, 234), cc.c3b(153, 45, 85), cc.c3b(15, 254, 36), cc.c3b(78, 2, 34),  

  9.    cc.c3b(255, 125, 64), cc.c3b(237, 145, 33)  

  10. ];  

  11. SCORES = [0, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048];  

  12. VERSIONS = [  

  13.    {  

  14.        num: 1,  

  15.        name: "2048原版",  

  16.        type: "number",  

  17.        labelFontSize: 50,  

  18.        array: [0, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048]  

  19.    },  

  20.    {  

  21.        num: 2,  

  22.        name: "历史版",  

  23.        type: "string",  

  24.        labelFontSize: 50,  

  25.        array: [" ", "商", "周", "秦", "汉", "唐", "宋", "元", "明", "清", "民国", "天朝"]  

  26.    },  

  27.    {  

  28.        num: 3,  

  29.        name: "后宫版",  

  30.        type: "string",  

  31.        labelFontSize: 40,  

  32.        array: [" ", "宫女", "答应", "常在", "贵人", "嫔", "妃", "贵妃", "皇贵妃", "皇后", "皇太后", "太皇太后"]  

  33.    },  

  34.    {  

  35.        num: 4,  

  36.        name: "军旅版",  

  37.        type: "string",  

  38.        labelFontSize: 40,  

  39.        array: [" ", "小兵", "班长", "排长", "连长", "营长", "团长", "旅长", "师长", "军长", "司令", "军委主席"]  

  40.    },  

  41.    {  

  42.        num: 5,  

  43.        name: "学历版",  

  44.        type: "string",  

  45.        labelFontSize: 40,  

  46.        array: [" ", "幼儿", "小学", "中学", "高中", "专科", "本科", "研究", "硕士", "博士", "博士后", "院士"]  

  47.    },  

  48.    {  

  49.        num: 6,  

  50.        name: "金庸版",  

  51.        type: "string",  

  52.        labelFontSize: 40,  

  53.        array: [" ", "令狐冲", "杨过", "郭靖", "虚竹", "风清扬", "张三丰", "东方不败", "逍遥老祖", "独孤求败", "扫地神僧", "达摩老祖"]  

  54.    },  

  55.    {  

  56.        num: 7,  

  57.        name: "×××版",  

  58.        type: "string",  

  59.        labelFontSize: 40,  

  60.        array: [" ", "鼠", "牛", "虎", "兔", "龙", "蛇", "马", "羊", "猴", "鸡", "狗", "猪", "龙"]  

  61.    },  

  62.    {  

  63.        num: 8,  

  64.        name: "星座版",  

  65.        type: "string",  

  66.        labelFontSize: 40,  

  67.        array: [" ", "白羊座", "金牛座", "双子座", "巨蟹座", "狮子座", "×××座", "天秤座", "天蝎座", "射手座", "魔羯座", "水瓶座", "双鱼座"]  

  68.    },  

  69.    {  

  70.        num: 9,  

  71.        name: "甲乙丙版",  

  72.        type: "string",  

  73.        labelFontSize: 40,  

  74.        array: [" ", "甲", "乙", "丙", "丁", "戊", "己", "庚", "辛", "壬", "癸"]  

  75.    },  

  76.    {  

  77.        num: 10,  

  78.        name: "豪车版",  

  79.        type: "string",  

  80.        labelFontSize: 40,  

  81.        array: [" ", "大众", "奔驰", "悍马", "法拉利", "奥迪", "宝马", "兰博基尼", "凯迪拉克", "世爵"]  

  82.    }  

  83. ];  





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");


[javascript] view plain copy
  1. LevelLayer.prototype.onEnter = function () {  

  2.    cc.SpriteFrameCache.getInstance().addSpriteFrames("res/main.plist");  

  3. this.initX = 9;  

  4. this.initY = 850;  

  5. this.cellSize = 162;  

  6. this.cellSpace = 18;  

  7. this.tables = new Array(4);  

  8. for (var j = 0; j < 4; j++) {  

  9. var sprites = new Array(4);  

  10. for (var i = 0; i < 4; i++) {  

  11. var px = this.initX + this.cellSize / 2 + i * (this.cellSize + this.cellSpace);  

  12. var py = this.initY + this.cellSize / 2 - j * (this.cellSize + this.cellSpace);  

  13. var cell = cc.MySprite.create(this.rootNode, "6.png", cc.p(px, py), 1);  

  14. var num = 4 * j + i;  

  15. if (num < VERSIONS.length) {  

  16. var cellLabel = cc.MySprite.createLabel(cell, VERSIONS[num].name);  

  17.                cellLabel.setFontSize(30);  

  18.            }  

  19.            sprites[i] = cell;  

  20.        }  

  21. this.tables[j] = sprites;  

  22.    }  

  23. };  

  24. LevelLayer.prototype.onTouchesBegan = function (touches, event) {  

  25.    cc.log("onTouchesBegan");  

  26. var loc = touches[0].getLocation();  

  27. for (var j = 0; j < 4; j++) {  

  28. for (var i = 0; i < 4; i++) {  

  29. var sprite = this.tables[j][i];  

  30. if (cc.rectContainsPoint(sprite.getBoundingBox(), loc)) {  

  31. var num = 4 * j + i;  

  32.                cc.log("num==" + num);  

  33. if (num < VERSIONS.length) {  

  34.                    indexVersions = num;  

  35.                    cc.BuilderReader.runScene("", "MainLayer");  

  36.                }  

  37.            }  

  38.        }  

  39.    }  

  40. };  




3 进入主场景,根据第二步得到的indexVersions,从数组VERSIONS里面获取版本实体this.indexVersion = VERSIONS[this.versionNum];

[javascript] view plain copy
  1. MainLayer.prototype.onEnter = function () {  

  2. //version

  3. this.versionNum = indexVersions;  

  4. this.indexVersion = VERSIONS[this.versionNum];  

  5. this.title.setString(this.indexVersion.name + "目标:" + this.indexVersion.array[this.indexVersion.array.length - 1] + "");}  




4 刷新按钮事件和返回按钮;刷新按钮比较简单,关键是返回按钮,它是一个文字标签,cocos里面没有关联点击事件;这里笔者通过触摸和创建矩形的方法来解决了这个问题;


[javascript] view plain copy
  1. MainLayer.prototype.onRefreshClicked = function () {  

  2.    cc.BuilderReader.runScene("", "MainLayer");  

  3. };  

  4. MainLayer.prototype.onTouchesBegan = function (touches, event) {  

  5. this.pBegan = touches[0].getLocation();  

  6. //back

  7. var backRect = cc.rectCreate(this.back.getPosition(), [50, 30]);  

  8. if (cc.rectContainsPoint(backRect, this.pBegan)) {  

  9. this.back.runAction(cc.Sequence.create(cc.ScaleTo.create(0.2, 1.1),  

  10.            cc.CallFunc.create(function () {  

  11.                cc.AudioEngine.getInstance().stopAllEffects();  

  12.                cc.BuilderReader.runScene("", "LevelLayer");  

  13.            })  

  14.        ));  

  15.    }  

  16. };  


两篇博文完结;