flappy bird游戏源代码揭秘和下载

2014-2-12 11:58| 发布者: 红黑魂| 查看: 8899| 评论: 0|原作者: touchsnow|来自: csdn博客

摘要: 背景：最近火爆全球的游戏flappy bird让笔者叹为观止，于是花了一天的时间山寨了一个一模一样的游戏，现在把游戏的思路和源码分享出来，代码是基于javascript语言，cocos2d-x游戏引擎，cocos2d-x editor手游开发工 ...

背景：

最近火爆全球的游戏飞扬的编辑手游开发工具完成的，请读者轻砸;

PS：运行演示必须配置好的cocos2d-X的编辑器，暂不支持其他工具

代码下载：

CSDN下载：http://download.csdn.net/detail/touchsnow/6912707

百度云盘：http://pan.baidu.com/s/1pJnWDb9

金山快盘：http://www.kuaipan.cn/file/id_25348935635745384.htm?source=1

效果图：

开发工具：

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

cocos2dx编辑器介绍和教程：http://blog.csdn.net/touchsnow/article/details/19070665 ;

cocos2dx编辑器官方博客：http://blog.makeapp.co/?cat=8 ;

思路和源码：

1场景设计MainLayer.ccbx，如下图；主要分三层，开始场景、主场景、游戏结束场景，通过显示隐藏控制三个场景的切换。

MainLayer.ccbx代码

[HTML] 鉴于普通副本
XML  版本= “1.0”  编码= “UTF-8” ？>  
  
