Flappy bird game source code revealing and downloading

Background:

I was amazed by the recent popular global game flappy bird, so it took me a day to copy the same game. Now I share the idea and source code of the game. The Code is based on the javascript language, cocos2d-x game engine, cocos2d-x editor mobile game development tools completed, please the reader light hit;

Download Code:

Http://www.kuaipan.cn/file/id_25348935635745384.htm? Source = 1

:

Development tools:

Cocos2dx editor, it is the development of cross-platform mobile game tools, Run window system, javascript scripting language, based on cocos2d-x cross-platform game engine, set code editing, Scene Design, animation production, font design, there are also particles, physical systems, maps, and so on, and easy debugging and real-time simulation;

Cocos2dx editor introduction and Tutorial: http://blog.csdn.net/touchsnow/article/details/41070665;

Cocos2dx-editor official blog: http://blog.makeapp.co /? Cat = 8;

Ideas and source code:

1. The scenario design MainLayer. ccbx, for example, mainly consists of three layers: Start scene, main scene, and end scene of the game. The switching between the three scenarios is controlled through display hiding.

 

MainLayer. ccbx code

<?xml version="1.0" encoding="UTF-8"?><Document        jsControlled="true"        jsController="MainLayer"        resolution="default"        >    <Resolutions>        <Resolution centeredOrigin="false" ext="iphone" height="1280" width="720" name="default" scale="1"/>        <Resolution centeredOrigin="false" ext="iphone" height="720" width="1280" name="default1" scale="1"/>    </Resolutions>    <Animations>        <Animation autoPlay="true"                   id="0"                   name="Default Timeline"                   length="10"                   chainedId="0"                   offset="0.0"                   position="0.0"                   resolution="30"                   scale="128">            <CallbackChannel>            </CallbackChannel>            <SoundChannel>            </SoundChannel>        </Animation>    </Animations>    <Layer            positionX="0" positionY="0.0"            sizeType="Percent"            width="100" height="100"            anchorPointX="0.5" anchorPointY="0.5" ignoreAnchorPoint="true"            scaleX="1" scaleY="1"            >      <Sprite positionType="LeftBottom" width="720.0" height="1280.0" positionX="0" positionY="0" anchorPointX="0"                                         anchorPointY="0" src="Resources/bg.png" name="" var="" target="None" scaleX="1" scaleY="1" visible="true"/>      <LayerColor positionType="LeftBottom" width="720" height="1280" positionX="0" positionY="0" anchorPointX="0"                  anchorPointY="0" color="#fff2e8ff" visible="false"/>      <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">      </Menu>      <Sprite positionType="LeftBottom" width="840.0" height="281.0" positionX="0" positionY="0" anchorPointX="0"                                         anchorPointY="0" src="Resources/ground.png" var="ground" target="Doc"/>      <Node positionType="LeftBottom" width="40" height="40" positionX="800" positionY="250" anchorPointX="0"            anchorPointY="0" var="hoseNode" target="Doc">        <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>      <Node positionType="LeftBottom" width="40" height="40" positionX="303.0" positionY="500" anchorPointX="0.5"            anchorPointY="0.5" var="readyNode" target="Doc" visible="true">        <Sprite positionType="LeftBottom" width="508.0" height="158.0" positionX="95.0" positionY="584.0" anchorPointX="0.5"                                         anchorPointY="0.5" src="Resources/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="Resources/flappy_packer.plist/click.png"/>      </Node>      <Node positionType="LeftBottom" width="40" height="40" positionX="300" positionY="500" anchorPointX="0.5"            anchorPointY="0.5" var="overNode" target="Doc" visible="true">        <Sprite positionType="LeftBottom" width="590.0" height="298.0" positionX="72.0" positionY="219.0" anchorPointX="0.5"                                         anchorPointY="0.5" src="Resources/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="Resources/flappy_packer.plist/gameover.png"/>        </Sprite>        <Menu positionType="LeftBottom" width="40" height="40" positionX="0" positionY="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"/>        </Menu>      </Node>    </Layer></Document>

 

