背景:
上一節,我們已經把消滅星星的界面搭建好了,流程也跑通了。 這一篇涉及到程序的算法,也許是最難的部分了,理解起來需要多花點時間,而且我提供的算法未必就是最好的,如果讀者有更優更好的算法,希望分享出來,我可以鏈接到你那裏。大概的思路是這樣的,第一次點擊一個星星,立刻尋找四周相同顏色的,第二次點擊,消除他們併產生粒子效果;接着星星數組重新走位掉落,補全空缺;然後還要檢測縱行是否出現空缺,有的話,合併到一起;最後必須檢測死局;大概如此。
ps:
1 這是一個系列博文,代碼不會一下子全部放出來,每寫一篇放出相應的代碼。因爲筆者也是抽空編一點程序,然後寫一篇博文,斷斷續續的,沒有整塊時間;
2 代碼是基於javascript語言,cocos2d-x遊戲引擎,cocos2d-x editor手遊開發工具完成的;
3 運行demo需要配置好cocos2d-x editor,暫不支持其他工具。demo是跨平臺的,可移植運行android,ios,html5網頁等。
源代碼下載:
請到代碼集中營下載(第二篇算法):http://blog.makeapp.co/?p=319
不同平臺下的效果圖:
window平臺
mac平臺
html5網頁平臺
android平臺
代碼分析:
主要集中在MainLayer.js下面的分析
第一步,10*10星星羣檢測觸摸事件,通過this.sameColorList.length可以判斷是第一次觸摸還是第二次觸摸 ;
@@ >1表示第二次觸摸,這裏又有分支,觸摸的是剛纔同一顏色區域還是其他區域?如果是原來顏色區域,刪除this.removeSameColorStars(),如果不是原來顏色區域,恢復原狀,然後新的檢測
@@ <=1表示第一次觸摸 直接檢測顏色相同區域
MainLayer.prototype.onTouchesBegan = function (touches, event) {
var loc = touches[0].getLocation();
this.ccTouchBeganPos = loc;
for (var i = 0; i < this.starTable.length; i++) {
var sprites = this.starTable[i];
for (var j = 0; j < sprites.length; j++) {
var pSprite0 = sprites[j];
if (pSprite0) {
var ccRect = pSprite0.getBoundingBox();
if (isInRect(ccRect, this.ccTouchBeganPos)) {
if (this.sameColorList.length > 1) {
if (this.sameColorList.contains(pSprite0)) {
cc.AudioEngine.getInstance().playEffect(PS_MAIN_SOUNDS.broken, false);
this.removeSameColorStars();
} else {
for (var k = 0; k < this.sameColorList.length; k++) {
if (this.sameColorList[k]) {
this.sameColorList[k].runAction(cc.ScaleTo.create(0.1, 1));
}
}
this.checkSameColorStars(pSprite0);
if (this.sameColorList.length > 1) {
cc.AudioEngine.getInstance().playEffect(PS_MAIN_SOUNDS.select, false);
}
}
} else {
this.checkSameColorStars(pSprite0);
if (this.sameColorList.length > 1) {
cc.AudioEngine.getInstance().playEffect(PS_MAIN_SOUNDS.select, false);
}
}
break;
}
}
}
}
};
第二步,建立單個星星的四個方向檢測,上下左右,把顏色相同的放在一個數組裏面,回調這個數組;其實最後用這個函數的時候主要是判斷數組的大小;數組大於1,說明四周有相同顏色的;
MainLayer.prototype.checkOneStarFourSide = function (sprite) {
if (sprite == null) {
return;
}
// cc.log("checkOneStarFourSide");
var fourSideSpriteList = [];
var color = sprite.starData.color;
var col = sprite.starData.indexOfColumn;
var row = sprite.starData.indexOfRow;
//up
if (row < 9) {
var upSprite = this.starTable[col][row + 1];
if (upSprite != null && upSprite.starData.color == color) {
fourSideSpriteList.push(upSprite);
}
}
//down
if (row > 0) {
var downSprite = this.starTable[col][row - 1];
if (downSprite != null && downSprite.starData.color == color) {
fourSideSpriteList.push(downSprite);
}
}
//left
if (col > 0) {
var leftSprite = this.starTable[col - 1][row];
if (leftSprite != null && leftSprite.starData.color == color) {
fourSideSpriteList.push(leftSprite);
}
}
//right
if (col < 9) {
var rightSprite = this.starTable[col + 1][row];
if (rightSprite != null && rightSprite.starData.color == color) {
fourSideSpriteList.push(rightSprite);
}
}
return fourSideSpriteList;
}
第三步,檢測相同顏色區域,這裏的算法比較複雜;有兩個數組this.sameColorList和newSameColorList,前者是全局星星數組,後者是每次擴展新加入的星星;比如這樣情況,一個星星左右上有相同的星星,上面的上面還有一個星星,總共五個相同星星:三次檢測情況是this.sameColorList爲1---4----5 ,而newSameColorList爲1--3--1,各種曲折,讀者好好理解下;
MainLayer.prototype.checkSameColorStars = function (sprite) {
if (sprite == null) {
return;
}
this.sameColorList = [];
this.sameColorList.push(sprite);
var newSameColorList = [];
newSameColorList.push(sprite);
//by logic ,check the same color star list
while (newSameColorList.length > 0) {
for (var i = 0; i < newSameColorList.length; i++) {
var fourSide = this.checkOneStarFourSide(newSameColorList[i]);
if (fourSide.length > 0) {
for (var j = 0; j < fourSide.length; j++) {
if (!this.sameColorList.contains(fourSide[j])) {
this.sameColorList.push(fourSide[j]);
newSameColorList.push(fourSide[j]);
}
}
}
newSameColorList.splice(i, 1);
}
}
cc.log("sameColorList length==" + this.sameColorList.length);
if (this.sameColorList.length > 1) {
for (var k = 0; k < this.sameColorList.length; k++) {
var simpleStar = this.sameColorList[k];
if (simpleStar) {
simpleStar.runAction(cc.ScaleTo.create(0.1, 1.08));
}
}
}
}
第四步 移除相同的星星,併產生粒子效果
MainLayer.prototype.removeSameColorStars = function () {
for (var k = 0; k < this.sameColorList.length; k++) {
var simpleStar = this.sameColorList[k];
if (simpleStar) {
var col = simpleStar.starData.indexOfColumn;
var row = simpleStar.starData.indexOfRow;
this.starTable[col].splice(row, 1, null);
this.rootNode.removeChild(simpleStar);
if (sys.platform != 'browser') {
var starParticle = cc.StarParticle.create(this.rootNode, (36 + col * this.starSize), (36 + row * this.starSize), "spark");
starParticle.runAction(cc.Sequence.create(cc.DelayTime.create(0.8), cc.CleanUp.create(starParticle)));
}
}
}
this.sameColorList = [];
this.fallStar();
}
第五步 星星掉落 填充空缺,主要是如果一個地方有空缺,就把它上面的星星位置和數據交換,用到數組的方法splice,可到網上查看js數組的一些方法應用
MainLayer.prototype.fallStar = function () {
for (var i = 0; i < this.starTable.length; i++) {
var sprites = this.starTable[i];
var length = sprites.length;
for (var j = 0; j < length; j++) {
var pSprite0 = sprites[j];
if (pSprite0 == null) {
var k = j + 1;
while (k < length) {
var upSprite = sprites[k];
if (upSprite != null) {
upSprite.starData.indexOfColumn = i;
upSprite.starData.indexOfRow = j;
this.starTable[i].splice(j, 1, upSprite);
this.starTable[i].splice(k, 1, null);
k = length;
var flowTime = 0.2;
var fallAction = cc.MoveTo.create(flowTime, cc.p(36 + i * this.starSize,
36 + j * this.starSize));
upSprite.runAction(fallAction);
}
k++;
}
}
}
}
this.deadStar();
// this.combineStar();
}
第六步 合併星星,如果最底部有空缺,星星必須向左合併,這裏筆者調試有問題,時間匆忙 來不及修改,讀者可以自行研究修改;不解釋了
MainLayer.prototype.combineStar = function () {
for (var m = 0; m < this.starTable.length; m++) {
var mSprite0 = this.starTable[m][0];
if (mSprite0 == null) {
if (m == (this.starTable.length - 1)) {
for (var j = 0; j < this.starTable[m].length; j++) {
this.starTable[m].splice(j, 1, null);
}
}
else {
for (var i = (m + 1); i < this.starTable.length; i++) {
// this.starTable.splice((i - 1), 1, this.starTable[i]);
for (var j = 0; j < this.starTable[i].length; j++) {
var pSprite0 = this.starTable[i][j];
this.starTable[i - 1].splice(j, 1, pSprite0);
if (pSprite0 != null) {
pSprite0.starData.indexOfColumn = (i - 1);
var col = pSprite0.starData.indexOfColumn;
var row = pSprite0.starData.indexOfRow;
var moveAction = cc.MoveTo.create(0.1, cc.p(36 + col * this.starSize,
36 + row * this.starSize));
pSprite0.runAction(moveAction);
}
}
}
}
}
}
this.deadStar();
}
第七步 遊戲到最後 會發生死局情況,程序自動判斷消除;這裏主要是循環檢測每一個星星,如果所有的星星四周都沒有相同星星的時候,就確認爲死局,程序自動消除星星
MainLayer.prototype.deadStar = function () {
var isDead = true;
for (var i = 0; i < this.starTable.length; i++) {
var sprites = this.starTable[i];
var length = sprites.length;
for (var j = 0; j < length; j++) {
var pSprite0 = sprites[j];
if (pSprite0 != null) {
if (this.checkOneStarFourSide(pSprite0).length > 0) {
isDead = false;
return;
}
}
}
}
if (isDead) {
for (var jj = 9; jj >= 0; jj--) {
for (var ii = 0; ii < 10; ii++) {
var pSprite0 = this.starTable[ii][jj];
if (pSprite0 != null) {
var delay = 4 + 0.3 * ii - 0.4 * jj;
pSprite0.runAction(cc.Sequence.create(
cc.DelayTime.create(delay),
cc.CleanUp.create(pSprite0)
));
var starParticle = cc.StarParticle.create(this.rootNode, (36 + ii * this.starSize), (36 + jj * this.starSize), "spark");
starParticle.runAction(cc.Sequence.create(cc.ScaleTo.create(0, 0),
cc.DelayTime.create(delay), cc.ScaleTo.create(0, 1), cc.DelayTime.create(0.8),
cc.CleanUp.create(starParticle)));
}
}
}
}
}
基本的流程就是這樣 觸摸——檢測顏色——消除星星——掉落移動——合併星星——檢測死局——結束 消除類的遊戲思路都差不多是這樣,把這個demo理解透了 任何消除類的遊戲都很簡單
CocosEditor開發工具:
CocosEditor,它是開發跨平臺的手機遊戲工具,運行window/mac系統上,javascript腳本語言,基於cocos2d-x跨平臺遊戲引擎, 集合代碼編輯,場景設計,動畫製作,字體設計,還有粒子,物理系統,地圖等等的,而且調試方便,和實時模擬;
CocosEditor 下載,介紹和教程:http://blog.csdn.net/touchsnow/article/details/19070665;
CocosEditor官方博客:http://blog.makeapp.co/;
PopStar博文系列:
PopStar(消滅星星)遊戲源代碼下載、分析及跨平臺移植---第一篇(界面)
PopStar(消滅星星)遊戲源代碼下載、分析及跨平臺移植---第二篇(算法)
PopStar(消滅星星)遊戲源代碼下載、分析及跨平臺移植---第三篇(分數) ——將寫——
PopStar(消滅星星)遊戲源代碼下載、分析及跨平臺移植---第四篇(關卡) ——將寫——
PopStar(消滅星星)遊戲源代碼下載、分析及跨平臺移植---第五篇(移植) ——將寫——
傳送門(優質博文):
flappy bird遊戲源代碼揭祕和下載後續---移植到android真機上
flappy bird遊戲源代碼揭祕和下載後續---移植到html5網頁瀏覽器
flappy bird遊戲源代碼揭祕和下載後續---日進5萬美元的祕訣AdMob廣告
筆者語:
想了解更多請進入官方博客,最新博客和代碼在官方博客首發;請持續關注,還有更多cocos2dx editor遊戲源碼即將放出;
聯繫筆者:[email protected](郵箱) qq羣:232361142