< 文件  
        jsControlled = “真”  
        jsController = “MainLayer”  
        分辨率= “默认”  
        >  
  
    < 决议>  
        < 分辨率 centeredOrigin = “假”  转= “iphone”  高度= “1280”  宽度= “720”  名称= “默认”  规模= “1” />  
        < 分辨率 centeredOrigin = “假”  转= “iphone”  高度= “720”  宽度= “1280”  名称= “默认1”  规模= “1” />  
    决议>  
  
    < 动画>  
        < 动画 将autoPlay = “真”  
                   ID = “0”  
                   名称= “默认时间轴”  
                   长度= “10”的  
                   chainedId = “0”  
                   偏移= “0.0”  
                   位置= “0.0”  
                   分辨率= “30”  
                   规模= “128” >  
            < CallbackChannel >  
            CallbackChannel >  
            < 的SoundChannel >  
            的SoundChannel >  
        动画>  
  
    动画>  
    < 层  
            positionX = “0”  位置▲ = “0.0”  
            的SizeType = “百分比”  
            宽度= “100”  高度= “100”  
            anchorPointX = “0.5”  anchorPointY = “0.5”  ignoreAnchorPoint = “真”  
            将scaleX = “1”  的scaleY = “1”  
            >  
  
      < Sprite  positionType = "LeftBottom"  width = "720.0"  height = "1280.0"  positionX = "0"  positionY = "0"  anchorPointX = "0"  
                                         anchorPointY = “0”  SRC = “资源/ bg.png”  名字= “”  无功= “”  目标= “无”  的scaleX = “1”  的scaleY = “1”  可见= “真” />  
      < LayerColor  positionType = "LeftBottom"  width = "720"  height = "1280"  positionX = "0"  positionY = "0"  anchorPointX = "0"  
                  anchorPointY = “0”  颜色= “＃fff2e8ff”  可见= “假” />  
      < Menu  positionType = "LeftBottom"  width = "40"  height = "40"  positionX = "356.0"  positionY = "237.0"  anchorPointX = "0.5"  
              anchorPointY = “0.5”  将scaleX = “2.4”  的scaleY = “1.725” >  
      菜单>  
      < Sprite  positionType = "LeftBottom"  width = "840.0"  height = "281.0"  positionX = "0"  positionY = "0"  anchorPointX = "0"  
                                         anchorPointY = “0”  SRC = “资源/ ground.png”  无功= “地面”  目标= “文件” />  
      < 节点 positionType = “LeftBottom”  宽度= “40”  高度= “40”  positionX = “800”  位置▲ = “250”  anchorPointX = “0”  
            anchorPointY = “0”  风险值= “hoseNode”  目标= “文件” >  
        < Sprite  positionType = "LeftBottom"  width = "86.0"  height = "60.0"  positionX = "-500"  positionY = "400"  anchorPointX = "0.5"  
                                         anchorPointY = "0.5"  src = "Resources/flappy_packer.plist/bird3.png"  var = "test"  target = "Doc"  visible = "false" />  
        < Sprite  positionType = "LeftBottom"  width = "86.0"  height = "60.0"  positionX = "-550"  positionY = "500"  anchorPointX = "0.5"  
                anchorPointY = "0.5"  src = "Resources/flappy_packer.plist/bird1.png"  var = "bird"  target = "Doc"  scaleX = "1"  scaleY = "1"  rotation = "0"  visible = "true" />  
      节点>  
      < Node  positionType = "LeftBottom"  width = "40"  height = "40"  positionX = "303.0"  positionY = "500"  anchorPointX = "0.5"  
            anchorPointY = “0.5”  变种= “readyNode”  目标= “文件”  可见= “真” >  
        < Sprite  positionType = "LeftBottom"  width = "508.0"  height = "158.0"  positionX = "95.0"  positionY = "584.0"  anchorPointX = "0.5"  
                                         anchorPointY = “0.5”  SRC = “资源/ flappy_packer.plist / getready.png” />  
        < Sprite  positionType = "LeftBottom"  width = "286.0"  height = "246.0"  positionX = "73.0"  positionY = "236.0"  anchorPointX = "0.5"  
                                         anchorPointY = “0.5”  SRC = “资源/ flappy_packer.plist / click.png” />  
      节点>  
      < 节点 positionType = “LeftBottom”  宽度= “40”  高度= “40”  positionX = “300”  位置▲ = “500”  anchorPointX = “0.5”  
            anchorPointY = “0.5”  变种= “overNode”  目标= “文件”  可见= “真” >  
        < Sprite  positionType = "LeftBottom"  width = "590.0"  height = "298.0"  positionX = "72.0"  positionY = "219.0"  anchorPointX = "0.5"  
                                         anchorPointY = “0.5”  SRC = “资源/ flappy_packer.plist / base.png” >  
          < Sprite  positionType = "LeftBottom"  width = "508.0"  height = "158.0"  positionX = "286.0"  positionY = "458.0"  anchorPointX = "0.5"  
                                         anchorPointY = “0.5”  SRC = “资源/ flappy_packer.plist / gameover.png” />  
        雪碧>  
        < 菜单 positionType = “LeftBottom”  宽度= “40”  高度= “40”  positionX = “0”  位置▲ = “0”  anchorPointX = “0.5”  
              anchorPointY = “0.5” >  
          < MenuItem  positionType = "LeftBottom"  width = "290"  height = "176"  positionX = "-65.0"  positionY = "-92.0"  anchorPointX = "0.5"  
                    anchorPointY = "0.5"  normalImage = "Resources/flappy_packer.plist/start.png"  target = "Doc"  onClick = "onStartClicked" />  
          < MenuItem  positionType = "LeftBottom"  width = "290"  height = "176"  positionX = "230.0"  positionY = "-92.0"  anchorPointX = "0.5"  
                    anchorPointY = "0.5"  target = "Doc"  normalImage = "Resources/flappy_packer.plist/grade.png"  onClick = "onGradeClicked" />  
        菜单>  
      节点>  
    图层>  
  
  
文档>  

2代码编写MainLayer.js

首先，小鸟在向前飞，其实是底部的路和水管在向左移动，相对的你就感觉小鸟在向右飞了；路循环移动代码：

[浏览器] 鉴于普通副本
MainLayer.prototype.groundRun =  函数 （）  
{  
    无功 动作1 = cc.MoveTo.create（0.5，cc.p（-120，0））;  
    变种 动作2 = cc.MoveTo.create（0，cc.p（0，0））;  
    变种 行动= cc.Sequence.create（动作1，动作2）;  
    这ground.runAction（cc.RepeatForever.create（行动））;  
}  

