一、前言

在學(xué)習(xí)Cocos中，需要一些東西來練手，于是前段時間就開發(fā)仿照一款公司之前的產(chǎn)品《點我+1》來做，仿照過程中，所有的算法邏輯都是自己研究的，并沒有參考公司代碼，也沒有使用公司的美術(shù)資源，所以也就不存在公司機密的內(nèi)容啦，完全只是學(xué)習(xí)練習(xí)而已。
這是一款消除類游戲，規(guī)則和大多數(shù)三消類游戲差不多，在一個5x5的格子中，有25個方塊，每個方塊有一個數(shù)字，用戶的操作就是點擊方塊，使方塊的數(shù)字+1，當(dāng)至少每3個相同數(shù)字的時候，這些數(shù)字相同的方塊合成為一個，并且數(shù)字+1，在玩家的表現(xiàn)就是：除了點擊的方塊之外，其他的相同數(shù)字的方塊全部消失，然后點擊的方塊再+1。這款游戲看似很簡單，但實際也是蘊含很多細節(jié)以及算法，我也是用了一周時間斷斷續(xù)續(xù)才做出來。
并且在這次練習(xí)中，我也是第一次嘗試使用Cocos Creator來做，使用中也是遇到了不少問題，它與Cocos2d-JS的原生API還是有一定的差別的，Cocos Creator在我看來就是Cocos在向Unity靠近的一個產(chǎn)物，想要像Unity那樣實現(xiàn)一整套的工作流，將游戲中的所有元素都組件化，游戲場景可以通過拖動就能搭建，游戲邏輯的實現(xiàn)只需要對組件添加相應(yīng)的腳本即可，讓游戲開發(fā)更加的方便，更加直觀可視化。

二、Cocos Creator

Cocos Creator是Cocos家族又一個劃時代意義的產(chǎn)物，前面已經(jīng)提到，我個人認(rèn)為這是Cocos向Unity靠近的產(chǎn)物，或許也可以說，游戲開發(fā)的腳本化、組件化、以及高效工作流、高度可擴展，已經(jīng)成為任何一款游戲引擎的發(fā)展方向，這樣的高效快速的開發(fā)的工具，才是開發(fā)者的首選工具。了解Cocos家族歷史的人應(yīng)該都知道，Cocos從各種語言版本，到2dx跨平臺版本，到Cocos Stuio、Cocos IDE、Cocos Builder，再到Cocos Creator，這一切都是在使開發(fā)者越來越方便，使得游戲開發(fā)的門檻越來越低，任何人，只要你有心，有游戲夢，你都可以通過自身的努力來造夢，而Cocos Creator，就是我們造夢的工具。
不過說實話，Cocos Creator目前是1.1版本，在使用仍然還有許多bug，比如我打包Web版本之后，直接在本地?zé)o法運行，查看控制臺輸出應(yīng)該是跨域的問題，而發(fā)布到服務(wù)器就能正常運行，再比如游戲的開發(fā)者，開發(fā)者還是需要考慮很多各種型號手機屏幕兼容的問題，希望Cocos Creator還能有一套成熟的兼容適配的方案，還有一些我個人的問題或許只是我還不熟悉Cocos的組件化開發(fā)而已，需要等到我真正熟悉這款工具，才能用好它，所謂工欲善其事必先利其器，工具用好了，你的造夢之路才會更加順暢！
Cocos Creator的用戶手冊：http://www.cocos.com/docs/creator/index.html
Cocos Creator的API：http://www.cocos.com/docs/creator/api/index.html

三、游戲分析