2. Compile MainLayer. js in code

First, the bird is moving forward. In fact, the bottom Road and pipe are moving to the left, and you will feel the bird is flying to the right. The loop moving code:

MainLayer.prototype.groundRun = function (){    var action1 = cc.MoveTo.create(0.5, cc.p(-120, 0));    var action2 = cc.MoveTo.create(0, cc.p(0, 0));    var action = cc.Sequence.create(action1, action2);    this.ground.runAction(cc.RepeatForever.create(action));}

Initialize different water pipes, each of which is composed of two water pipes and gaps. The total length is the same, the gap is also certain, and the following pipe length is randomly taken to form a wrong pipe level;

MainLayer.prototype.newHose = function (num){    var hoseHeight = 830;    var acrossHeight = 300;    var downHeight = 100 + getRandom(400);    var upHeight = 1100 - downHeight - acrossHeight;    var hoseX = 400 * num;    var HoseName = FP_MAIN_TEXTURE.HOSE;    var 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);    var 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);    this.hoseNode.addChild(ccSpriteDown);    this.hoseNode.addChild(ccSpriteUp);    this.hoseSpriteList.push(ccSpriteDown);    this.hoseSpriteList.push(ccSpriteUp);    return null;}

At the beginning, the game moves the bottom path constantly, initializes the water pipe, and displays the game preparation scenario;

MainLayer.prototype.onEnter = function (){    cc.AnimationCache.getInstance().addAnimations("Resources/flappy_frame.plist");    this.groundRun();    this.ground.setZOrder(10);    this.birdReadyAction();    this.bird.setZOrder(20);    this.readyNode.setVisible(true);    this.overNode.setVisible(false);    for (var i = 0; i < 30; i++) {        this.newHose(i);    }}

Click on the screen, and the bird will fly up to 60dp, and then quickly fall (mobile animation), flashing wings (Frame Animation );

MainLayer.prototype.birdRiseAction = function (){    var riseHeight = 60;    var birdX = this.bird.getPositionX();    var birdY = this.bird.getPositionY();    var time = birdY / 600;    var actionFrame = cc.Animate.create(cc.AnimationCache.getInstance().getAnimation("fly"));    var flyAction = cc.Repeat.create(actionFrame, 90000);    var riseAction1 = cc.MoveTo.create(0.2, cc.p(birdX, birdY + riseHeight));    var riseAction2 = cc.RotateTo.create(0, -30);    var riseAction = cc.Spawn.create(riseAction1, riseAction2);    var fallAction1 = cc.MoveTo.create(time, cc.p(birdX, 50));    var fallAction2 = cc.Sequence.create(cc.DelayTime.create(time / 6), cc.RotateTo.create(0, 30));    var fallAction = cc.Spawn.create(fallAction1, fallAction2);    this.bird.stopAllActions();    this.bird.runAction(cc.Spawn.create(            cc.Sequence.create(riseAction, cc.DelayTime.create(0.1), fallAction),            flyAction)    );}

Detection collision, if the bird hits the ground and water pipe, collision, Here collision directly with the picture inside the cocos2d-x and picture Cross Function cc. rectIntersectsRect;

