背景:

而且我提供的算法未必就是最好的,如果读者有更优更好的算法,希望分享出来,我可以链接到你那里。大概的思路是这样的,第一次点击一个星星,立刻寻找四周相同颜色的,第二次点击,消除他们并产生粒子效果;接着星星数组重新走位掉落,补全空缺;然后还要检测纵行是否出现空缺,有的话,合并到一起;最后必须检测死局;大概如此。

ps:

1 这是一个系列博文,代码不会一下子全部放出来,每写一篇放出相应的代码。因为笔者也是抽空编一点程序,然后写一篇博文,断断续续的,没有整块时间;

2 代码是基于javascript语言,cocos2d-x游戏引擎,cocos2d-x editor手游开发工具完成的;

3 运行demo需要配置好cocos2d-x editor,暂不支持其他工具。demo是跨平台的,可移植运行android,ios,html5网页等。

 

 

源代码下载:

请到代码集中营下载(第二篇算法):http://blog.makeapp.co/?p=319

 

 

不同平台下的效果图:(windows、html5、android)


JAVA消灭星星小游戏 消灭星星游戏软件_PopStar源代码


JAVA消灭星星小游戏 消灭星星游戏软件_JAVA消灭星星小游戏_02


       

JAVA消灭星星小游戏 消灭星星游戏软件_PopStar源代码_03

   

JAVA消灭星星小游戏 消灭星星游戏软件_cocos2d-html5_04


代码分析:

主要集中在MainLayer.js下面的分析

第一步,10*10星星群检测触摸事件,通过this.sameColorList.length可以判断是第一次触摸还是第二次触摸 ;   

    @@    >1表示第二次触摸,这里又有分支,触摸的是刚才同一颜色区域还是其他区域?如果是原来颜色区域,删除this.removeSameColorStars(),如果不是原来颜色区域,恢复原状,然后新的检测

    @@     <=1表示第一次触摸  直接检测颜色相同区域

 



 

1. MainLayer.prototype.onTouchesBegan = function (touches, event) {  
2. var loc = touches[0].getLocation();  
3. this.ccTouchBeganPos = loc;  
4.   
5. for (var i = 0; i < this.starTable.length; i++) {  
6. var sprites = this.starTable[i];  
7. for (var j = 0; j < sprites.length; j++) {  
8. var pSprite0 = sprites[j];  
9. if (pSprite0) {  
10. var ccRect = pSprite0.getBoundingBox();  
11. if (isInRect(ccRect, this.ccTouchBeganPos)) {  
12. if (this.sameColorList.length > 1) {  
13. if (this.sameColorList.contains(pSprite0)) {  
14. false);  
15. this.removeSameColorStars();  
16. else {  
17. for (var k = 0; k < this.sameColorList.length; k++) {  
18. if (this.sameColorList[k]) {  
19. this.sameColorList[k].runAction(cc.ScaleTo.create(0.1, 1));  
20.                                 }  
21.                             }  
22. this.checkSameColorStars(pSprite0);  
23. if (this.sameColorList.length > 1) {  
24. false);  
25.                             }  
26.                         }  
27. else {  
28. this.checkSameColorStars(pSprite0);  
29. if (this.sameColorList.length > 1) {  
30. false);  
31.                         }  
32.                     }  
33.   
34. break;  
35.                 }  
36.             }  
37.         }  
38.     }  
39. };




 

第二步,建立单个星星的四个方向检测,上下左右,把颜色相同的放在一个数组里面,回调这个数组;其实最后用这个函数的时候主要是判断数组的大小;数组大于1,说明四周有相同颜色的;

 



 

1. MainLayer.prototype.checkOneStarFourSide = function (sprite) {  
2. if (sprite == null) {  
3. return;  
4.     }  
5. // cc.log("checkOneStarFourSide");  
6. var fourSideSpriteList = [];  
7. var color = sprite.starData.color;  
8. var col = sprite.starData.indexOfColumn;  
9. var row = sprite.starData.indexOfRow;  
10.   
11. //up  
12. if (row < 9) {  
13. var upSprite = this.starTable[col][row + 1];  
14. if (upSprite != null && upSprite.starData.color == color) {  
15.             fourSideSpriteList.push(upSprite);  
16.         }  
17.     }  
18.   
19. //down  
20. if (row > 0) {  
21. var downSprite = this.starTable[col][row - 1];  
22. if (downSprite != null && downSprite.starData.color == color) {  
23.             fourSideSpriteList.push(downSprite);  
24.         }  
25.     }  
26.   
27. //left  
28. if (col > 0) {  
29. var leftSprite = this.starTable[col - 1][row];  
30. if (leftSprite != null && leftSprite.starData.color == color) {  
31.             fourSideSpriteList.push(leftSprite);  
32.         }  
33.     }  
34.   
35. //right  
36. if (col < 9) {  
37. var rightSprite = this.starTable[col + 1][row];  
38. if (rightSprite != null && rightSprite.starData.color == color) {  
39.             fourSideSpriteList.push(rightSprite);  
40.         }  
41.     }  
42. return fourSideSpriteList;  
43. }




 