這款游戲是比較常見的三消類游戲，不過它也有著自己的特色，將數(shù)字類游戲玩法與消除類游戲玩法相結(jié)合，游戲過程也比較具有挑戰(zhàn)性，讓人產(chǎn)生挑戰(zhàn)的欲望，游戲的玩法在上文已有描述，沒有玩過這款消除類游戲的朋友可以通過以下地址進行下載：
安卓版地址：http://app.mi.com/detail/231892?ref=search
iOS版地址：https://itunes.apple.com/cn/app/dian-wo+1/id1012314214?mt=8
沒玩過的朋友可以通過以上地址下載下來玩一下，體驗下游戲玩法，然后仔細分析其中的游戲邏輯運算過程。
通過游戲玩法的分析我們至少可以分析出以下幾點：
1).點擊游戲方塊，方塊數(shù)字+1
2).在至少3個相同數(shù)字的方塊彼此相鄰時，可以合成一個+1的數(shù)
3).生成5x5的地圖時，最多只能有兩個相同數(shù)字方塊相鄰
4).每完成一次方塊合成之后，所有方塊向下填補空缺的位置
5).在填補完空缺位置之后，再生成新的方塊
在Cocos Creator中，我們要熟悉組件化開發(fā)，因此我們需要開始場景、游戲場景、結(jié)束場景、以及方塊預(yù)制資源、能量條預(yù)制資源，以及各種腳本和音效等。分別用scene、script和voice三個文件夾來存放場景組件，腳本組件和音效組件，另外將預(yù)制資源放在根目錄下，如下圖資源目錄：

四、游戲?qū)崿F(xiàn)

如之前一篇文章對2048游戲的分析一樣，我們首先需要一個數(shù)組來存放所有的方塊，并將方塊單獨提出來為一個對象，在這里，我們將方塊做成預(yù)制資源，在需要的時候直接創(chuàng)建方塊預(yù)制資源，同樣，能量條也可以做成預(yù)制資源。另外我們需要開始場景、游戲場景和結(jié)束場景三個場景，并對這三個場景組件編寫腳本。
在開發(fā)寫代碼之前，我們經(jīng)過如上的分析，知道了我們大致要實現(xiàn)的幾個核心算法：
1).掃描某一個位置的上下左右四個方向所有相鄰的相同數(shù)字的點，并得到這些點的個數(shù)
2).所有方塊向下移動，填補所有的空缺
核心的就這兩個算法，其他的都是一些簡單的邏輯，下面先對這兩個算法進行分析

1.掃描算法

掃描算法實質(zhì)上就是對指定的點得四周進行掃描，掃描是否有數(shù)字相同的點，如果有數(shù)字相同的點，那么還需要進一步對這個數(shù)字相同的點再進行掃描，直到掃描的點四周都沒有數(shù)字相同的點，才能確認(rèn)最終相鄰點的個數(shù)，實際上就是對指定的點向四周擴散掃描。
我的實現(xiàn)方式是這樣的，寫一個函數(shù)，傳入兩個數(shù)組，一個用來記錄掃描到的數(shù)字相同的點，一個用來記錄掃描過得點，以便于下次掃描不再掃描已經(jīng)掃描過的點，除此之外，還需要傳入行，列，上次掃描的行，上次掃描的列（在下次掃描時，不用再對上次的那個方向進行掃描），以及掃描要比對的數(shù)字。通過指定的點，我向上、下、左、右四個方向進行掃描，如果數(shù)字相同，我就將這個點加入到記錄數(shù)字相同的點得數(shù)組中，并對這個點再遞歸調(diào)用這個函數(shù)，在四個方向全都遞歸掃描完畢后，我得到的這個掃描過的點的數(shù)組，就是所有與指定點的數(shù)字相同且彼此相鄰的點的集合。可能我描述不是太清楚，我直接將代碼貼出來，我的算法基礎(chǔ)不是太好，可能這不是最優(yōu)的算法，希望有朋友能為我提供更好更快的算法。