MainLayer.prototype.checkCollision = function (){    if (this.bird.getPositionY() < 60) {        cc.log("floor");        this.birdFallAction();        return;    }    for (var i = 0; i < this.hoseSpriteList.length; i++) {        var hose = this.hoseSpriteList[i];        if (!this.isInScreen(hose)) {            // continue;        }        if (cc.rectIntersectsRect(hose.getBoundingBox(), this.bird.getBoundingBox())) {            cc.log("hose positionX==" + hose.getBoundingBox().x);            cc.log("this.bird positionX==" + this.bird.getBoundingBox().x);            cc.log("i==" + i);            cc.log("birdFallAction");            this.birdFallAction();            return;        }    }}

After the collision, the birds first fall, and the scene of the game is displayed;

MainLayer.prototype.birdFallAction = function (){    this.gameMode = OVER;    this.bird.stopAllActions();    this.ground.stopAllActions();    var birdX = this.bird.getPositionX();    var birdY = this.bird.getPositionY();    var time = birdY / 2000;    this.bird.runAction(cc.Sequence.create(            cc.DelayTime.create(0.1),            cc.Spawn.create(cc.RotateTo.create(time, 90), cc.MoveTo.create(time, cc.p(birdX, 50))))    );    this.overNode.setVisible(true);}

The difficulty of the game mainly lies in the movement of multiple water pipes, bird touch animation, and collision detection. I pasted all the Mainlayer. js code;

FP_MAIN_TEXTURE = {    FRAME_ANIMS: "beanstalk/Resources/bs_main_anims.plist",    HOSE: ["holdback1.png", "holdback2.png"]}READY = 1;START = 2;OVER = 3;var MainLayer = function (){    cc.log("MainLayer");    this.bird = this.bird || {};    this.ground = this.ground || {};    this.hoseNode = this.hoseNode || {};    this.readyNode = this.readyNode || {};    this.overNode = this.overNode || {};    this.passTime = 0;    this.hoseSpriteList = [];    this.isStart = false;    this.gameMode = READY;};MainLayer.prototype.onDidLoadFromCCB = function (){    if (sys.platform == 'browser') {        this.onEnter();    }    else {        this.rootNode.onEnter = function ()        {            this.controller.onEnter();        };    }    this.rootNode.schedule(function (dt)    {        this.controller.onUpdate(dt);    });    this.rootNode.onExit = function ()    {        this.controller.onExit();    };    this.rootNode.onTouchesBegan = function (touches, event)    {        this.controller.onTouchesBegan(touches, event);        return true;    };    this.rootNode.onTouchesMoved = function (touches, event)    {        this.controller.onTouchesMoved(touches, event);        return true;    };    this.rootNode.onTouchesEnded = function (touches, event)    {        this.controller.onTouchesEnded(touches, event);        return true;    };    this.rootNode.setTouchEnabled(true);};MainLayer.prototype.onEnter = function (){    cc.AnimationCache.getInstance().addAnimations("Resources/flappy_frame.plist");    this.groundRun();    this.ground.setZOrder(10);    this.birdReadyAction();    this.bird.setZOrder(20);    this.readyNode.setVisible(true);    this.overNode.setVisible(false);    for (var i = 0; i < 30; i++) {        this.newHose(i);    }}MainLayer.prototype.newHose = function (num){    var hoseHeight = 830;    var acrossHeight = 300;    var downHeight = 100 + getRandom(400);    var upHeight = 1100 - downHeight - acrossHeight;    var hoseX = 400 * num;    var HoseName = FP_MAIN_TEXTURE.HOSE;    var 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);    var 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);    this.hoseNode.addChild(ccSpriteDown);    this.hoseNode.addChild(ccSpriteUp);    this.hoseSpriteList.push(ccSpriteDown);    this.hoseSpriteList.push(ccSpriteUp);    return null;}MainLayer.prototype.groundRun = function (){    var action1 = cc.MoveTo.create(0.5, cc.p(-120, 0));    var action2 = cc.MoveTo.create(0, cc.p(0, 0));    var action = cc.Sequence.create(action1, action2);    this.ground.runAction(cc.RepeatForever.create(action));}MainLayer.prototype.birdReadyAction = function (){    var birdX = this.bird.getPositionX();    var birdY = this.bird.getPositionY();    var time = birdY / 2000;    var actionFrame = cc.Animate.create(cc.AnimationCache.getInstance().getAnimation("fly"));    var flyAction = cc.Repeat.create(actionFrame, 90000);    this.bird.runAction(cc.Sequence.create(            flyAction)    );}MainLayer.prototype.birdFallAction = function (){    this.gameMode = OVER;    this.bird.stopAllActions();    this.ground.stopAllActions();    var birdX = this.bird.getPositionX();    var birdY = this.bird.getPositionY();    var time = birdY / 2000;    this.bird.runAction(cc.Sequence.create(            cc.DelayTime.create(0.1),            cc.Spawn.create(cc.RotateTo.create(time, 90), cc.MoveTo.create(time, cc.p(birdX, 50))))    );    this.overNode.setVisible(true);}MainLayer.prototype.birdRiseAction = function (){    var riseHeight = 60;    var birdX = this.bird.getPositionX();    var birdY = this.bird.getPositionY();    var time = birdY / 600;    var actionFrame = cc.Animate.create(cc.AnimationCache.getInstance().getAnimation("fly"));    var flyAction = cc.Repeat.create(actionFrame, 90000);    var riseAction1 = cc.MoveTo.create(0.2, cc.p(birdX, birdY + riseHeight));    var riseAction2 = cc.RotateTo.create(0, -30);    var riseAction = cc.Spawn.create(riseAction1, riseAction2);    var fallAction1 = cc.MoveTo.create(time, cc.p(birdX, 50));    var fallAction2 = cc.Sequence.create(cc.DelayTime.create(time / 6), cc.RotateTo.create(0, 30));    var fallAction = cc.Spawn.create(fallAction1, fallAction2);    this.bird.stopAllActions();    this.bird.runAction(cc.Spawn.create(            cc.Sequence.create(riseAction, cc.DelayTime.create(0.1), fallAction),            flyAction)    );}MainLayer.prototype.onUpdate = function (dt){    if (this.gameMode != START) {        return;    }    this.passTime += dt;    this.hoseNode.setPositionX(800 - 200 * this.passTime);    this.bird.setPositionX(-500 + 200 * this.passTime);    this.checkCollision();}MainLayer.prototype.checkCollision = function (){    if (this.bird.getPositionY() < 60) {        cc.log("floor");        this.birdFallAction();        return;    }    for (var i = 0; i < this.hoseSpriteList.length; i++) {        var hose = this.hoseSpriteList[i];        if (!this.isInScreen(hose)) {            // continue;        }        if (cc.rectIntersectsRect(hose.getBoundingBox(), this.bird.getBoundingBox())) {            cc.log("hose positionX==" + hose.getBoundingBox().x);            cc.log("this.bird positionX==" + this.bird.getBoundingBox().x);            cc.log("i==" + i);            cc.log("birdFallAction");            this.birdFallAction();            return;        }    }}MainLayer.prototype.isInScreen = function (sprite){    return (sprite.getPositionX() > 0 && sprite.getPositionX() < 720);}MainLayer.prototype.onExitClicked = function (){}MainLayer.prototype.onStartClicked = function (){    cc.Director.getInstance().resume();    cc.BuilderReader.runScene("", "MainLayer");}MainLayer.prototype.onExit = function (){    cc.log("onExit");}MainLayer.prototype.onTouchesBegan = function (touches, event){    var loc = touches[0].getLocation();}MainLayer.prototype.onTouchesMoved = function (touches, event){}MainLayer.prototype.onTouchesEnded = function (touches, event){    if (this.gameMode == OVER) {        return;    }    if (this.gameMode == READY) {        this.gameMode = START;        this.readyNode.setVisible(false);    }    var loc = touches[0].getLocation();    this.birdRiseAction();}function isInRect(ccRect, ccTouchBeganPos){    if (ccTouchBeganPos.x > ccRect.x && ccTouchBeganPos.x < (ccRect.x + ccRect.width)) {        if (ccTouchBeganPos.y > ccRect.y && ccTouchBeganPos.y < (ccRect.y + ccRect.height)) {            return true;        }    }    return false;}function getRandom(maxSize){    return Math.floor(Math.random() * maxSize) % maxSize;}

Prompt code again:

Http://www.kuaipan.cn/file/id_25348935635745384.htm? Source = 1