第三步,检测相同颜色区域,这里的算法比较复杂;有两个数组this.sameColorList和newSameColorList,前者是全局星星数组,后者是每次扩展新加入的星星;比如这样情况,一个星星左右上有相同的星星,上面的上面还有一个星星,总共五个相同星星:三次检测情况是this.sameColorList为1---4----5 ,而newSameColorList为1--3--1,各种曲折,读者好好理解下;

 



 


1. MainLayer.prototype.checkSameColorStars = function (sprite) {  
2. if (sprite == null) {  
3. return;  
4.     }  
5. this.sameColorList = [];  
6. this.sameColorList.push(sprite);  
7. var newSameColorList = [];  
8.     newSameColorList.push(sprite);  
9.   
10. //by logic ,check the same color star list  
11. while (newSameColorList.length > 0) {  
12. for (var i = 0; i < newSameColorList.length; i++) {  
13. var fourSide = this.checkOneStarFourSide(newSameColorList[i]);  
14. if (fourSide.length > 0) {  
15. for (var j = 0; j < fourSide.length; j++) {  
16. if (!this.sameColorList.contains(fourSide[j])) {  
17. this.sameColorList.push(fourSide[j]);  
18.                         newSameColorList.push(fourSide[j]);  
19.                     }  
20.                 }  
21.             }  
22.             newSameColorList.splice(i, 1);  
23.         }  
24.     }  
25. "sameColorList length==" + this.sameColorList.length);  
26. if (this.sameColorList.length > 1) {  
27. for (var k = 0; k < this.sameColorList.length; k++) {  
28. var simpleStar = this.sameColorList[k];  
29. if (simpleStar) {  
30.                 simpleStar.runAction(cc.ScaleTo.create(0.1, 1.08));  
31.             }  
32.         }  
33.     }  
34. }




 

第四步 移除相同的星星,并产生粒子效果

 



 


1. MainLayer.prototype.removeSameColorStars = function () {  
2. for (var k = 0; k < this.sameColorList.length; k++) {  
3. var simpleStar = this.sameColorList[k];  
4. if (simpleStar) {  
5. var col = simpleStar.starData.indexOfColumn;  
6. var row = simpleStar.starData.indexOfRow;  
7. this.starTable[col].splice(row, 1, null);  
8. this.rootNode.removeChild(simpleStar);  
9. if (sys.platform != 'browser') {  
10. var starParticle = cc.StarParticle.create(this.rootNode, (36 + col * this.starSize), (36 + row * this.starSize), "spark");  
11.                 starParticle.runAction(cc.Sequence.create(cc.DelayTime.create(0.8), cc.CleanUp.create(starParticle)));  
12.             }  
13.         }  
14.     }  
15. this.sameColorList = [];  
16. this.fallStar();  
17. }




 

第五步 星星掉落 填充空缺,主要是如果一个地方有空缺,就把它上面的星星位置和数据交换,用到数组的方法splice,可到网上查看js数组的一些方法应用

 



 


1. MainLayer.prototype.fallStar = function () {  
2. for (var i = 0; i < this.starTable.length; i++) {  
3. var sprites = this.starTable[i];  
4. var length = sprites.length;  
5. for (var j = 0; j < length; j++) {  
6. var pSprite0 = sprites[j];  
7. if (pSprite0 == null) {  
8. var k = j + 1;  
9. while (k < length) {  
10. var upSprite = sprites[k];  
11. if (upSprite != null) {  
12.                         upSprite.starData.indexOfColumn = i;  
13.                         upSprite.starData.indexOfRow = j;  
14. this.starTable[i].splice(j, 1, upSprite);  
15. this.starTable[i].splice(k, 1, null);  
16.                         k = length;  
17. var flowTime = 0.2;  
18. var fallAction = cc.MoveTo.create(flowTime, cc.p(36 + i * this.starSize,  
19. this.starSize));  
20.                         upSprite.runAction(fallAction);  
21.                     }  
22.                     k++;  
23.                 }  
24.             }  
25.         }  
26.     }  
27.   
28. this.deadStar();  
29. // this.combineStar();  
30. }




 

