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()）;圆环顺时针，水果逆时针；

[javascript] view plaincopy

 

1. StartLayer.prototype.onEnter = function ()  
2. {  
3.     this.rings = [this.dojoRing, this.newGameRing, this.quitRing];  
4.     for (var i = 0; i < this.rings.length; i++) {  
5.         this.rings[i].runAction(cc.RepeatForever.create(cc.RotateBy.create(1, -90)));  
6.     }  
7.   
8.     this.fruits = [this.dojoFruit, this.newGameFruit, this.quitFruit];  
9.     for (var j = 0; j < this.fruits.length; j++) {  
10.         this.fruits[j].runAction(cc.RepeatForever.create(cc.RotateBy.create(5, 90)));  
11.     }  
12.   
13.     cc.AudioEngine.getInstance().playEffect(FRUIT_SOUNDS.menu, true);  
14.     this.isFlash = false;  
15. };  

2 切掉绿色西瓜进入主场景；

#西瓜包括两个西瓜碎片，触摸的瞬间，西瓜消失，两个碎片san0，san1产生；并各自执行不同的移动动画，并动画结束后cleanup；

#触摸的瞬间也产生刀锋的效果 cc.MySprite.createFlash(this.rootNode, "flash.png", this.pBegin, loc);

#0.5s执行延迟函数进入主场景this.rootNode.scheduleOnce；

[javascript] view plaincopy

 

1. StartLayer.prototype.onTouchesMoved = function (touches, event)  
2. {  
3.     var loc = touches[0].getLocation();  
4.     if (cc.rectContainsPoint(this.newGameFruit.getBoundingBox(), loc)) {  
5.         var sandiaImages = ["sandia-1.png", "sandia-2.png"];  
6.         var fruitPosition = this.newGameFruit.getPosition();  
7.   
8.         var san0 = cc.MySprite.create(this.rootNode, sandiaImages[0], fruitPosition, 100);  
9.         var san1 = cc.MySprite.create(this.rootNode, sandiaImages[1], fruitPosition, 100);  
10.         this.newGameFruit.runAction(cc.ScaleTo.create(0, 0));  
11.         var rotation = this.newGameFruit.getRotation();  
12.         cc.log("rotation==" + rotation);  
13.         san0.setRotation(rotation);  
14.         san1.setRotation(rotation);  
15.         cc.AudioEngine.getInstance().playEffect(FRUIT_SOUNDS.splatter, false);  
16.   
17.         var upSprite = san0;  
18.         var downSprite = san1;  
19.         var fruitX = fruitPosition.x;  
20.         var fruitY = fruitPosition.y;  
21.         upSprite.runAction(cc.Sequence.create(  
22.                 cc.MoveTo.create(0.2, cc.p(fruitX - 50, fruitY + 50)),  
23.                 cc.CleanUp.create(upSprite)  
24.         ));  
25.         downSprite.runAction(cc.Sequence.create(  
26.                 cc.MoveTo.create(0.2, cc.p(fruitX + 50, fruitY - 50)),  
27.                 cc.CleanUp.create(downSprite)  
28.         ));  
29.   
30.         if (this.isFlash == false) {  
31.             this.isFlash = true;  
32.             cc.MySprite.createFlash(this.rootNode, "flash.png", this.pBegin, loc);  
33.         }  
34.   
35.         this.rootNode.scheduleOnce(function ()  
36.         {  
37.             cc.AudioEngine.getInstance().stopAllEffects();  
38.             cc.BuilderReader.runScene("", "MainLayer");  
39.         }, 0.5);  
40.     }  
41. }  

3  产生刀锋函数，主要是根据pBegin和pEnd两个点计算旋转角度，简单的数学应用；以前不知道学数学干嘛，现在知道了；

[javascript] view plaincopy

 

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

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);

#播放抛出音效；

[javascript] view plaincopy

 

1. MainLayer.prototype.newFruit = function ()  
2. {  
3.     //create new fruit per 0.5s  
4.     var random = getRandom(FRUIT_DATA.length);  
5.     var data = FRUIT_DATA[random];  
6.     var fruit = cc.Sprite.createWithSpriteFrameName(data.fruitImage);  
7.     var x = 300 + getRandomOffset(200);  
8.     fruit.setPosition(cc.p(x, -100));  
9.     fruit.setAnchorPoint(cc.p(0.5, 0.5));  
10.     this.fruitZOrder -= 1;  
11.     fruit.setZOrder(this.fruitZOrder);  
12.     fruit.cleanuped = false;  
13.     fruit.num = data.num;  
14.     var offSetX = getRandomOffset(100);  
15.     var topY = 900 + getRandom(100);  
16.     var controlPoints = [  
17.         cc.p(x, -100),  
18.         cc.p(x - offSetX, topY),  
19.         cc.p(x - offSetX * 2, -100)  
20.     ];  
21.     var fruitTime = 3;  
22.     var bezier = cc.BezierTo.create(fruitTime, controlPoints);  
23.     var action2 = cc.RotateBy.create(fruitTime, getRandom(360));  
24.     var upActions = cc.Spawn.create(cc.Sequence.create(bezier, cc.CleanUp.create(fruit)), action2);  
25.     fruit.runAction(upActions);  
26.     this.rootNode.addChild(fruit);  
27.     this.fruitList.push(fruit);  
28.     cc.AudioEngine.getInstance().playEffect(FRUIT_SOUNDS.throw, false);  
29. };  

5 每隔一段时间抛出一个newFruit，只要在update更新函数里面编写就行；

如果当前时间距离上一个水果产生时间为0.5s，就又产生一个，周次循环，不断产生水果

[javascript] view plaincopy

 

1. if (this.currentTime - this.lastFruitTime > 0.5) {  
2.         this.newFruit();  
3.         this.lastFruitTime = this.currentTime;  
4.     }  

上篇就这些，over；

CocosEditor开发工具：

CocosEditor，它是开发跨平台的手机游戏工具，运行window/mac系统上，javascript脚本语言，基于cocos2d-x跨平台游戏引擎, 集合代码编辑，场景设计，动画制作，字体设计，还有粒子，物理系统，地图等等的，而且调试方便，和实时模拟；

CocosEditor 下载，介绍和教程：http://blog.****.net/touchsnow/article/details/19070665；

CocosEditor官方博客：http://blog.makeapp.co/；