您好,登錄后才能下訂單哦!
CocosEditor版源代碼下載:
cocos2d-js源代碼請到集中營下載:http://blog.makeapp.co/?p=523
github版本管理:https://github.com/makeapp/cocoseditor-2048
不同平臺下的效果圖:
windows
html5網頁
android平臺(各種主題版本)
代碼分析:
1初始化;進入游戲,初始化4*4表格,并隨機產生兩個2;
# 二維數組this.tables表格循環存入數據
#random1, random2 ,random11, random22四個隨機數可以確定兩個2的xy位置;
#方法newNumber里面,根據位置i,j和級別num可以確定一個新的數字;創建背景cell和cell上面的數字標簽cellLabel;并根據num確定是否顯示cellLabel;最后給cell關聯一個data數據;特別說明這里的number:num不是精靈上面的數字而是精靈的級別,比如number=11 則數字是1024
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] + "");
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 四個方向算法;玩游戲的時候觸摸四個方向,表格就向四個方向合并靠攏leftCombineNumber,rightCombineNumber,downCombineNumber,upCombineNumber,四個方法函數的算法都是一樣的,我只分析一個leftCombineNumber;
第一步 相同數據疊加 :
#j從左到右變大,i從下到上變大;也就初始位置是左下角;
#如果該單元格級別不是空背景 cell.data.number != 0 ;
#從它的右邊開始var k = i + 1; 循環遍歷while (k < 4) {k++};
#如果遍歷到單元格級別也不是空背景 if (nextCell.data.number != 0) 遍歷結束 k = 4; break;;
#而且如果發現兩個單元的級別一樣if (cell.data.number == nextCell.data.number)
#級別數據number刷新變化
cell.data.number += 1;
nextCell.data.number = 0;
第二步 填充空數據;
#同理第一步,如果是空背景if (cell.data.number == 0),也是循環遍歷while (k < 4) {k++};
#如果遍歷到單元格級別不是空背景 if (nextCell.data.number != 0) ,空背景獲得該單元格的數據,而該單元格則設為空背景;
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 刷新數據和顏色;
上面的算法完成了,只是該精靈的data里面的數據發生了變化,但視覺上沒有任何變化,所以需要刷新數據和顏色
#新建一個空背景數組emptyCellList;
#又是循環二維數組this.tables
#得到單元格的文字標簽label,和級別cellNumber
#如果不是空背景cellNumber!=0,label顯示和設置文字內容和大小,同時如果檢測到是最高級別,游戲成功結束
#如果是空背景,label隱藏 emptyCellList添加該元素emptyCellList.push(cell);;
#得到一個emptyCellList后,如果發現該數組大小為空,也就無法再產生一個數字2了,游戲over;
#而如果數組大小不是空,隨機取一個位置randomCell,設置數據等級為0,數字為2,并播放縮放動畫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, "成功到達:" + 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("分數:" + 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 觸摸檢測 兩個觸摸點this.pEnded this.pBegan 根據x y確定方向,再根據距離確定左右和上下;
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開發工具:
CocosEditor,它是開發跨平臺的手機游戲工具,運行window/mac系統上,javascript腳本語言,基于cocos2d-x跨平臺游戲引擎, 集合代碼編輯,場景設計,動畫制作,字體設計,還有粒子,物理系統,地圖等等的,而且調試方便,和實時模擬;
CocosEditor 下載,介紹和教程:http://blog.csdn.net/touchsnow/article/details/19070665;
CocosEditor官方博客:http://blog.makeapp.co/;
2048系列文章
2048源代碼解密和下載(第一篇 分析原版)
2048源代碼解密和下載(第二篇 分析各種版本)
傳送門(優質博文):
flappy bird游戲源代碼揭秘和下載
flappy bird游戲源代碼揭秘和下載后續---移植到android真機上
flappy bird游戲源代碼揭秘和下載后續---移植到html5網頁瀏覽器
flappy bird游戲源代碼揭秘和下載后續---日進5萬美元的秘訣AdMob廣告
PopStar(消滅星星)游戲源代碼下載、分析及跨平臺移植---第一篇(界面)
PopStar(消滅星星)游戲源代碼下載、分析及跨平臺移植---第二篇(算法)
PopStar(消滅星星)游戲源代碼下載、分析及跨平臺移植---第三篇(分數)
PopStar(消滅星星)游戲源代碼下載、分析及跨平臺移植---第四篇(關卡)
Fruit Ninja(水果忍者)游戲源代碼下載、分析(上)
Fruit Ninja(水果忍者)游戲源代碼下載、分析(中)
Fruit Ninja(水果忍者)游戲源代碼下載、分析(下)
筆者語:
想了解更多請進入官方博客,最新博客和代碼在官方博客首發;請持續關注,還有更多CocosEditor游戲源碼即將放出;
聯系筆者:zuowen@makeapp.co(郵箱) qq群:232361142
附錄:
整理各種版本的2048在線玩,狂歡起來吧;
1、2048原始版
http://gabrielecirulli.github.io/2048/
2、2048進階版(有乘法和繼續玩下去的功能)
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哲學版
http://learn.tsinghua.edu.cn:8080/2013310744/philosopher2048/
12、2048一步登天版
http://jennypeng.me/2048/
13、2048斐波那契數列版
http://mike199515.free3v.com/1597/2.htm
14、2048雙人對戰版
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的一個合集:
http://get2048.com/
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。