查看: 2109|回复: 4
cocos2dx:消灭星星（Popstar）游戏是怎么开发实现的？难不难？
主题帖子积分
玩这个游戏最多的应该是女生和小孩了，我玩的不多！
主题帖子积分
这是我在知乎第二次认真回答问题，第一次给了
开发一个 Flappy Bird 需要多少行代码，多少时间？效果还不错。
首先表明我是一个代码帝，喜欢用代码说话，轻砸。
开发这样的游戏难不难，我觉得不难，
玩通关比开发难多了，我一个礼拜才玩到第五关，开发两天就够了；
有图有真相，我开发过
基本的流程就是这样 创建10*10随机星星——触摸——检测颜色——消除星星——掉落移动——合并星星——检测死局——结束 大概如此
代码实现是基于js编程语言，cocos2d-x游戏引擎实现的；
&&1 创建随机单个星星，并加入单个星星掉落动画
&&MainLayer.prototype.getRandomStar = function (colIndex, rowIndex) {
& & this.starSize = 72;
& & var stars = PS_MAIN_TEXTURE.STARS;
& & var randomStar = stars[getRandom(stars.length)];
& & var starSprite = cc.Sprite.createWithSpriteFrameName(randomStar);
& & starSprite.setAnchorPoint(cc.p(0.5, 0.5));
& & starSprite.setPosition(cc.p(36 + colIndex * this.starSize,
& && &&&1300));
& & starSprite.starData = {name: randomStar, indexOfColumn: colIndex, indexOfRow: rowIndex};
& & starSprite.setZOrder(100);
& & var flowTime = rowIndex / 10;
& & var fallAction = cc.MoveTo.create(flowTime, cc.p(36 + colIndex * this.starSize,
& && &&&36 + rowIndex * this.starSize));
& & starSprite.runAction(fallAction);
& & return starS
2 根据表格位置初始化10*10星星群，产生星星从空中坠落的效果
&&MainLayer.prototype.initStarTable = function () {
& & this.starTable = new Array(this.numX);
& & for (var i = 0; i & this.numX; i++) {
& && &&&var sprites = new Array(this.numY);
& && &&&for (var j = 0; j & this.numY; j++) {
& && && && &var pSprite0 = this.getRandomStar(i, j);
& && && && &if (pSprite0 != null) {
& && && && && & this.rootNode.addChild(pSprite0);
& && && && &}
& && && && &sprites[j] = pSprite0;
& && &&&this.starTable =
3 10*10星星群检测触摸事件，通过this.sameColorList.length可以判断是第一次触摸还是第二次触摸 ；数组长度 &1表示第二次触摸，这里又有分支，触摸的是刚才同一颜色区域还是其他区域？如果是原来颜色区域，删除this.removeSameColorStars()，如果不是原来颜色区域，恢复原状，然后新的检测；数组长度 &=1表示第一次触摸 直接检测颜色相同区域
&&MainLayer.prototype.onTouchesBegan = function (touches, event) {
& & var loc = touches[0].getLocation();
& & this.ccTouchBeganPos =
& & for (var i = 0; i & this.starTable. i++) {
& && &&&var sprites = this.starTable;
& && &&&for (var j = 0; j & sprites. 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. 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);
& && && && && && && && &}
& && && && && && &&&}
& && && && && && &&&
& && && && && & }
& && && && &}
4 建立单个星星的四个方向检测，上下左右，把颜色相同的放在一个数组里面，回调这个数组；其实最后用这个函数的时候主要是判断数组的大小；数组大于1，说明四周有相同颜色的；
&&MainLayer.prototype.checkOneStarFourSide = function (sprite) {
& & if (sprite == null) {
& & // cc.log(&checkOneStarFourSide&);
& & var fourSideSpriteList = [];
& & var color = sprite.starData.
& & var col = sprite.starData.indexOfC
& & var row = sprite.starData.indexOfR
& & 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 fourSideSpriteL
5 检测相同颜色区域，这里的算法比较复杂；有两个数组this.sameColorList和newSameColorList，前者是全局星星数组，后者是每次扩展新加入的星星；比如这样情况，一个星星左右上有相同的星星，上面的上面还有一个星星，总共五个相同星星：三次检测情况是this.sameColorList为1---4----5 ，而newSameColorList为1--3--1，各种曲折，读者好好理解下；
&&MainLayer.prototype.checkSameColorStars = function (sprite) {
& & if (sprite == null) {
& & 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. i++) {
& && && && &var fourSide = this.checkOneStarFourSide(newSameColorList);
& && && && &if (fourSide.length & 0) {
& && && && && & for (var j = 0; j & fourSide. 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. k++) {
& && && && &var simpleStar = this.sameColorList[k];
& && && && &if (simpleStar) {
& && && && && & simpleStar.runAction(cc.ScaleTo.create(0.1, 1.08));
& && && && &}
6 移除刚才选中的相同颜色的星星，并产生爆炸粒子效果
&&MainLayer.prototype.removeSameColorStars = function () {
& & for (var k = 0; k & this.sameColorList. k++) {
& && &&&var simpleStar = this.sameColorList[k];
& && &&&if (simpleStar) {
& && && && &var col = simpleStar.starData.indexOfC
& && && && &var row = simpleStar.starData.indexOfR
& && && && &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();
7 星星掉落 填充空缺，主要是如果一个地方有空缺，就把它上面的星星位置和数据交换，用到数组的方法splice，可到网上查看js数组的一些方法应用
&&MainLayer.prototype.fallStar = function () {
& & for (var i = 0; i & this.starTable. i++) {
& && &&&var sprites = this.starTable;
& && &&&var length = sprites.
& && &&&for (var j = 0; j & 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 =
& && && && && && && && &upSprite.starData.indexOfRow =
& && && && && && && && &this.starTable.splice(j, 1, upSprite);
& && && && && && && && &this.starTable.splice(k, 1, null);
& && && && && && && && &k =
& && && && && && && && &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();
& & // bineStar();
8 合并星星，如果最底部有空缺，星星必须向左合并，不能出现空缺
&&bineStar = function () {
& & for (var m = 0; m & this.starTable. m++) {
& && &&&var mSprite0 = this.starTable[m][0];
& && &&&if (mSprite0 == null) {
& && && && &if (m == (this.starTable.length - 1)) {
& && && && && & for (var j = 0; j & this.starTable[m]. j++) {
& && && && && && &&&this.starTable[m].splice(j, 1, null);
& && && && && & }
& && && && &}
& && && && &else {
& && && && && & for (var i = (m + 1); i & this.starTable. i++) {
& && && && && && &&&// this.starTable.splice((i - 1), 1, this.starTable);
& && && && && && &&&for (var j = 0; j & this.starTable. j++) {
& && && && && && && && &var pSprite0 = this.starTable[j];
& && && && && && && && &this.starTable[i - 1].splice(j, 1, pSprite0);
& && && && && && && && &if (pSprite0 != null) {
& && && && && && && && && & pSprite0.starData.indexOfColumn = (i - 1);
& && && && && && && && && & var col = pSprite0.starData.indexOfC
& && && && && && && && && & var row = pSprite0.starData.indexOfR
& && && && && && && && && & var moveAction = cc.MoveTo.create(0.1, cc.p(36 + col * this.starSize,
& && && && && && && && && && &&&36 + row * this.starSize));
& && && && && && && && && & pSprite0.runAction(moveAction);
& && && && && && && && &}
& && && && && && &&&}
& && && && && & }
& && && && &}
& & this.deadStar();
9 游戏到最后 会发生死局情况，程序自动判断消除；这里主要是循环检测每一个星星，如果所有的星星四周都没有相同星星的时候，就确认为死局，程序自动消除星星
&&MainLayer.prototype.deadStar = function () {
& & var isDead =
& & for (var i = 0; i & this.starTable. i++) {
& && &&&var sprites = this.starTable;
& && &&&var length = sprites.
& && &&&for (var j = 0; j & j++) {
& && && && &var pSprite0 = sprites[j];
& && && && &if (pSprite0 != null) {
& && && && && & if (this.checkOneStarFourSide(pSprite0).length & 0) {
& && && && && && &&&isDead =
& && && && && && &&&
& && && && && & }
& && && && &}
& & 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 *
& && && && && && &&&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)));
& && && && && & }
& && && && &}
基本就是这样
想要源码到我博客里面找吧：
http://blog.csdn.net/touchsnow/article/category/2094455
主题帖子积分
我身边同事都玩过一段时间，逻辑就是永远没有通关分数是一个没有尽头的数加星星全部消完的成就感！
主题帖子积分
我玩了一个学期，最高分玩到5万多，然后一直没有突破6万
主题帖子积分
大神 加你qq可好
人生要有追求