初始化高低不同的水管，每一关卡都由上下两水管和空隙组成。总长度相同，空隙也一定，随机取下面水管的长度，就形成错落有致的水管关卡；

[浏览器] 鉴于普通副本
MainLayer.prototype.newHose =  功能 （NUM）  
{  
    无功 hoseHeight = 830;  
    无功 acrossHeight = 300;  
    无功 downHeight = 100 +次getRandom（400）;  
    无功 upHeight = 1100 - downHeight - acrossHeight;  
  
    无功 hoseX = 400 *民;  
  
    无功 HoseName = FP_MAIN_TEXTURE.HOSE;  
    无功 ccSpriteDown = cc.Sprite.createWithSpriteFrameName（HoseName [0]）;  
    ccSpriteDown.setZOrder（1）;  
    ccSpriteDown.setAnchorPoint（cc.p（0，0））;  
    ccSpriteDown.setPosition（cc.p（hoseX，0））;  
    ccSpriteDown.setScaleY（downHeight / hoseHeight）;  
  
    无功 ccSpriteUp = cc.Sprite.createWithSpriteFrameName（HoseName [1]）;  
    ccSpriteUp.setZOrder（1）;  
    ccSpriteUp.setAnchorPoint（cc.p（0，0））;  
    ccSpriteUp.setPosition（cc.p（hoseX，downHeight + acrossHeight））;  
    ccSpriteUp.setScaleY（upHeight / hoseHeight）;  
  
    这个。hoseNode.addChild（ccSpriteDown）;  
    这个。hoseNode.addChild（ccSpriteUp）;  
    这个。hoseSpriteList.push（ccSpriteDown）;  
    这个。hoseSpriteList.push（ccSpriteUp）;  
    返回 空值;  
}  

一开始进入游戏让底部路不断移动，初始化水管，显示准备游戏场景;

[浏览器] 鉴于普通副本
MainLayer.prototype.onEnter =  函数 （）  
{  
    cc.AnimationCache.getInstance（）addAnimations（ “ 资源/ flappy_frame.plist” ）;  
    此。groundRun（）;  
    此。ground.setZOrder（10）;  
    此。birdReadyAction（）;  
    此。bird.setZOrder（20）;  
    这个。readyNode.setVisible（真）;  
    这个。overNode.setVisible（假）;  
  
    为 （变种 I = 0; I <30; i + +）{  
        此。newHose（ⅰ）;  
    }  
}  

点击屏幕，小鸟向上飞60dp,然后更快的速度下落（移动动画），同时闪动翅膀（帧动画）；

[浏览器] 鉴于普通副本
MainLayer.prototype.birdRiseAction =  函数 （）  
{  
    无功 riseHeight = 60;  
    变种 birdX =  这个bird.getPositionX（）;  
    变种 的Birdy =  这个bird.getPositionY（）;  
    变种 时间= BIRDY / 600;  
  
    无功 actionFrame = cc.Animate.create（cc.AnimationCache.getInstance（）getAnimation（ “ 飞行” ））;  
    无功 flyAction = cc.Repeat.create（actionFrame，90000）;  
    无功 riseAction1 = cc.MoveTo.create（0.2，cc.p（birdX，BIRDY + riseHeight））;  
    无功 riseAction2 = cc.RotateTo.create（0，-30）;  
    无功 riseAction = cc.Spawn.create（riseAction1，riseAction2）;  
    无功 fallAction1 = cc.MoveTo.create（时间，cc.p（birdX，50））;  
    无功 fallAction2 = cc.Sequence.create（cc.DelayTime.create（时间/ 6），cc.RotateTo.create（0，30））;  
    无功 fallAction = cc.Spawn.create（fallAction1，fallAction2）;  
  
    此。bird.stopAllActions（）;  
    这个。bird.runAction（cc.Spawn.create（  
            cc.Sequence.create（riseAction，cc.DelayTime.create（0.1），fallAction）  
            flyAction）  
    ）;  
}  

检测碰撞，如果小鸟碰到地面和水管，发生碰撞，这里碰撞直接用的cocos2d-X里面的图片和图片交叉函数cc.rectIntersectsRect;

