Fruit Ninja(水果忍者)遊戲源代碼下載、分析(中)---可運行Android,Ios,Window,Mac,Html5平臺

背景:

  上一篇,已經實現了水果不斷向上拋的效果和開始界面,這一篇我們將分析如何切水果,獲得分數;運行demo需要配置好CocosEditor,暫不支持其他工具。demo是跨平臺的,可移植運行android,ios,html5網頁等,代碼是基於javascript語言,cocos2d-x遊戲引擎,CocosEditor手遊開發工具完成的。



源代碼下載:

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



不同平臺下的效果圖:


windows

SouthEast



html5網頁

SouthEast


android平臺


SouthEast


SouthEast



代碼分析:


1 創建水果靜態數組,每一個水果都有四個參數,編號,分數,本身的圖片,切除後的碎片;這裏定義好了,下面直接用;


[javascript]view plaincopy在CODE上查看代碼片派生到我的代碼片
  1. FRUIT_DATA = [  

  2.    {  

  3.        num: 0,  

  4.        score: 1,  

  5.        fruitImage: "apple.png",  

  6.        cutImage: ["apple-1.png", "apple-2.png"]  

  7.    },  

  8.    {  

  9.        num: 1,  

  10.        score: 2,  

  11.        fruitImage: "banana.png",  

  12.        cutImage: ["banana-1.png", "banana-2.png"]  

  13.    },  

  14.    {  

  15.        num: 2,  

  16.        score: 2,  

  17.        fruitImage: "basaha.png",  

  18.        cutImage: ["basaha-1.png", "basaha-2.png"]  

  19.    },  

  20.    {  

  21.        num: 3,  

  22.        score: 3,  

  23.        fruitImage: "peach.png",  

  24.        cutImage: ["peach-1.png", "peach-2.png"]  

  25.    },  

  26.    {  

  27.        num: 4,  

  28.        score: 5,  

  29.        fruitImage: "sandia.png",  

  30.        cutImage: ["sandia-1.png", "sandia-2.png"]  

  31.    },  

  32.    {  

  33.        num: 5,  

  34.        score: 0,  

  35.        fruitImage: "boom.png",  

  36.        cutImage: "boomlight1.png"

  37.    }  

  38. ];  





2 檢測碰撞事件;

# 觸摸有onTouchBegan和onTouchMoved,這是兩個點,可以確定刀鋒的方向,上一節已講過;var flash = cc.MySprite.createFlash(this.rootNode, "flash.png", this.pBegin, loc);

# 首先檢查碰撞,水果和移動點發生碰撞cc.rectContainsPoint(fruit.getBoundingBox(), loc)

#如果碰撞,播放音效;playEffect;

#創建flash

#水果消失,併產生切成兩半 fruit slice

#根據水果的數據獲得分數提示 scoretip



[javascript]view plaincopy在CODE上查看代碼片派生到我的代碼片
  1. MainLayer.prototype.onTouchesMoved = function (touches, event)  

  2. {  

  3. if (this.gameStatus == OVER) {  

  4. return;  

  5.    }  

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

  7. for (var i = 0; i < this.fruitList.length; i++) {  

  8. var fruit = this.fruitList[i];  

  9. if (fruit && fruit.cleanuped == false) {  

  10. if (cc.rectContainsPoint(fruit.getBoundingBox(), loc)) {  

  11. //splatter audio

  12.                cc.AudioEngine.getInstance().playEffect(FRUIT_SOUNDS.splatter, false);  

  13. //flash

  14. var flash = cc.MySprite.createFlash(this.rootNode, "flash.png", this.pBegin, loc);  

  15. //Fruit Slice

  16. this.newSliceFruit(fruit.num, fruit.getPosition(), flash.getRotation());  

  17.                fruit.runAction(cc.ScaleTo.create(0, 0));  

  18.                fruit.cleanuped = true;  

  19. //scoreTip

  20. var fruitScore = FRUIT_DATA[fruit.num].score;  

  21. this.scoreTip(fruit.getPosition(), fruitScore + "");  

  22. this.totalScore += Number(fruitScore);  

  23. this.totalScoreFont.setString(this.totalScore);  

  24.            }  

  25.        }  

  26. else {  

  27. this.fruitList.splice(i, 1);  

  28.        }  

  29.    }  

  30. };  




