Based on cocos2dx-js development of imitation "hero sad stick Off"

Game Design InstructionsultimatelyThe whole structure of design thought1. The game is mainly divided into Startscene and gamescene two scenes, Startscene only a Start button, do not do too much explanation. 2.GameScene and Gamelayer and Resultlayer, where the score is directly written in Gamelayer, a slightly more complex game will normally open a statuslayer3. GameModel objects are also added to the code, primarily responsible for recording game data and referencing different layersThe main cocos2dx-js APIaction:rotate,move,animateNode:sprite,scene,layer,labelttfCodeGamescne.js

/** * Created by Ccy on 2015/7/12. */var Gamelayer = cc. Layer.extend ({//parameter movedistance:-10, movetime:0.7, Bk:null,//footstep footstep1:null, FOOTST Ep2:null, footstepheight:300,//status istouch:false, Isplayinganiamtion:false,//Bridge bridgescaley:1 .0, bridgeaddscalepercent:0.3, Bridgesprite:null,//role role:null, Roleanimate:null,//score score:0        , Scorelabel:null, Ctor:function () {this._super ();        Gamemodel.getinstance (). Setgamelayer (this); THIS.BK = new CC.        Sprite (RES.BK1);        This.addchild ((THIS.BK));        This.schedule (this.addsnow,1);        This.schedule (this.addleng,0.03); Add Touch callback var touchlistener = cc. Eventlistener.create ({event:cc.                Eventlistener.touch_one_by_one, Swallowtouches:false, Ontouchbegan:function (touch,event) {                var pos = touch.getlocation (); var target = Event.getcurrenttargeT ();                if (target.isplayinganiamtion) {return false;                } Target.istouch = true;                Target.bridgeleng = 0;            return true;                }, Ontouchmoved:function (touch,event) {}, Ontouchended:function (touch,event) {                var target = Event.getcurrenttarget ();                Target.istouch = false;                var rotate = Cc.rotateby (1.0,90);                var callback = Cc.callfunc (function () {target.move ();                });                var seq = cc.sequence (rotate,callback);                Target.bridgeSprite.runAction (seq);            Target.isplayinganiamtion = true;        }        });        Cc.eventManager.addListener (Touchlistener,this); This.bridgesprite = new CC.        Sprite (Res.bridge);        This.addchild (this.bridgesprite,11); This.role = new CC.        Sprite (RES.BIRD_0); var animation = new CC.  Animation ();      Animation.addspriteframewithfile (RES.BIRD_0);        Animation.addspriteframewithfile (res.bird_1);        Animation.setdelayperunit (2.8/14);        Animation.setrestoreoriginalframe (TRUE);        Animation.setloops (100000);        This.animate = cc.animate (animation);        This.addchild (this.role,1100); This.scorelabel = new CC.        Labelttf ("Score:" +this.score, "Arial", 40); var tip = new CC.        Labelttf ("Come On!", "Arial", 60);        Tip.attr ({X:CC.WINSIZE.WIDTH/2, y:cc.winsize.height/8*6,});        This.addchild (TIP);        This.addchild (This.scorelabel);    This.reset ();        }, Move:function () {var Deltapositionx = this.footstep2.getPosition (). X-this.footstep1.getposition (). x;        var RoleMoveDistance1 = Deltapositionx + (this.getrealwidth (THIS.FOOTSTEP2)-this.getrealwidth (THIS.FOOTSTEP1));        var roleMoveDistance2 = this.getrealheight (this.bridgesprite); var callbacksuccess = Cc.callfunc (function (SelecttaRget) {selecttarget.getparent (). Role.stopallactions ();            var moveaction = Cc.moveby (Selecttarget.getparent (). Movetime,selecttarget.getparent (). movedistance,0);            Selecttarget.getparent (). Bk.runaction (moveaction);            var allmove = Cc.moveby (0.4,-deltapositionx,0);            var callbackreset = Cc.callfunc (function () {selecttarget.getparent (). Resetlittle ();            });            Selecttarget.getparent (). Footstep1.runaction (Allmove);            Selecttarget.getparent (). Footstep2.runaction (Allmove.clone ());            Selecttarget.getparent (). Role.runaction (Cc.sequence (Allmove.clone (), callbackreset));            Selecttarget.getparent (). Bridgesprite.runaction (Allmove.clone ());        Selecttarget.getparent (). score++;        },this.role);            var callbackfailed = Cc.callfunc (function (selecttarget) {selecttarget.getparent (). Role.stopallactions (); var callback = Cc.callfunc (function () {SELECTTArget.getparent (). GetParent (). AddChild (New Resultlayer ());            });            var move1 = Cc.moveby (1.0,150,0);            var move2 = Cc.moveby (1.0,0,-400). Easing (Cc.easein (1.0));            Selecttarget.runaction (MOVE1);            Selecttarget.getparent (). Role.runaction (Move2.clone ());            var rotate = Cc.rotateby (1.0,120). Easing (Cc.easein (3.0));            Selecttarget.getparent (). Bridgesprite.runaction (Move2);        Selecttarget.getparent (). Bridgesprite.runaction (Cc.sequence (rotate,callback));        },this.role); var bridgemindistance = This.footstep2.getPositionX ()-this.footstep1.getpositionx ()-This.getrealwidth (This.foo        TSTEP1);        var bridgemaxdistance = bridgemindistance + this.getrealwidth (THIS.FOOTSTEP2); if (RoleMoveDistance2 > Bridgemaxdistance | | RoleMoveDistance2 < bridgemindistance) {var rolemoveaction =            Cc.moveby (this.movetime,rolemovedistance2,0); This.role.runAction (Cc.sequence (rolemoveaction,callbackfailed));        This.role.runAction (This.animate.clone ());            } else{var rolemoveaction = Cc.moveby (this.movetime,rolemovedistance1,0);            This.role.runAction (Cc.sequence (rolemoveaction,callbacksuccess));        This.role.runAction (This.animate.clone ()); }}, Addleng:function () {if (This.istouch && this.isplayinganiamtion = = False) {This.bridge            ScaleY + = this.bridgeaddscalepercent;        This.bridgeSprite.setScaleY (This.bridgescaley);        }}, Reset:function () {var size = Cc.winsize;        This.bk.attr ({x:0, y:0, anchorx:0.0, anchory:0.0,});        var bksize = This.bk.getContentSize ();        This.bk.setScale (Size.height/bksize.height);            if (THIS.FOOTSTEP1! = null) {this.footstep1.removeFromParent (true);        THIS.FOOTSTEP1 = null; } if (THIS.FOOTSTEP2! = null) {This.footsteP2.removefromparent (TRUE);        THIS.FOOTSTEP2 = null;        } this.scoreLabel.attr ({x:0, y:size.height, anchorx:0, anchory:1.0,        }) This.score = 0;        This.resetlittle ();        var x = this.getrealwidth (THIS.FOOTSTEP1)-this.getrealwidth (This.bridgesprite); This.role.attr ({x:x, y:this.footstepheight, anchorx:1.0, anchory:0})    ;      }, Resetlittle:function () {if (THIS.FOOTSTEP1! = null) {this.footstep1.removeFromParent (true);        };        THIS.FOOTSTEP1 = THIS.FOOTSTEP2;        THIS.FOOTSTEP2 = null;        This.addfootstep ();        Reset bridge var y = this.footstepheight-this.bridgesprite.getcontentsize (). width;        var x = this.getrealwidth (THIS.FOOTSTEP1); This.bridgeSprite.attr ({x:x, y:y, anchorx:1.0, anchory:0, Scale:1.        0,}); This.bridgesPrite.setrotation (0);        This.bridgescaley = 1.0;        This.isplayinganiamtion = false;        This.scoreLabel.setString ("Score:" +this.score);    Gamemodel.getinstance (). SetScore (This.score);        }, Addfootstep:function () {//ad footstep2 var size = cc.winsize; if (THIS.FOOTSTEP1 = = null) {//Add footstep THIS.FOOTSTEP1 = new CC.            Sprite (Res.footstep); This.footstep1.setColor (New cc).            Color (125,0,56));            var stepsize = This.footstep1.getContentSize ();            var bridgeScaleX1 = (cc.random0to1 () *150+80)/stepsize.width;            var ScaleY = this.footstepheight/stepsize.height;            This.footstep1.setScale (Bridgescalex1,scaley);            This.footstep1.attr ({x:0, y:0, anchorx:0, anchory:0,            });        This.addchild (this.footstep1,100);  } if (THIS.FOOTSTEP2! = null) {this.footstep2.removeFromParent (true);      } THIS.FOOTSTEP2 = new CC.        Sprite (Res.footstep); This.footstep2.setColor (New cc).        Color (125,0,56));        var stepsize = This.footstep2.getContentSize ();        var bridgeScaleX2 = (cc.random0to1 () *150+80)/stepsize.width;        var ScaleY = this.footstepheight/stepsize.height;        This.footstep2.setScale (Bridgescalex2,scaley); var x = cc.random0to1 () * (Size.width-this.getrealwidth (THIS.FOOTSTEP1) -20-this.getrealwidth (THIS.FOOTSTEP2)) + t        His.getrealwidth (THIS.FOOTSTEP1) +20;        This.footstep2.attr ({x:size.width, y:0, anchorx:0, anchory:0,});        var footstepmove = Cc.moveto (0.3,x,0);        This.addchild (this.footstep2,100);    This.footstep2.runAction (Footstepmove);        }, Getrealwidth:function (Sprite) {var width = sprite.getcontentsize (). width;        var ScaleX = Sprite.getscalex ();    return Width*scalex; }, Getrealheight:function (sprite) {var height = SpriTe.getcontentsize (). Height;        var ScaleY = Sprite.getscaley ();    return Height*scaley; }, Addsnow:function () {var Apple = new CC.        Sprite (Res.snow);        var size = cc.winsize;        var x = cc.random0to1 () * (size.width-apple.width) +APPLE.WIDTH/2;        var y = size.height + apple.height/2;        Apple.attr ({x:x, y:y, Scale:cc.random0To1 () *0.6+0.2,});                Apple.runaction (Cc.sequence (Cc.moveby (3.0,0,-(size.height+apple.height)), Cc.callfunc (function () {                Apple.removefromparent (TRUE);            Cc.log ("Apple Remove from parent");        })        ));        This.addchild (Apple); var touchlistener = cc. Eventlistener.create ({event:cc.                Eventlistener.touch_one_by_one, Swallowtouches:false, Ontouchbegan:function (touch,event) {                var pos = touch.getlocation ();                var target = Event.getcurrenttarget (); IF (Cc.rectcontainspoint (Target.getboundingbox (), POS)) {target.getparent (). Move ();                    Target.removefromparent (TRUE);                    Cc.log ("You click Apple");                return;            } return false;        }        });    Cc.eventManager.addListener (touchlistener,apple); }}); var gamescene = cc.        Scene.extend ({ctor:function () {this._super ();        var layer = new Gamelayer ();    This.addchild (layer); }});

Code Analysis ctorconstructor, where you add most of the node and related listener that the game needs to use, plus two schedule, one schedule is for growing sticks, and one schedule to add snowflakes (no use)
Resetcall when you start or re-open a game, and adjust the associated properties of node added in the ctor function
Resetlittleevery step of the way will be called to adjust some details
AddfootstepAdd Stairs
Addlengwhen tapping the screen, change the length of the stick
Related information articles only give the main code, want to complete the code can be obtained by the following ways [email protected]:http://git.oschina.net/dogonline/dogeatcat Baidu Cloud:/http Pan.baidu.com/s/1jgd0ryu
After copying from git to the full project directory, go to the root directory and run it in the following way, the project has only been run in the browser.

Cocos run-p Web

Author contact information: [Email protected]

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Based on cocos2dx-js development of imitation "hero sad stick Off"