/** 核心掃描邏輯* @param row 指定行* @param col 指定列* @param lastRow 上次掃描的行* @param lastCol 上次掃描的列* @param num 掃描要比對的數(shù)字* @param arr 記錄數(shù)字相同且彼此相鄰的數(shù)組* @param scanArr 記錄掃描過的點的數(shù)組*/ scanAround:function(row,col,lastRow,lastCol,num,arr,scanArr){// cc.log("row:",row,",col:",col,",lastRow:",lastRow,",lastCol:",lastCol,",num:",num,",arr:",arr,",scanArr:",scanArr);if(this.tiles[row][col]==null){return;}var isClear = false;if(scanArr==undefined){scanArr = new Array();}// 掃描過的節(jié)點不再掃描if(scanArr.indexOf(row+"#"+col)==-1){scanArr.push(row+"#"+col);}else{return;}// 掃描上if(row<4&&(lastRow!=(row+1)||lastCol!=col)&&this.tiles[row+1][col]!=null){var nextNum = parseInt(this.tiles[row+1][col].getComponent("Tile").numLabel.string);if(nextNum==num){if(arr.indexOf(row+"#"+col)==-1){arr.push(row+"#"+col);}this.scanAround(row+1,col,row,col,num,arr,scanArr);isClear = true;}}// 掃描下if(row>0&&(lastRow!=(row-1)||lastCol!=col)&&this.tiles[row-1][col]!=null){var nextNum = parseInt(this.tiles[row-1][col].getComponent("Tile").numLabel.string);if(nextNum==num){if(arr.indexOf(row+"#"+col)==-1){arr.push(row+"#"+col);}this.scanAround(row-1,col,row,col,num,arr,scanArr);isClear = true;}}// 掃描左if(col>0&&(lastRow!=row||lastCol!=(col-1))&&this.tiles[row][col-1]!=null){var nextNum = parseInt(this.tiles[row][col-1].getComponent("Tile").numLabel.string);if(nextNum==num){if(arr.indexOf(row+"#"+col)==-1){arr.push(row+"#"+col);}this.scanAround(row,col-1,row,col,num,arr,scanArr);isClear = true;}}// 掃描右if(col<4&&(lastRow!=row||lastCol!=(col+1))&&this.tiles[row][col+1]!=null){var nextNum = parseInt(this.tiles[row][col+1].getComponent("Tile").numLabel.string);if(nextNum==num){if(arr.indexOf(row+"#"+col)==-1){arr.push(row+"#"+col);}this.scanAround(row,col+1,row,col,num,arr,scanArr);isClear = true;}}// 四周都不通，但不是出發(fā)遍歷點，并且數(shù)字相同，也加入到數(shù)組if(!isClear&&(lastRow!=-1&&lastCol!=-1)){var curNum = parseInt(this.tiles[row][col].getComponent("Tile").numLabel.string)if(curNum==num){if(arr.indexOf(row+"#"+col)==-1){arr.push(row+"#"+col);}}} }

2.移動算法

移動算法相對就比較簡單了，我只需要對每一列從下往上遍歷，當(dāng)遍歷中發(fā)現(xiàn)方塊不為null時（即這個點有方塊），我們就以這個方塊為起點，對這一列往下遍歷，在子循環(huán)中，如果下方為null時（即下方?jīng)]有方塊），這個方塊就向下移動一個單位，一直循環(huán)到下方見底，或者下方遇到方塊，才會停止。這個算法相對簡單，代碼如下：

for (var col = 0; col < 5; col++) {for (var row = 0; row < 5; row++) {if (this.tiles[row][col] != null) {// 有方塊for (var row1 = row; row1 > 0; row1--) {if (this.tiles[row1 - 1][col] == null){//如果沒有向下移動this.tiles[row1 - 1][col] = this.tiles[row1][col];this.tiles[row1][col] = null;this.tiles[row1 - 1][col].getComponent("Tile").moveTo(row1 - 1, col);}}}} }

3.方塊類

方塊類我們通過Creator的預(yù)制資源來制作，如下圖所示：

在Tile預(yù)制資源中，我們只需要一個背景層，和一個顯示數(shù)字的Label即可，其背景層的顏色和數(shù)字顯示都通過腳本來控制，方塊需要包含以下幾個方法：
1).產(chǎn)生新方塊的初始化及特效
2).移動到指定點的邏輯及特效
3).方塊銷毀的邏輯及特效
4).設(shè)置方塊數(shù)字以及動態(tài)改變其背景色
5).在方塊的初始化onLoad函數(shù)中，需要對方塊添加TOUCH_START事件，事件中綁定上面提到的4方法，方塊類的具體實現(xiàn)代碼如下：
1).方塊初始化函數(shù)
添加觸摸點擊事件，綁定設(shè)置數(shù)字函數(shù)，清空combo次數(shù)（combo次數(shù)記錄放在全局組件Global中）

