-
Notifications
You must be signed in to change notification settings - Fork 89
Home
主要集中在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理解透了 任何消除类的游戏都很简单
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
cocos2d-x editor开发工具： cocos2d-x editor，它是开发跨平台的手机游戏工具，运行window/mac系统上，javascript脚本语言，基于cocos2d-x跨平台游戏引擎, 集合代码编辑，场景设计，动画制作，字体设计，还有粒子，物理系统，地图等等的，而且调试方便，和实时模拟； cocos2d-x editor 下载，介绍和教程：http://blog.csdn.net/touchsnow/article/details/19070665； cocos2d-x editor官方博客：http://blog.makeapp.co/；
PopStar博文系列： PopStar(消灭星星)游戏源代码下载、分析及跨平台移植---第一篇（界面） PopStar(消灭星星)游戏源代码下载、分析及跨平台移植---第二篇（算法） PopStar(消灭星星)游戏源代码下载、分析及跨平台移植---第三篇（分数） ——将写—— PopStar(消灭星星)游戏源代码下载、分析及跨平台移植---第四篇（关卡） ——将写—— PopStar(消灭星星)游戏源代码下载、分析及跨平台移植---第五篇（移植） ——将写——
传送门（优质博文）： flappy bird游戏源代码揭秘和下载 flappy bird游戏源代码揭秘和下载后续---移植到android真机上 flappy bird游戏源代码揭秘和下载后续---移植到html5网页浏览器 flappy bird游戏源代码揭秘和下载后续---日进5万美元的秘诀AdMob广告
笔者语： 想了解更多请进入官方博客，最新博客和代码在官方博客首发；请持续关注，还有更多cocos2dx editor游戏源码即将放出； 联系笔者：[email protected]（邮箱） qq群：232361142