[浏览器] 鉴于普通副本
MainLayer.prototype.checkCollision =  函数 （）  
{  
    如果 （此。bird.getPositionY（）<60）{  
        cc.log（ “ 地板” ）;  
        此。birdFallAction（）;  
        返回;  
    }  
    为 （变种 I = 0;我<  这个。hoseSpriteList.length，我+ +）{  
        变种 软管=  这个。hoseSpriteList由[i];  
        如果 （！这个。isInScreen（软管））{  
            / /继续;  
        }  
  
        如果 （cc.rectIntersectsRect（hose.getBoundingBox（），  此。bird.getBoundingBox（）））{  
            cc.log（ “ 软管positionX ==”  + hose.getBoundingBox（）×）;  
            cc.log（“this.bird positionX ==”  +  此。bird.getBoundingBox（）×）;  
            cc.log（ “ 我==”  + I）;  
            cc.log（“birdFallAction” ）;  
            此。birdFallAction（）;  
            返回;  
        }  
    }  
}  

碰撞后，小鸟先下落，游戏结束场景显示;

[浏览器] 鉴于普通副本
MainLayer.prototype.birdFallAction =  函数 （）  
{  
    这个游戏模式= OVER了。;  
    此。bird.stopAllActions（）;  
    此。ground.stopAllActions（）;  
    变种 birdX =  这个bird.getPositionX（）;  
    变种 的Birdy =  这个bird.getPositionY（）;  
    变种 时间= BIRDY / 2000;  
    这个。bird.runAction（cc.Sequence.create（  
            cc.DelayTime.create（0.1），  
            cc.Spawn.create（cc.RotateTo.create（时间，90），cc.MoveTo.create（时间，cc.p（birdX，50））））  
    ）;  
    这个。overNode.setVisible（真）;  
}  

游戏的难度主要在于多个水管的移动，小鸟触摸动画，检测碰撞，我把Mainlayer.js所有代码贴出来；

[浏览器] 鉴于普通副本
FP_MAIN_TEXTURE = {  
    FRAME_ANIMS： “ 魔豆/资源/ bs_main_anims.plist” ，  
    软管：[ “holdback1.png” ，  “holdback2.png” ]  
}  
  
READY = 1;  
START = 2;  
OVER = 3;  
  
无功 MainLayer =  函数 （）  
{  
    cc.log（“MainLayer” ）;  
    这个。鸟=  这个鸟| | {};  
    这个离地=  这个地面| | {};  
    这个。hoseNode =  这个hoseNode | | {};  
    这个。readyNode =  这个readyNode | | {};  
    这overNode =。  这overNode | | {};  
  
    这passTime = 0;  
    这hoseSpriteList = [];  
    这个。ISSTART =  假;  
  
    这个。游戏模式=待用;  
};  
  
MainLayer.prototype.onDidLoadFromCCB =  函数 （）  
{  
    如果 （sys.platform ==  '浏览器' ）{  
        此。的OnEnter（）;  
    }  
    否则 {  
        这个。rootNode.onEnter =  函数 （）  
        {  
            此。controller.onEnter（）;  
        };  
    }  
  
    这个。rootNode.schedule（函数 （DT）  
    {  
        这个。controller.onUpdate（DT）;  
    }）;  
  
    这个。rootNode.onExit =  函数 （）  
    {  
        此。controller.onExit（）;  
    };  
  
    这个。rootNode.onTouchesBegan =  功能 （触摸，事件）  
    {  
        这个。controller.onTouchesBegan（触摸，事件）;  
        返回 真;  
    };  
  
    这个。rootNode.onTouchesMoved =  功能 （触摸，事件）  
    {  
        这个。controller.onTouchesMoved（触摸，事件）;  
        返回 真;  
    };  
    这个。rootNode.onTouchesEnded =  功能 （触摸，事件）  
    {  
        这个。controller.onTouchesEnded（触摸，事件）;  
        返回 真;  
    };  
    这个。rootNode.setTouchEnabled（真）;  
};  
  