onLoad: function () {var self = this;this.node.on(cc.Node.EventType.TOUCH_START,function(event){if(!self.game.isCal){cc.audioEngine.playEffect(self.clickEffect);self.game.isCal = true;// 連擊次數(shù)歸零Global.combo = 0;cc.audioEngine.playEffect(this.addCoin);self.setNum(parseInt(self.numLabel.string)+1,true,false);}}, this.node); }

2).產(chǎn)生新方塊
執(zhí)行從小變大的動畫，設(shè)置數(shù)組中的行列到屬性中

newTile:function(row,col){this.node.setPosition(5+(5+this.node.width)*col+this.node.width/2,5+(5+this.node.height)*row+this.node.height/2);this.node.setScale(0);this.node.runAction(cc.scaleTo(0.1,1));this.setArrPosition(row,col); }

3).移動到指定點
執(zhí)行移動動畫，設(shè)置數(shù)組中行列到屬性中

moveTo:function(row,col){this.row = row;this.col = col;this.node.stopActionByTag(1);var action = cc.moveTo(0.2,cc.p(5+(5+this.node.width)*col+this.node.width/2,5+(5+this.node.height)*row+this.node.height/2));this.node.runAction(action);action.setTag(1); }

4).方塊銷毀
執(zhí)行從大變小的動畫，執(zhí)行完動畫之后調(diào)用destory方法銷毀方塊

destoryTile:function(){var action = cc.sequence(cc.scaleTo(0.1,0),cc.callFunc(function(node){node.destroy();},this.node,this.node));this.node.runAction(action); }

5).設(shè)置方塊數(shù)字
設(shè)置方塊的顯示數(shù)字，并動態(tài)改變相應(yīng)數(shù)字對應(yīng)的顏色，顏色存在全局組件變量Colors中，通過參數(shù)exeLogic判斷是否需要執(zhí)行游戲的消除邏輯，通過playEffect判斷是否需要播放音效

setNum:function(num,exeLogic,playEffect){this.game.maxNum = num>this.game.maxNum?num:this.game.maxNum;this.numLabel.string = num;switch(num){case 1:this.node.color = Colors.num1;break;case 2:this.node.color = Colors.num2;break;case 3:this.node.color = Colors.num3;break; case 4:this.node.color = Colors.num4;break;case 5:this.node.color = Colors.num5;break;case 6:this.node.color = Colors.num6;break; case 7:this.node.color = Colors.num7;break;case 8:this.node.color = Colors.num8;break;case 9:this.node.color = Colors.num9;break; case 10:this.node.color = Colors.num10;break;case 11:this.node.color = Colors.num11;break;case 12:this.node.color = Colors.num12;break; case 13:this.node.color = Colors.num13;break;case 14:this.node.color = Colors.num14;break;case 15:this.node.color = Colors.num15;break;case 16:this.node.color = Colors.num16;break;case 17:this.node.color = Colors.num17;break;case 18:this.node.color = Colors.num18;break;case 19:this.node.color = Colors.num19;break;case 20:this.node.color = Colors.num20;break;default:this.node.color = Colors.nums;break;}// 播放特效if(playEffect){this.node.runAction(cc.sequence(cc.scaleTo(0.15,1.5),cc.scaleTo(0.15,1)));}// 消除邏輯if(exeLogic){// 執(zhí)行邏輯var isMove = this.game.operateLogic(this.row,this.col,parseInt(this.numLabel.string),true);var powers = this.game.powers;// 能量條-1if(!isMove){for (var i = powers.length - 1; i >= 0; i--) {if(powers[i]!=null){var costBarAction = cc.sequence(cc.scaleTo(0.1,0),cc.callFunc(function(power){power.destroy();},null,powers[i]));powers[i].runAction(costBarAction);powers[i] = null;break;}};// 游戲結(jié)束邏輯判斷：能量條為空if(powers[0]==null){Global.score = this.game.scoreNum.string;// Game Overcc.director.loadScene("overScene");}}} }

4.能量類

同方塊類，我們將游戲場景中的能量條也做成預(yù)制資源，其中只需要添加一個背景層就可以，背景層也是通過代碼動態(tài)控制顏色，能量條不需要任何腳本文件。

5.開始場景

做好了預(yù)制資源之后，我們就可以先做開始場景了，效果圖如下：

開始場景中有三個元素，游戲文字，開始按鈕，和背景層，其中游戲文字呈現(xiàn)一個變大變小循環(huán)播放的動畫，點擊開始游戲按鈕即可轉(zhuǎn)入游戲場景。具體代碼如下：
1).onLoad加載
動態(tài)設(shè)置元素的位置及寬高，以適配各種型號手機屏幕

