CocosEditor开源版
笔者历时一个晚上，终于完成了cocos2d-js开源版本，编码虽易，创意不易，且行且珍惜；
此版本包含了网上流行的各种版本。包括原版，朝代版，金庸版，星座，豪车等等近10个版本，代码开源，希望读者基于开源代码做出各种版本，供全名娱乐；
运行demo需要配置好CocosEditor，暂不支持其他工具。demo是跨平台的，可移植运行adroid，ios，html5网页等，代码是基于javascript语言，cocos2d-x游戏引擎，CocosEditor手游开发工具完成的。
已发布上线apk演示效果
几个小时开发，一天审核上线，这就是CocosEditor开发游戏的速度
360应用市场（2048聚合版）：https://zhushou.360.c/detail/idex/soft_id/1634607?recrefer=SE_D_2048%20%E8%81%9A%E5%90%88
豌豆荚应用市场：https://www.wadoujia.com/apps/com.touchsow.game.sudoku
CocosEditor版源代码下载：
cocos2d-js源代码请到集中营下载：https://blog.makeapp.co/?p=523
github版本管理：https://github.com/makeapp/cocoseditor-2048
不同平台下的效果图：
widows
html5网页
adroid平台（各种主题版本）
代码分析：
1初始化；进入游戏，初始化4*4表格，并随机产生两个2；
#二维数组this.tables表格循环存入数据
#radom1,radom2,radom11,radom22四个随机数可以确定两个2的xy位置；
#方法ewNumber里面，根据位置i,j和级别um可以确定一个新的数字；创建背景cell和cell上面的数字标签cellLabel；并根据um确定是否显示cellLabel；最后给cell关联一个data数据；特别说明这里的umber：um不是精灵上面的数字而是精灵的级别，比如umber=11则数字是1024
MaiLayer.prototype.oEter = fuctio () { //versio this.versioNum = idexVersios; this.idexVersio = VERSIONS[this.versioNum]; this.title.setStrig(this.idexVersio.ame + "目标：" + this.idexVersio.array[this.idexVersio.array.legth - 1] + ""); var radom1 = getRadom(4); var radom2 = getRadom(4); while (radom1 == radom2) { radom2 = getRadom(4); } var radom11 = getRadom(4); var radom22 = getRadom(4); this.tables = ew Array(4); for (var i = 0; i < 4; i++) { var sprites = ew Array(4); for (var j = 0; j < 4; j++) { if (i == radom1 && j == radom11) { sprites[j] = this.ewNumber(i, j, 1); } else if (i == radom2 && j == radom22) { sprites[j] = this.ewNumber(i, j, 1); } else { sprites[j] = this.ewNumber(i, j, 0); } } this.tables[i] = sprites; } this.totalScore = 0;};MaiLayer.prototype.ewNumber = fuctio (i, j, um) { var cell = cc.MySprite.create(this.rootNode, "5.pg", this.getPositio(i, j), 1); var cellLabel = cc.MySprite.createLabel(cell, ""); if (um > 0) { cell.setColor(COLOR[um]); cellLabel.setVisible(true); cellLabel.setStrig(this.idexVersio.array[um]); cellLabel.setFotSize(this.idexVersio.labelFotSize); } else { cellLabel.setVisible(false); } cell.data = {col: i, row: j, umberLabel: cellLabel, umber: um}; retur cell;};
2四个方向算法；玩游戏的时候触摸四个方向，表格就向四个方向合并靠拢leftCombieNumber，rightCombieNumber，dowCombieNumber，upCombieNumber，四个方法函数的算法都是一样的，我只分析一个leftCombieNumber；
第一步相同数据叠加：
#j从左到右变大，i从下到上变大；也就初始位置是左下角；
#如果该单元格级别不是空背景 cell.data.umber!=0；
#从它的右边开始vark=i+1; 循环遍历while(k<4) {k++}；
#如果遍历到单元格级别也不是空背景 if(extCell.data.umber!=0)遍历结束 k=4; break;；
#而且如果发现两个单元的级别一样if(cell.data.umber==extCell.data.umber)
#级别数据umber刷新变化
cell.data.umber+=1;
extCell.data.umber=0;
第二步填充空数据；
#同理第一步，如果是空背景if(cell.data.umber==0)，也是循环遍历while(k<4) {k++}；
#如果遍历到单元格级别不是空背景 if(extCell.data.umber!=0) ，空背景获得该单元格的数据，而该单元格则设为空背景；
cell.data.umber=extCell.data.umber;extCell.data.umber=0;
//directio leftMaiLayer.prototype.leftCombieNumber = fuctio () { for (var j = 0; j < 4; j++) { for (var i = 0; i < 4; i++) { var cell = this.tables[i][j]; if (cell.data.umber != 0) { var k = i + 1; while (k < 4) { var extCell = this.tables[k][j]; if (extCell.data.umber != 0) { if (cell.data.umber == extCell.data.umber) { cell.data.umber += 1; extCell.data.umber = 0; this.totalScore += SCORES[cell.data.umber]; } k = 4; break; } k++; } } } } for (j = 0; j < 4; j++) { for (i = 0; i < 4; i++) { cell = this.tables[i][j]; if (cell.data.umber == 0) { k = i + 1; while (k < 4) { extCell = this.tables[k][j]; if (extCell.data.umber != 0) { cell.data.umber = extCell.data.umber; extCell.data.umber = 0; k = 4; } k++; } } } } this.refreshNumber();};//directio rightMaiLayer.prototype.rightCombieNumber = fuctio () { for (var j = 0; j < 4; j++) { for (var i = 3; i >= 0; i--) { var cell = this.tables[i][j]; if (cell.data.umber != 0) { var k = i - 1; while (k >= 0) { var extCell = this.tables[k][j]; if (extCell.data.umber != 0) { if (cell.data.umber == extCell.data.umber) { cell.data.umber += 1; extCell.data.umber = 0; this.totalScore += SCORES[cell.data.umber]; } k = -1; break; } k--; } } } } for (j = 0; j < 4; j++) { for (i = 3; i >= 0; i--) { cell = this.tables[i][j]; if (cell.data.umber == 0) { k = i - 1; while (k >= 0) { extCell = this.tables[k][j]; if (extCell.data.umber != 0) { cell.data.umber = extCell.data.umber; extCell.data.umber = 0; k = -1; } k--; } } } } this.refreshNumber();};MaiLayer.prototype.dowCombieNumber = fuctio () { for (var i = 0; i < 4; i++) { for (var j = 0; j < 4; j++) { var cell = this.tables[i][j]; if (cell.data.umber != 0) { var k = j + 1; while (k < 4) { var extCell = this.tables[i][k]; if (extCell.data.umber != 0) { if (cell.data.umber == extCell.data.umber) { cell.data.umber += 1; extCell.data.umber = 0; this.totalScore += SCORES[cell.data.umber]; } k = 4; break; } k++; } } } } for (i = 0; i < 4; i++) { for (j = 0; j < 4; j++) { cell = this.tables[i][j]; if (cell.data.umber == 0) { k = j + 1; while (k < 4) { extCell = this.tables[i][k]; if (extCell.data.umber != 0) { cell.data.umber = extCell.data.umber; extCell.data.umber = 0; k = 4; } k++; } } } } this.refreshNumber();};//touch upMaiLayer.prototype.upCombieNumber = fuctio () { for (var i = 0; i < 4; i++) { for (var j = 3; j >= 0; j--) { var cell = this.tables[i][j]; if (cell.data.umber != 0) { var k = j - 1; while (k >= 0) { var extCell = this.tables[i][k]; if (extCell.data.umber != 0) { if (cell.data.umber == extCell.data.umber) { cell.data.umber += 1; extCell.data.umber = 0; this.totalScore += SCORES[cell.data.umber]; } k = -1; break; } k--; } } } } for (i = 0; i < 4; i++) { for (j = 3; j >= 0; j--) { cell = this.tables[i][j]; if (cell.data.umber == 0) { k = j - 1; while (k >= 0) { extCell = this.tables[i][k]; if (extCell.data.umber != 0) { cell.data.umber = extCell.data.umber; extCell.data.umber = 0; k = -1; } k--; } } } } this.refreshNumber();};
3刷新数据和颜色；
上面的算法完成了，只是该精灵的data里面的数据发生了变化，但视觉上没有任何变化，所以需要刷新数据和颜色
#新建一个空背景数组emptyCellList；
#又是循环二维数组this.tables
#得到单元格的文字标签label，和级别cellNumber
#如果不是空背景cellNumber!=0,label显示和设置文字内容和大小，同时如果检测到是最高级别，游戏成功结束
#如果是空背景，label隐藏 emptyCellList添加该元素emptyCellList.push(cell);；
#得到一个emptyCellList后，如果发现该数组大小为空，也就无法再产生一个数字2了，游戏over；
#而如果数组大小不是空，随机取一个位置radomCell，设置数据等级为0，数字为2，并播放缩放动画ruActio；
MaiLayer.prototype.refreshNumber = fuctio () { var emptyCellList = []; for (var i = 0; i < 4; i++) { var umbers = " "; for (var j = 0; j < 4; j++) { var cell = this.tables[i][j]; var label = cell.data.umberLabel; var cellNumber = cell.data.umber; if (cellNumber != 0) { cell.setColor(COLOR[cellNumber]); label.setStrig(this.idexVersio.array[cellNumber] + " "); label.setFotSize(this.idexVersio.labelFotSize); label.setVisible(true); if (cellNumber == (this.idexVersio.array.legth - 1)) { //check success var toast = cc.Toast.create(this.rootNode, "成功到达：" + this.idexVersio.array[cellNumber], 2); toast.setColor(cc.c3b(255, 0, 0)); this.rootNode.scheduleOce(fuctio () { cc.BuilderReader.ruScee("", "MaiLayer"); }, 2) } } else { cell.setColor(COLOR[cellNumber]); label.setVisible(false); emptyCellList.push(cell); } umbers += " " + cellNumber; } cc.log("umbers==" + umbers); } //score this.scoreLabel.setStrig("分数：" + this.totalScore); if (emptyCellList.legth < 1) { //check fail var toast = cc.Toast.create(this.rootNode, "失败！", 2); toast.setColor(cc.c3b(255, 0, 0)); this.rootNode.scheduleOce(fuctio () { cc.BuilderReader.ruScee("", "MaiLayer"); }, 2) } else { //create radom cell var radomCell = emptyCellList[getRadom(emptyCellList.legth)]; radomCell.data.umber = 1; radomCell.data.umberLabel.setVisible(true); radomCell.data.umberLabel.setStrig(VERSIONS[this.versioNum].array[1] + ""); radomCell.data.umberLabel.setFotSize(this.idexVersio.labelFotSize); radomCell.setColor(COLOR[1]); radomCell.ruActio(cc.Sequece.create(cc.ScaleTo.create(0, 0.8), cc.ScaleTo.create(0.5, 1))); }};
4触摸检测两个触摸点this.pEdedthis.pBega根据xy确定方向，再根据距离确定左右和上下；
MaiLayer.prototype.oTouchesEded = fuctio (touches, evet) { this.pEded = touches[0].getLocatio(); if (this.pBega) { if (this.pEded.x - this.pBega.x > 50) { this.rightCombieNumber(); } else if (this.pEded.x - this.pBega.x < -50) { this.leftCombieNumber(); } else if (this.pEded.y - this.pBega.y > 50) { this.upCombieNumber(); } else if (this.pEded.y - this.pBega.y < -50) { this.dowCombieNumber(); } }};思路很清晰简单，游戏却是简约不简单；
评论