第六步 合并星星,如果最底部有空缺,星星必须向左合并,这里笔者调试有问题,时间匆忙 来不及修改,读者可以自行研究修改;不解释了

 



 

1. MainLayer.prototype.combineStar = function () {  
2. for (var m = 0; m < this.starTable.length; m++) {  
3. var mSprite0 = this.starTable[m][0];  
4. if (mSprite0 == null) {  
5. if (m == (this.starTable.length - 1)) {  
6. for (var j = 0; j < this.starTable[m].length; j++) {  
7. this.starTable[m].splice(j, 1, null);  
8.                 }  
9.             }  
10. else {  
11. for (var i = (m + 1); i < this.starTable.length; i++) {  
12. // this.starTable.splice((i - 1), 1, this.starTable[i]);  
13. for (var j = 0; j < this.starTable[i].length; j++) {  
14. var pSprite0 = this.starTable[i][j];  
15. this.starTable[i - 1].splice(j, 1, pSprite0);  
16. if (pSprite0 != null) {  
17.                             pSprite0.starData.indexOfColumn = (i - 1);  
18. var col = pSprite0.starData.indexOfColumn;  
19. var row = pSprite0.starData.indexOfRow;  
20. var moveAction = cc.MoveTo.create(0.1, cc.p(36 + col * this.starSize,  
21. this.starSize));  
22.                             pSprite0.runAction(moveAction);  
23.                         }  
24.                     }  
25.                 }  
26.             }  
27.         }  
28.     }  
29. this.deadStar();  
30. }




 

第七步 游戏到最后 会发生死局情况,程序自动判断消除;这里主要是循环检测每一个星星,如果所有的星星四周都没有相同星星的时候,就确认为死局,程序自动消除星星 

 



 

1. MainLayer.prototype.deadStar = function () {  
2. var isDead = true;  
3. for (var i = 0; i < this.starTable.length; i++) {  
4. var sprites = this.starTable[i];  
5. var length = sprites.length;  
6. for (var j = 0; j < length; j++) {  
7. var pSprite0 = sprites[j];  
8. if (pSprite0 != null) {  
9. if (this.checkOneStarFourSide(pSprite0).length > 0) {  
10. false;  
11. return;  
12.                 }  
13.             }  
14.         }  
15.     }  
16.   
17. if (isDead) {  
18. for (var jj = 9; jj >= 0; jj--) {  
19. for (var ii = 0; ii < 10; ii++) {  
20. var pSprite0 = this.starTable[ii][jj];  
21. if (pSprite0 != null) {  
22. var delay = 4 + 0.3 * ii - 0.4 * jj;  
23.                     pSprite0.runAction(cc.Sequence.create(  
24.                         cc.DelayTime.create(delay),  
25.                         cc.CleanUp.create(pSprite0)  
26.                     ));  
27. var starParticle = cc.StarParticle.create(this.rootNode, (36 + ii * this.starSize), (36 + jj * this.starSize), "spark");  
28.                     starParticle.runAction(cc.Sequence.create(cc.ScaleTo.create(0, 0),  
29.                         cc.DelayTime.create(delay), cc.ScaleTo.create(0, 1), cc.DelayTime.create(0.8),  
30.                         cc.CleanUp.create(starParticle)));  
31.                 }  
32.             }  
33.         }  
34.     }  
35. }




 

基本的流程就是这样      触摸——检测颜色——消除星星——掉落移动——合并星星——检测死局——结束  消除类的游戏思路都差不多是这样,把这个demo理解透了 任何消除类的游戏都很简单




cocos2d-x跨平台游戏引擎



 



cocos2d-x是全球知名的游戏引擎 ,引擎在全球范围内拥有众多开发者,涵盖国内外各知名游戏开发商。目前Cocos2d-x引擎已经实现横跨ios、Android、Bada、MeeGo、BlackBerry、Marmalade、Windows、Linux等平台。编写一次,到处运行,分为两个版本 cocos2d-c++和cocos2d-html5 本文使用了后者;

cocos2d-x editor开发工具:

cocos2d-x editor,它是开发跨平台的手机游戏工具,运行window/mac系统上,javascript脚本语言,基于cocos2d-x跨平台游戏引擎, 集合代码编辑,场景设计,动画制作,字体设计,还有粒子,物理系统,地图等等的,而且调试方便,和实时模拟;