onLoad: function () {// 背景鋪平this.bg.width = cc.winSize.width;this.bg.height = cc.winSize.height;this.bg.setPosition(this.bg.width/2,this.bg.height/2);this.bg.color = Colors.startBg;// 設(shè)置文字var action = cc.repeatForever(cc.sequence(cc.scaleTo(1, 1.5),cc.scaleTo(1,1)));this.gameName.runAction(action);this.gameName.setPosition(cc.winSize.width/2,cc.winSize.height/2);// 設(shè)置按鈕this.startBtn.setPosition(this.gameName.getPositionX(),this.gameName.getPositionY()-210); }

2).開始游戲按鈕回調(diào)
點擊進入游戲場景

startGame:function(){cc.audioEngine.playEffect(this.btnEffect);cc.director.loadScene("gameScene"); }

6.結(jié)束場景

結(jié)束場景與開始場景差不多，相比之下，結(jié)束場景主要是提供游戲分?jǐn)?shù)特效呈現(xiàn)的功能，效果圖如下：

結(jié)束場景也是幾個Label，一個背景層和一個Button按鈕組成，其中最重要的是分?jǐn)?shù)特效，通過從0一直往上加，加到實際分?jǐn)?shù)的特效，來使玩家獲得成就感，具體代碼如下：
1).加載函數(shù)
動態(tài)設(shè)置場景中元素的寬高及位置，播放分?jǐn)?shù)計算特效，綁定TOUCH_START事件，使特效立即播放完成

onLoad: function () {// 背景層this.bg.width = cc.winSize.width;this.bg.height = cc.winSize.height;this.bg.setPosition(this.bg.width/2,this.bg.height/2);this.bg.color = Colors.overBg;// 文字層this.gameText.setPosition(cc.winSize.width/2,cc.winSize.height/2);var action = cc.repeatForever(cc.sequence(cc.scaleTo(1, 1.5),cc.scaleTo(1,1)));this.gameText.runAction(action);// 播放結(jié)束音效cc.audioEngine.playEffect(this.overEffect);// 分?jǐn)?shù)this.scoreText.setPosition(this.gameText.getPositionX(),this.gameText.getPositionY()+200);this.score = Global.score;this.schedule(this.updateScore,0.1,cc.REPEAT_FOREVER,2);// 點擊分?jǐn)?shù)立即加到最高分?jǐn)?shù)var self = this;this.bg.on(cc.Node.EventType.TOUCH_START,function(event){cc.log("score text touch");cc.audioEngine.playEffect(self.addCoin);self.changeScore = self.score;self.scoreLabel.string = "最終分?jǐn)?shù)："+self.changeScore;}, this.bg);// 返回按鈕this.backBtn.setPosition(this.gameText.getPositionX(),this.gameText.getPositionY()-200); }

2).更新分?jǐn)?shù)回調(diào)
每一次更新分?jǐn)?shù)回調(diào)，將特效分?jǐn)?shù)增加20，直到加滿到游戲得分，并將這一過程顯示在場景的Label中

updateScore(){if(this.score<=this.changeScore){this.unschedule(this.updateScore);}this.changeScore += 20;this.changeScore = this.changeScore>this.score?this.score:this.changeScore;// 添加音效cc.audioEngine.playEffect(this.addCoin);this.scoreLabel.string = "最終分?jǐn)?shù)："+this.changeScore; }

3).返回按鈕回調(diào)
游戲分?jǐn)?shù)的全局變量歸零，切換加載開始游戲的場景

back:function(){Global.score = 0;cc.audioEngine.playEffect(this.btnEffect);cc.director.loadScene("startScene"); }

7.游戲場景

最主要的還是游戲場景，在游戲場景中，我們進行所有的游戲邏輯的運算，包括前面提到的兩個核心算法，游戲場景的效果圖如下：