3 水果切成兩半的方法

#三個參數 水果編號num,切除的位置fruitPosition ,旋轉角度rotation;

#從數組取出水果兩個碎片圖片,並創建兩個cut1 cut2精靈

#創建兩個cut的貝塞爾動作bezier1 bezier2,方向是相反的

#兩個cut 分別runAction();

#本來切除的瞬間有一個果汁濺在牆上的效果shadow,因爲沒找到合適的圖片 代碼註釋掉了


[javascript]view plaincopy在CODE上查看代碼片派生到我的代碼片
  1. MainLayer.prototype.newSliceFruit = function (num, fruitPosition, rotation)  

  2. {  

  3. //one fruit sliced two piece,cut1 and cut2

  4. var data = FRUIT_DATA[num];  

  5. var cutImages = data.cutImage;  

  6. var cut1 = cc.MySprite.create(this.rootNode, cutImages[0], fruitPosition, 100);  

  7. var cut2 = cc.MySprite.create(this.rootNode, cutImages[1], fruitPosition, 100);  

  8.    cut1.setRotation(rotation);  

  9.    cut2.setRotation(rotation);  

  10. var controlPoints1 = [  

  11.        fruitPosition,  

  12.        fruitPosition,  

  13.        cc.p(fruitPosition.x - 200, -100)  

  14.    ];  

  15. var bezier1 = cc.BezierTo.create(1, controlPoints1);  

  16. var controlPoints2 = [  

  17.        fruitPosition,  

  18.        fruitPosition,  

  19.        cc.p(fruitPosition.x + 200, -100)  

  20.    ];  

  21. var bezier2 = cc.BezierTo.create(1, controlPoints2);  

  22. var action2 = cc.RotateBy.create(1, getRandom(360));  

  23.    cut1.runAction(cc.Spawn.create(cc.Sequence.create(bezier1, cc.CleanUp.create(cut1)), action2));  

  24.    cut2.runAction(cc.Spawn.create(cc.Sequence.create(bezier2, cc.CleanUp.create(cut2)), action2.clone()));  

  25. //fruit shadow

  26. /*var shadowImages = ["shadow2.png"];

  27.     var colors = [cc.c4b(200, 0, 0, 20), cc.c4b(0, 200, 0, 20), cc.c4b(0, 0, 200, 20), cc.c4b(200, 200, 0, 20)];

  28.     var shadow = cc.MySprite.create(this.rootNode, shadowImages[getRandom(shadowImages.length)], fruitPosition, 10);

  29.     shadow.setColor(colors[getRandom(colors.length)]);

  30.     shadow.setScale(0.5);

  31.     shadow.runAction(cc.Sequence.create(cc.DelayTime.create(2), cc.CleanUp.create(shadow)));*/

  32. };  





4 提示分數,這個很簡單,只是一個創建文字標籤的方法


[javascript]view plaincopy在CODE上查看代碼片派生到我的代碼片
  1. MainLayer.prototype.scoreTip = function (p, message)  

  2. {  

  3. var director = cc.Director.getInstance();  

  4. var size = director.getWinSize();  

  5. var label = cc.LabelTTF.create(message, "Arial", 30);  

  6.    label.setPosition(cc.p(p.x, p.y + 50));  

  7.    label.setColor(cc.c3b(0, 255, 0));  

  8.    label.setZOrder(10000);  

  9. this.rootNode.addChild(label);  

  10.    label.runAction(cc.Sequence.create(cc.DelayTime.create(0.8), cc.CleanUp.create(label)));  

  11. return label;  

  12. };  


這一篇就到這裏;




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/


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章