MainLayer.prototype.onEnter =  函数 （）  
{  
    cc.AnimationCache.getInstance（）addAnimations（ “ 资源/ flappy_frame.plist” ）;  
    此。groundRun（）;  
    此。ground.setZOrder（10）;  
    此。birdReadyAction（）;  
    此。bird.setZOrder（20）;  
    这个。readyNode.setVisible（真）;  
    这个。overNode.setVisible（假）;  
  
    为 （变种 I = 0; I <30; i + +）{  
        此。newHose（ⅰ）;  
    }  
}  
  
MainLayer.prototype.newHose =  功能 （NUM）  
{  
    无功 hoseHeight = 830;  
    无功 acrossHeight = 300;  
    无功 downHeight = 100 +次getRandom（400）;  
    无功 upHeight = 1100 - downHeight - acrossHeight;  
  
    无功 hoseX = 400 *民;  
  
    无功 HoseName = FP_MAIN_TEXTURE.HOSE;  
    无功 ccSpriteDown = cc.Sprite.createWithSpriteFrameName（HoseName [0]）;  
    ccSpriteDown.setZOrder（1）;  
    ccSpriteDown.setAnchorPoint（cc.p（0，0））;  
    ccSpriteDown.setPosition（cc.p（hoseX，0））;  
    ccSpriteDown.setScaleY（downHeight / hoseHeight）;  
  
    无功 ccSpriteUp = cc.Sprite.createWithSpriteFrameName（HoseName [1]）;  
    ccSpriteUp.setZOrder（1）;  
    ccSpriteUp.setAnchorPoint（cc.p（0，0））;  
    ccSpriteUp.setPosition（cc.p（hoseX，downHeight + acrossHeight））;  
    ccSpriteUp.setScaleY（upHeight / hoseHeight）;  
  
    这个。hoseNode.addChild（ccSpriteDown）;  
    这个。hoseNode.addChild（ccSpriteUp）;  
    这个。hoseSpriteList.push（ccSpriteDown）;  
    这个。hoseSpriteList.push（ccSpriteUp）;  
    返回 空值;  
}  
  
MainLayer.prototype.groundRun =  函数 （）  
{  
    无功 动作1 = cc.MoveTo.create（0.5，cc.p（-120，0））;  
    变种 动作2 = cc.MoveTo.create（0，cc.p（0，0））;  
    变种 行动= cc.Sequence.create（动作1，动作2）;  
    这ground.runAction（cc.RepeatForever.create（行动））;  
}  
  
MainLayer.prototype.birdReadyAction =  函数 （）  
{  
    变种 birdX =  这个bird.getPositionX（）;  
    变种 的Birdy =  这个bird.getPositionY（）;  
    变种 时间= BIRDY / 2000;  
    无功 actionFrame = cc.Animate.create（cc.AnimationCache.getInstance（）getAnimation（ “ 飞行” ））;  
    无功 flyAction = cc.Repeat.create（actionFrame，90000）;  
    这个。bird.runAction（cc.Sequence.create（  
            flyAction）  
    ）;  
}  
  
MainLayer.prototype.birdFallAction =  函数 （）  
{  
    这个游戏模式= OVER了。;  
    此。bird.stopAllActions（）;  
    此。ground.stopAllActions（）;  
    变种 birdX =  这个bird.getPositionX（）;  
    变种 的Birdy =  这个bird.getPositionY（）;  
    变种 时间= BIRDY / 2000;  
    这个。bird.runAction（cc.Sequence.create（  
            cc.DelayTime.create（0.1），  
            cc.Spawn.create（cc.RotateTo.create（时间，90），cc.MoveTo.create（时间，cc.p（birdX，50））））  
    ）;  
    这个。overNode.setVisible（真）;  
}  
  