在游戲主場景中，我們主要需要在onLoad加載時，初始化25個方塊，并放在地圖中，使他們之間相鄰個數(shù)小于3個，然后我們需要提供一個主要邏輯判斷函數(shù)，這個函數(shù)中判斷游戲中方塊的消除邏輯，再前面的Tile的setNum函數(shù)中進行調(diào)用，代碼如下：
1).場景加載
在場景加載中，我們需要初始化25個互相相鄰小于3個的方塊，與5個能量條，并且動態(tài)設(shè)置所有元素的寬高與位置。

onLoad: function () {// 播放背景音樂cc.audioEngine.playMusic(this.bgMusic,true);// 初始化方塊數(shù)組this.tiles = [[null,null,null,null,null],[null,null,null,null,null],[null,null,null,null,null],[null,null,null,null,null],[null,null,null,null,null]];this.powers = [null,null,null,null,null];// 背景層this.bg.width = cc.winSize.width;this.bg.height = cc.winSize.height;this.bg.setPosition(-cc.winSize.width/2,-cc.winSize.height/2);this.bg.color = Colors.gameBg;// 頂部背景層this.topBg.width = cc.winSize.width-30;this.topBg.height = 100;this.topBg.setPosition(-cc.winSize.width/2+15,(cc.winSize.width-30)/2);// 能量條背景層this.powerBarBg.width = cc.winSize.width-30;this.powerBarBg.height = this.powerBarBg.width/5/2;this.powerBarBg.setPosition(15-cc.winSize.width/2,this.topBg.getPositionY()-200);this.powerBarBg.color = Colors.powerBarBg;// 方塊背景層this.tileBg.width = cc.winSize.width-30;this.tileBg.height = this.tileBg.width;this.tileBg.setPosition(15-cc.winSize.width/2,this.powerBarBg.getPositionY()-10-this.tileBg.height);this.tileBg.color = Colors.tileBg;// 生成能量條for(var i=0;i<5;i++){var power = cc.instantiate(this.powerPre);power.width = (this.powerBarBg.width-30)/5;power.height = this.powerBarBg.height-10;this.powerBarBg.addChild(power);power.setPosition(5+(5+power.width)*i+power.width/2,5+power.height/2);power.color = Colors.power;this.powers[i] = power;};// 生成初始方塊for(var row=0;row<5;row++){for(var col = 0;col<5;col++){var tile = cc.instantiate(this.tilePre);tile.getComponent("Tile").game = this;tile.width = (this.tileBg.width-30)/5;tile.height = (this.tileBg.height-30)/5;var count = 0;var maxRandom = 5;var randomNum = 0;while(true){count++;var arr = new Array();var scanArr = new Array();if(count>10){maxRandom++;}randomNum = Math.ceil(Math.random()*maxRandom);tile.getComponent("Tile").setNum(randomNum,false,false);tile.setPosition(5+(5+tile.width)*col+tile.width/2,5+(5+tile.height)*row+tile.height/2);this.tiles[row][col] = tile;this.scanAround(row,col,-1,-1,randomNum,arr,scanArr);if(arr.length<3){break;}}tile.getComponent("Tile").setArrPosition(row,col);this.tileBg.addChild(tile);}} }

2).掃描邏輯
前面已經(jīng)講過
3).主要操作邏輯
在這個函數(shù)中，我們需要對指定的點進行掃描，如果相鄰數(shù)超過三個，則進行合成動作，然后更新分?jǐn)?shù)，將所有的方塊向下移動填補，并補充一條能量條，增加連擊次數(shù)

