PopStar(消灭星星)游戏源代码下载、分析及跨平台移植---第二篇（算法）

背景：

 上一节，我们已经把消灭星星的界面搭建好了，流程也跑通了。 这一篇涉及到程序的算法，也许是最难的部分了，理解起来需要多花点时间，而且我提供的算法未必就是最好的，如果读者有更优更好的算法，希望分享出来，我可以链接到你那里。大概的思路是这样的，第一次点击一个星星，立刻寻找四周相同颜色的，第二次点击，消除他们并产生粒子效果；接着星星数组重新走位掉落，补全空缺；然后还要检测纵行是否出现空缺，有的话，合并到一起；最后必须检测死局；大概如此。

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表示第一次触摸  直接检测颜色相同区域

[javascript]view plaincopy

1. MainLayer.prototype.onTouchesBegan = function (touches, event) {  

2. var loc = touches[0].getLocation();  

3. this.ccTouchBeganPos = loc;  

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.                            cc.AudioEngine.getInstance().playEffect(PS_MAIN_SOUNDS.broken, 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.                                cc.AudioEngine.getInstance().playEffect(PS_MAIN_SOUNDS.select, false);  

25.                            }  

26.                        }  

27.                    } else {  

28. this.checkSameColorStars(pSprite0);  

29. if (this.sameColorList.length > 1) {  

30.                            cc.AudioEngine.getInstance().playEffect(PS_MAIN_SOUNDS.select, false);  

31.                        }  

32.                    }  

34. break;  

35.                }  

36.            }  

37.        }  

38.    }  

39. };  

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

[javascript]view plaincopy

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;  

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.    }  

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.    }  

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.    }  

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，各种曲折，读者好好理解下；

[javascript]view plaincopy

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);  

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.    cc.log("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. }  

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

[javascript]view plaincopy

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数组的一些方法应用

[javascript]view plaincopy

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.                            36 + j * this.starSize));  

20.                        upSprite.runAction(fallAction);  

21.                    }  

22.                    k++;  

23.                }  

24.            }  

25.        }  

26.    }  

28. this.deadStar();  

29. // this.combineStar();

30. }  

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

[javascript]view plaincopy

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.                                36 + row * this.starSize));  

22.                            pSprite0.runAction(moveAction);  

23.                        }  

24.                    }  

25.                }  

26.            }  

27.        }  

28.    }  

29. this.deadStar();  

30. }  

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

[javascript]view plaincopy

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.                    isDead = false;  

11. return;  

12.                }  

13.            }  

14.        }  

15.    }  

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 官网：http://cocos2d-x.org/ cocos2d-x 资料下载  http://cocos2d-x.org/download

CocosEditor开发工具：

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

CocosEditor 下载，介绍和教程：http://blog.csdn.net/touchsnow/article/details/19070665；

CocosEditor官方博客：http://blog.makeapp.co/；