您好,登錄后才能下訂單哦!
CocosEditor版源代碼下載:
cocos2d-js源代碼請(qǐng)到集中營(yíng)下載:http://blog.makeapp.co/?p=523
github版本管理:https://github.com/makeapp/cocoseditor-2048
不同平臺(tái)下的效果圖:
windows
html5網(wǎng)頁(yè)
android平臺(tái)(各種主題版本)
代碼分析:
1初始化;進(jìn)入游戲,初始化4*4表格,并隨機(jī)產(chǎn)生兩個(gè)2;
# 二維數(shù)組this.tables表格循環(huán)存入數(shù)據(jù)
#random1, random2 ,random11, random22四個(gè)隨機(jī)數(shù)可以確定兩個(gè)2的xy位置;
#方法newNumber里面,根據(jù)位置i,j和級(jí)別num可以確定一個(gè)新的數(shù)字;創(chuàng)建背景cell和cell上面的數(shù)字標(biāo)簽cellLabel;并根據(jù)num確定是否顯示cellLabel;最后給cell關(guān)聯(lián)一個(gè)data數(shù)據(jù);特別說(shuō)明這里的number:num不是精靈上面的數(shù)字而是精靈的級(jí)別,比如number=11 則數(shù)字是1024
MainLayer.prototype.onEnter = function () {
//version
this.versionNum = indexVersions;
this.indexVersion = VERSIONS[this.versionNum];
this.title.setString(this.indexVersion.name + "目標(biāo):" + 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);
} elseif (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;
};
2 四個(gè)方向算法;玩游戲的時(shí)候觸摸四個(gè)方向,表格就向四個(gè)方向合并靠攏leftCombineNumber,rightCombineNumber,downCombineNumber,upCombineNumber,四個(gè)方法函數(shù)的算法都是一樣的,我只分析一個(gè)leftCombineNumber;
第一步 相同數(shù)據(jù)疊加 :
#j從左到右變大,i從下到上變大;也就初始位置是左下角;
#如果該單元格級(jí)別不是空背景 cell.data.number != 0 ;
#從它的右邊開(kāi)始var k = i + 1; 循環(huán)遍歷while (k < 4) {k++};
#如果遍歷到單元格級(jí)別也不是空背景 if (nextCell.data.number != 0) 遍歷結(jié)束 k = 4; break;;
#而且如果發(fā)現(xiàn)兩個(gè)單元的級(jí)別一樣if (cell.data.number == nextCell.data.number)
#級(jí)別數(shù)據(jù)number刷新變化
cell.data.number += 1;
nextCell.data.number = 0;
第二步 填充空數(shù)據(jù);
#同理第一步,如果是空背景if (cell.data.number == 0),也是循環(huán)遍歷while (k < 4) {k++};
#如果遍歷到單元格級(jí)別不是空背景 if (nextCell.data.number != 0) ,空背景獲得該單元格的數(shù)據(jù),而該單元格則設(shè)為空背景;
cell.data.number = nextCell.data.number;
nextCell.data.number = 0;
//direction left
MainLayer.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 right
MainLayer.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 up
MainLayer.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 刷新數(shù)據(jù)和顏色;
上面的算法完成了,只是該精靈的data里面的數(shù)據(jù)發(fā)生了變化,但視覺(jué)上沒(méi)有任何變化,所以需要刷新數(shù)據(jù)和顏色
#新建一個(gè)空背景數(shù)組emptyCellList;
#又是循環(huán)二維數(shù)組this.tables
#得到單元格的文字標(biāo)簽label,和級(jí)別cellNumber
#如果不是空背景cellNumber!=0,label顯示和設(shè)置文字內(nèi)容和大小,同時(shí)如果檢測(cè)到是最高級(jí)別,游戲成功結(jié)束
#如果是空背景,label隱藏 emptyCellList添加該元素emptyCellList.push(cell);;
#得到一個(gè)emptyCellList后,如果發(fā)現(xiàn)該數(shù)組大小為空,也就無(wú)法再產(chǎn)生一個(gè)數(shù)字2了,游戲over;
#而如果數(shù)組大小不是空,隨機(jī)取一個(gè)位置randomCell,設(shè)置數(shù)據(jù)等級(jí)為0,數(shù)字為2,并播放縮放動(dòng)畫(huà)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, "成功到達(dá):" + this.indexVersion.array[cellNumber], 2);
toast.setColor(cc.c3b(255, 0, 0));
this.rootNode.scheduleOnce(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("分?jǐn)?shù):" + this.totalScore);
if (emptyCellList.length < 1) {
//check fail
var toast = cc.Toast.create(this.rootNode, "失??!", 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 觸摸檢測(cè) 兩個(gè)觸摸點(diǎn)this.pEnded this.pBegan 根據(jù)x y確定方向,再根據(jù)距離確定左右和上下;
MainLayer.prototype.onTouchesEnded = function (touches, event) {
this.pEnded = touches[0].getLocation();
if (this.pBegan) {
if (this.pEnded.x - this.pBegan.x > 50) {
this.rightCombineNumber();
}
elseif (this.pEnded.x - this.pBegan.x < -50) {
this.leftCombineNumber();
}
elseif (this.pEnded.y - this.pBegan.y > 50) {
this.upCombineNumber();
}
elseif (this.pEnded.y - this.pBegan.y < -50) {
this.downCombineNumber();
}
}
};
CocosEditor開(kāi)發(fā)工具:
CocosEditor,它是開(kāi)發(fā)跨平臺(tái)的手機(jī)游戲工具,運(yùn)行window/mac系統(tǒng)上,javascript腳本語(yǔ)言,基于cocos2d-x跨平臺(tái)游戲引擎, 集合代碼編輯,場(chǎng)景設(shè)計(jì),動(dòng)畫(huà)制作,字體設(shè)計(jì),還有粒子,物理系統(tǒng),地圖等等的,而且調(diào)試方便,和實(shí)時(shí)模擬;
CocosEditor 下載,介紹和教程:http://blog.csdn.net/touchsnow/article/details/19070665;
CocosEditor官方博客:http://blog.makeapp.co/;
2048系列文章
2048源代碼解密和下載(第一篇 分析原版)
2048源代碼解密和下載(第二篇 分析各種版本)
傳送門(優(yōu)質(zhì)博文):
flappy bird游戲源代碼揭秘和下載
flappy bird游戲源代碼揭秘和下載后續(xù)---移植到android真機(jī)上
flappy bird游戲源代碼揭秘和下載后續(xù)---移植到html5網(wǎng)頁(yè)瀏覽器
flappy bird游戲源代碼揭秘和下載后續(xù)---日進(jìn)5萬(wàn)美元的秘訣AdMob廣告
PopStar(消滅星星)游戲源代碼下載、分析及跨平臺(tái)移植---第一篇(界面)
PopStar(消滅星星)游戲源代碼下載、分析及跨平臺(tái)移植---第二篇(算法)
PopStar(消滅星星)游戲源代碼下載、分析及跨平臺(tái)移植---第三篇(分?jǐn)?shù))
PopStar(消滅星星)游戲源代碼下載、分析及跨平臺(tái)移植---第四篇(關(guān)卡)
Fruit Ninja(水果忍者)游戲源代碼下載、分析(上)
Fruit Ninja(水果忍者)游戲源代碼下載、分析(中)
Fruit Ninja(水果忍者)游戲源代碼下載、分析(下)
筆者語(yǔ):
想了解更多請(qǐng)進(jìn)入官方博客,最新博客和代碼在官方博客首發(fā);請(qǐng)持續(xù)關(guān)注,還有更多CocosEditor游戲源碼即將放出;
聯(lián)系筆者:zuowen@makeapp.co(郵箱) qq群:232361142
附錄:
整理各種版本的2048在線玩,狂歡起來(lái)吧;
1、2048原始版
http://gabrielecirulli.github.io/2048/
2、2048進(jìn)階版(有乘法和繼續(xù)玩下去的功能)
http://baiqiang.github.io/2048-advanced/
3、2048漢化版1:甲乙丙丁
http://tiansh.github.io/2048/zhong/
4、2048漢化版2:商周秦漢
http://oprilzeng.github.io/2048/
5、2048喵喵版:色弱慎入
http://hczhcz.github.io/2048/20mu/
6、2048喪病版:8*8
http://cyberzhg.github.io/2048/
7、2048flappy版
http://hczhcz.github.io/Flappy-2048/
8、2048六角形版
http://baiqiang.github.io/2048-hexagon/
9、2048cross版
http://baiqiang.github.io/2048-cross/
10、2048double版
http://baiqiang.github.io/2048-double/
11、2048哲學(xué)版
http://learn.tsinghua.edu.cn:8080/2013310744/philosopher2048/
12、2048一步登天版
http://jennypeng.me/2048/
13、2048斐波那契數(shù)列版
http://mike199515.free3v.com/1597/2.htm
14、2048雙人對(duì)戰(zhàn)版
http://emils.github.io/2048-multiplayer/
15、2048變2版
https://www.prism.gatech.edu/~hli362/
16、2048直線版
http://tiansh.github.io/2048/
17、新增3D版的2048:
http://baiqiang.github.io/2048-3d/
18、2048的一個(gè)合集:
http://get2048.com/
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。