Fruit Ninja(水果忍者)遊戲原始碼下載、分析（上）---可運行Android，Ios，Window，Mac，Html5平台

背景：

   本來打算下一個遊戲是塗鴉跳躍的，因為圖片資源沒準備好，暫時往後延遲。剛好筆者手頭上有部分水果忍者的遊戲素材，於是上周末花了一些時間把水果忍者實現了；以前讀大學的時候這款遊戲就風靡大街小巷，記得當時同學間也比賽誰得的分數高，樂趣無窮；筆者在那會還沒學過編程，很難理解切西瓜是怎麼做出來，現在此一時彼一時了。 

   因為素材有限，實現的效果可能和原版有差距，例外很多童鞋反映flappy，popstar和原版不同，筆者在此說明：因為是學習demo，差距肯定是有的，好的遊戲需要讀者精雕細琢，把握好每一個參數和細節，都是需要花時間的。

   本系列共有上中下三篇，源碼基本完成，分析分為三篇；

ps：

1  CocosEditor發行新版本，現在提供6個實戰demo學習，包括flappy ，popstar ，fruitninja，moonwarroris，fruitattack，testjavascript；

2  運行demo需要配置好CocosEditor，暫不支援其他工具。demo是跨平台的，可移植運行android，ios，html5網頁等，代碼是基於javascript語言，cocos2d-x遊戲引擎，CocosEditor手遊開發工具完成的。

原始碼下載：

請到代碼集中營下載(水果忍者 )：http://blog.makeapp.co/?p=319

不同平台下的：

windows

html5網頁

android平台

       

程式碼分析：

實戰項目裡面ccbx情境都是略過的，主要放在代碼這塊，水果忍者主要有兩個情境，一個開始情境StarLayer和主情境MainLayer；

1 StartLayer.js裡面有三個按鈕，道場，開始，退出。道場功能未去實現，點擊開始進入主情境MainLayer；StarLayer裡面主要處理三個選項的旋轉動畫，如下直接無限迴圈旋轉cc.RepeatForever.create(cc.RotateBy.create()）;圓環順時針，水果逆時針；

StartLayer.prototype.onEnter = function (){    this.rings = [this.dojoRing, this.newGameRing, this.quitRing];    for (var i = 0; i < this.rings.length; i++) {        this.rings[i].runAction(cc.RepeatForever.create(cc.RotateBy.create(1, -90)));    }    this.fruits = [this.dojoFruit, this.newGameFruit, this.quitFruit];    for (var j = 0; j < this.fruits.length; j++) {        this.fruits[j].runAction(cc.RepeatForever.create(cc.RotateBy.create(5, 90)));    }    cc.AudioEngine.getInstance().playEffect(FRUIT_SOUNDS.menu, true);    this.isFlash = false;};

2 切掉綠色西瓜進入主情境；

#西瓜包括兩個西瓜片段，觸摸的瞬間，西瓜消失，兩個片段san0，san1產生；並各自執行不同的移動動畫，並動畫結束後cleanup；

#觸摸的瞬間也產生刀鋒的效果 cc.MySprite.createFlash(this.rootNode, "flash.png", this.pBegin, loc);

#0.5s執行延遲函數進入主情境this.rootNode.scheduleOnce；

StartLayer.prototype.onTouchesMoved = function (touches, event){    var loc = touches[0].getLocation();    if (cc.rectContainsPoint(this.newGameFruit.getBoundingBox(), loc)) {        var sandiaImages = ["sandia-1.png", "sandia-2.png"];        var fruitPosition = this.newGameFruit.getPosition();        var san0 = cc.MySprite.create(this.rootNode, sandiaImages[0], fruitPosition, 100);        var san1 = cc.MySprite.create(this.rootNode, sandiaImages[1], fruitPosition, 100);        this.newGameFruit.runAction(cc.ScaleTo.create(0, 0));        var rotation = this.newGameFruit.getRotation();        cc.log("rotation==" + rotation);        san0.setRotation(rotation);        san1.setRotation(rotation);        cc.AudioEngine.getInstance().playEffect(FRUIT_SOUNDS.splatter, false);        var upSprite = san0;        var downSprite = san1;        var fruitX = fruitPosition.x;        var fruitY = fruitPosition.y;        upSprite.runAction(cc.Sequence.create(                cc.MoveTo.create(0.2, cc.p(fruitX - 50, fruitY + 50)),                cc.CleanUp.create(upSprite)        ));        downSprite.runAction(cc.Sequence.create(                cc.MoveTo.create(0.2, cc.p(fruitX + 50, fruitY - 50)),                cc.CleanUp.create(downSprite)        ));        if (this.isFlash == false) {            this.isFlash = true;            cc.MySprite.createFlash(this.rootNode, "flash.png", this.pBegin, loc);        }        this.rootNode.scheduleOnce(function ()        {            cc.AudioEngine.getInstance().stopAllEffects();            cc.BuilderReader.runScene("", "MainLayer");        }, 0.5);    }}

3  產生刀鋒函數，主要是根據pBegin和pEnd兩個點計算旋轉角度，簡單的數學應用；以前不知道學數學幹嘛，現在知道了；

cc.MySprite.createFlash = function (node, name, pBegin, pEnd){    var flash = cc.MySprite.create(node, name, pEnd, 3000);    var ratio = (pEnd.y - pBegin.y) / (pEnd.x - pBegin.x);    var angle = (Math.atan(ratio) / (Math.PI)) * 180;    flash.setRotation(-angle);    flash.setScale(0.5);    flash.runAction(cc.Sequence.create(cc.DelayTime.create(0.2), cc.CleanUp.create(flash)));    return flash;};

4 進入主情境MainLayer，需要每隔一段時間產生向上拋的水果newFruit；

#從水果數組裡面隨機取一個水果getRandom(FRUIT_DATA.length)

#建立水果精靈，初識位置 x隨機取，y的話在螢幕下方-100，fruit.setPosition(cc.p(x, -100));；

#設定水果的各種屬性zorder，num等；

#建立一個貝茲路徑控制數組，有三個點，決定一條曲線var controlPoints = [
        cc.p(x, -100),
        cc.p(x - offSetX, topY),
        cc.p(x - offSetX * 2, -100)
    ]; 又是數學的應用；