MainLayer.prototype.birdRiseAction =  函数 （）  
{  
    无功 riseHeight = 60;  
    变种 birdX =  这个bird.getPositionX（）;  
    变种 的Birdy =  这个bird.getPositionY（）;  
    变种 时间= BIRDY / 600;  
  
    无功 actionFrame = cc.Animate.create（cc.AnimationCache.getInstance（）getAnimation（ “ 飞行” ））;  
    无功 flyAction = cc.Repeat.create（actionFrame，90000）;  
    无功 riseAction1 = cc.MoveTo.create（0.2，cc.p（birdX，BIRDY + riseHeight））;  
    无功 riseAction2 = cc.RotateTo.create（0，-30）;  
    无功 riseAction = cc.Spawn.create（riseAction1，riseAction2）;  
    无功 fallAction1 = cc.MoveTo.create（时间，cc.p（birdX，50））;  
    无功 fallAction2 = cc.Sequence.create（cc.DelayTime.create（时间/ 6），cc.RotateTo.create（0，30））;  
    无功 fallAction = cc.Spawn.create（fallAction1，fallAction2）;  
  
    此。bird.stopAllActions（）;  
    这个。bird.runAction（cc.Spawn.create（  
            cc.Sequence.create（riseAction，cc.DelayTime.create（0.1），fallAction）  
            flyAction）  
    ）;  
}  
  
MainLayer.prototype.onUpdate =  功能 （DT）  
{  
    如果 （这个。游戏模式！= START）{  
        返回;  
    }  
    这个。passTime + = DT;  
  
    这个。hoseNode.setPositionX（800 - 200 *  本passTime。）;  
    这个。bird.setPositionX（-500 +200 *  此passTime。）;  
    此。checkCollision（）;  
}  
  
MainLayer.prototype.checkCollision =  函数 （）  
{  
    如果 （此。bird.getPositionY（）<60）{  
        cc.log（ “ 地板” ）;  
        此。birdFallAction（）;  
        返回;  
    }  
    为 （变种 I = 0;我<  这个。hoseSpriteList.length，我+ +）{  
        变种 软管=  这个。hoseSpriteList由[i];  
        如果 （！这个。isInScreen（软管））{  
            / /继续;  
        }  
  
        如果 （cc.rectIntersectsRect（hose.getBoundingBox（），  此。bird.getBoundingBox（）））{  
            cc.log（ “ 软管positionX ==”  + hose.getBoundingBox（）×）;  
            cc.log（“this.bird positionX ==”  +  此。bird.getBoundingBox（）×）;  
            cc.log（ “ 我==”  + I）;  
            cc.log（“birdFallAction” ）;  
            此。birdFallAction（）;  
            返回;  
        }  
    }  
}  
  
MainLayer.prototype.isInScreen =  功能 （雪碧）  
{  
    返回 （sprite.getPositionX（）> 0 && sprite.getPositionX（）<720）;  
}  
  
MainLayer.prototype.onExitClicked =  函数 （）  
{  
}  
  
MainLayer.prototype.onStartClicked =  函数 （）  
{  
    。cc.Director.getInstance（）恢复（）;  
    cc.BuilderReader.runScene（ “”  ，“MainLayer” ）;  
}  
  
MainLayer.prototype.onExit =  函数 （）  
{  
    cc.log（ “ 的OnExit” ）;  
}  
  
MainLayer.prototype.onTouchesBegan =  功能 （触摸，事件）  
{  
    无功 LOC =触动[0]的getLocation（）;  
}  
  
MainLayer.prototype.onTouchesMoved =  功能 （触摸，事件）  
{  
}  
  
MainLayer.prototype.onTouchesEnded =  功能 （触摸，事件）  
{  
    如果 （这个。游戏模式== OVER）{  
        返回;  
    }  
  
    如果 （这个。游戏模式== READY）{  
        这个。游戏模式= START;  
        这个。readyNode.setVisible（假）;  
    }  
  
    无功 LOC =触动[0]的getLocation（）;  
    此。birdRiseAction（）;  
  
}  
  
功能 isInRect（ccRect，ccTouchBeganPos）  
{  
    如果 （ccTouchBeganPos.x> ccRect.x && ccTouchBeganPos.x <（ccRect.x + ccRect.width））{  
        如果 （ccTouchBeganPos.y> ccRect.y && ccTouchBeganPos.y <（ccRect.y + ccRect.height））{  
            返回 真;  
        }  
    }  
    返回 假;  
}  
  
函数 次getRandom（MAXSIZE）  
{  
    返回 Math.floor（Math.random（）有关* MAXSIZE）％MAXSIZE;  
}  