operateLogic:function(touchRow,touchCol,curNum,isFirstCall){var arr = new Array();var scanArr = new Array();this.scanAround(touchRow,touchCol,-1,-1,curNum,arr,scanArr);if(arr.length>=3){var addScore = 0;for(var index in arr){var row = arr[index].split("#")[0];var col = arr[index].split("#")[1];addScore += parseInt(this.tiles[row][col].getComponent("Tile").numLabel.string*10);if(row!=touchRow||col!=touchCol){// 執(zhí)行銷毀動作 this.tiles[row][col].getComponent("Tile").destoryTile();this.tiles[row][col] = null;}else{this.tiles[row][col].getComponent("Tile").setNum(curNum+1,false,true);this.maxNum = curNum+1>this.maxNum?curNum+1:this.maxNum;}}// 更新分?jǐn)?shù)this.scoreNum.string = parseInt(this.scoreNum.string)+addScore;this.scheduleOnce(function() {// 0.1s后所有方塊向下移動this.moveAllTileDown();},0.1);if(!isFirstCall){// 能量條補充一格for(var i=0;i<5;i++){if(this.powers[i]==null){var power = cc.instantiate(this.powerPre);power.width = (this.powerBarBg.width-30)/5;power.height = this.powerBarBg.height-10;this.powerBarBg.addChild(power);power.setPosition(5+(5+power.width)*i+power.width/2,5+power.height/2);power.color = Colors.power;power.setScale(0);power.runAction(cc.scaleTo(0.1,1));this.powers[i] = power;break;}};}// 連擊次數(shù)+1Global.combo++;// cc.log("連擊次數(shù)："+Global.combo);// 播放音效switch(Global.combo){case 1:cc.audioEngine.playEffect(this.star1);break;case 2:cc.audioEngine.playEffect(this.star2);break;case 3:cc.audioEngine.playEffect(this.star3);break;case 4:cc.audioEngine.playEffect(this.star4);break;case 5:cc.audioEngine.playEffect(this.star5);break;case 6:cc.audioEngine.playEffect(this.star6);break;case 7:cc.audioEngine.playEffect(this.star7);break;default:cc.audioEngine.playEffect(this.star7);break;}return true;}else{this.isCal = false;}return false; }

4).所有方塊向下移動
除了上文提到所有方塊的移動算法之外，在移動完成之后，還需要進行新產(chǎn)生一批方塊，并再次判斷消除邏輯的操作

moveAllTileDown:function(){for (var col = 0; col < 5; col++) {for (var row = 0; row < 5; row++) {if (this.tiles[row][col] != null) {// 有方塊for (var row1 = row; row1 > 0; row1--) {if (this.tiles[row1 - 1][col] == null){//如果沒有向下移動this.tiles[row1 - 1][col] = this.tiles[row1][col];this.tiles[row1][col] = null;this.tiles[row1 - 1][col].getComponent("Tile").moveTo(row1 - 1, col);}}}}}this.scheduleOnce(function() {// 0.3s后生成新方塊for (var col = 0; col < 5; col++) {for (var row = 0; row < 5; row++) {if(this.tiles[row][col]==null){var tile = cc.instantiate(this.tilePre);tile.getComponent("Tile").game = this;tile.width = (this.tileBg.width-30)/5;tile.height = (this.tileBg.height-30)/5;var maxRandom = this.maxNum;var randomNum = Math.ceil(Math.random()*maxRandom);tile.getComponent("Tile").setNum(randomNum,false,false);tile.getComponent("Tile").newTile(row,col);this.tiles[row][col] = tile;this.tileBg.addChild(tile);}}}// 0.5s后遍歷執(zhí)行邏輯this.scheduleOnce(function() {var isSearch = false;for (var col = 0; col < 5; col++) {for (var row = 0; row < 5; row++) {if(!isSearch){isSearch = this.tiles[row][col]!=null&&this.operateLogic(row,col,parseInt(this.tiles[row][col].getComponent("Tile").numLabel.string),false);}}}}, 0.5); }, 0.3); }

五、運行效果

最后的運行效果如下

通過CVP平臺的項目托管可看到實際運行效果，地址如下：

• 由于個人對Cocos Creator的適配還不大了解，在pc上運行時，需要使用chrome的手機調(diào)試預(yù)覽（或者將chrome窗口調(diào)至手機屏幕大小），但是如果直接用手機打開，loadScene似乎又有不兼容的問題，至今無法理解，還請大神指點，而我無論是開發(fā)時的預(yù)覽，還是通過xcode打包到我的iPhone6s Plus手機運行，都是完全沒有問題。不知道是不是Creator的h5兼容還沒有做好，又或者我哪里的技術(shù)沒有掌握全面。
  http://www.cocoscvp.com/usercode/946fc5fd5d2c77331cc344ea1e4bfdd04630cf85/

六、源代碼

所有源代碼均上傳到github，歡迎交流學(xué)習(xí)，地址：
https://github.com/hjcenry/addone

• 原文博客：http://hjcenry.github.io

轉(zhuǎn)載于:https://www.cnblogs.com/hjcenry/p/5856952.html

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的Cocos Creator实现的《点我+1》的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。