#讓水果同時實現貝茲路徑動畫和旋轉動畫

#水果數組添加該水果，主要用於後面的水果切除檢測 this.fruitList.push(fruit);

#播放拋出音效；

MainLayer.prototype.newFruit = function (){    //create new fruit per 0.5s    var random = getRandom(FRUIT_DATA.length);    var data = FRUIT_DATA[random];    var fruit = cc.Sprite.createWithSpriteFrameName(data.fruitImage);    var x = 300 + getRandomOffset(200);    fruit.setPosition(cc.p(x, -100));    fruit.setAnchorPoint(cc.p(0.5, 0.5));    this.fruitZOrder -= 1;    fruit.setZOrder(this.fruitZOrder);    fruit.cleanuped = false;    fruit.num = data.num;    var offSetX = getRandomOffset(100);    var topY = 900 + getRandom(100);    var controlPoints = [        cc.p(x, -100),        cc.p(x - offSetX, topY),        cc.p(x - offSetX * 2, -100)    ];    var fruitTime = 3;    var bezier = cc.BezierTo.create(fruitTime, controlPoints);    var action2 = cc.RotateBy.create(fruitTime, getRandom(360));    var upActions = cc.Spawn.create(cc.Sequence.create(bezier, cc.CleanUp.create(fruit)), action2);    fruit.runAction(upActions);    this.rootNode.addChild(fruit);    this.fruitList.push(fruit);    cc.AudioEngine.getInstance().playEffect(FRUIT_SOUNDS.throw, false);};

5 每隔一段時間拋出一個newFruit，只要在update更新函數裡面編寫就行；

如果目前時間距離上一個水果產生時間為0.5s，就又產生一個，周次迴圈，不斷產生水果

if (this.currentTime - this.lastFruitTime > 0.5) {        this.newFruit();        this.lastFruitTime = this.currentTime;    }

上篇就這些，over；

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/；

FruitNinja系列文章

Fruit Ninja(水果忍者)遊戲原始碼下載、分析（上）

Fruit Ninja(水果忍者)遊戲原始碼下載、分析（中）

Fruit Ninja(水果忍者)遊戲原始碼下載、分析（下）

傳送門（優質博文）：

flappy bird遊戲原始碼揭秘和下載

flappy bird遊戲原始碼揭秘和下載後續---移植到android真機上

flappy bird遊戲原始碼揭秘和下載後續---移植到html5網頁瀏覽器

flappy bird遊戲原始碼揭秘和下載後續---日進5萬美元的秘訣AdMob廣告 

PopStar(消滅星星)遊戲原始碼下載、分析及跨平台移植---第一篇（介面） 

PopStar(消滅星星)遊戲原始碼下載、分析及跨平台移植---第二篇（演算法） 

PopStar(消滅星星)遊戲原始碼下載、分析及跨平台移植---第三篇（分數）  

PopStar(消滅星星)遊戲原始碼下載、分析及跨平台移植---第四篇（關卡） 

筆者語：

想瞭解更多請進入官方部落格，最新部落格和代碼在官方部落格首發；請持續關注，還有更多CocosEditor遊戲源碼即將放出；

聯絡筆者：zuowen@makeapp.co（郵箱） qq群：232361142