Flappy Pig Small Game Source Analysis (4)--core pig module (not yet to be continued)

After the warm-up, we have to move a little more seriously, the game called Flappy Pig, our pig is finally coming out.

The usual, look at the directory structure, the reader to the directory structure to think back to the several modules we have explained:

Where Game.js is the game main program, Option.js is the game profile, Util is our common tool library function.

So what is pig, we first on the source:

varFlappy = (function(self) {' Use strict '; //Turn on strict mode varoption = Self.option,//take the option that was added to the front .$ = self.util.$;//take out the util selector that you added earlier .    //PigSelf.pig = {//Add a pig property to a Flappy objecty:0,//Current height of pig (bottom)Init:function(Overcallback, Controller) {//the initial method of swine            vart = This;//T.S= 0,//Initialize the displacement of the piggyT.time = 0,//Initialize the time of the piglet's displacementT. $pig = $ (' pig ');//get the Piglet object in the pageT. $pig. style.left = option.pigleft + ' px ';//set the location on the left side of the piggy in the pageT._controller = Controller;//passing the controller inT._addlistener (overcallback);//Add a listener function, the result of execution is equivalent to T._overcallback = Overcallback        },        //Add Listener_addlistener:function(overcallback) { This. _overcallback =Overcallback; },        //StartStartfunction () {            vart = This, Interval= option.frequency/1000;//with 20/1000T.S= Option.v0 * T.time-t.time * t.time * OPTION.G*2;//Here is the formula for the movement of the pig, the reader does not understand it's okay, will explain in detail laterT.y = Option.pigy + t.s;//The current height is equal to the previous height + the height of the jump            if(T.y >= option.floorheight) {//Judging if the current height of the pig is greater than the height of the floorT. $pig. Style.bottom = t.y + ' px ';//then move the pig .}Else{t._dead ();//or you'll fall to death.} t.time+ = interval;//Cumulative Time        },        //JumpJumpfunction() {//How to jump a pig            vart = This;//get Piggy ObjectOption.pigy= parseint (T. $pig. Style.bottom, 10);//parses a string into a decimal integer and assigns a value to the configuration item PigyT.S = 0;//set the jump displacement to 0T.time = 0;//set time to 0        },        //trigger when hit the ground_dead:function () {             This. _overcallback.call ( This. _controller);//when the _dead function is triggered, the This._overcallback function is executed and the this is pointed to the This._controller        },        //hit the ground to deal withFallfunction () {            vart = This;//get Piggy Object            //fall to the ground, fix the heightT.y = Option.floorheight;//the y-axis of the Piglet object is set to floor heightT. $pig. Style.bottom = t.y + ' px ';//set the DOM position, that is, the Y value plus ' px ' into a string        },        //hit a pillar.Hitfunction () {            vart = This;//get Piggy Object            //Fall            varTimer = SetInterval (function() {T. $pig. Style.bottom= T.y + ' px ';//Update the location of the piglet Dom                if(T.y <= option.floorheight) {//When the pig's position is less than or equal to the floor heightClearinterval (timer);//Cancel Timer} t.y-= 12;//Piglet Height Descending}, Option.frequency);//executes every 20 milliseconds        }    }; returnSelf//returns the added Flappy object, preceded by Flappy = {options:{xxx},util:{xxx}}, and is now flappy = {options:{xxx},util:{xxx},pig:{xxx}}}) (Flappy|| {})

Well, I believe many students read the above source code may be carsick, I try to take everyone to clear their thoughts.

First of all, it is a necessary skill to read the source code, we use Pseudocode to peers what the author did:

var flappy = (function (self) {

Get Configuration Items

Get the tool library

Add a Pig object to the Flappy object, where the specific properties and methods of the Pig object are as follows {

Y: Represents the height of the pig from the floor,

Init: Initialize the method to make some initial settings for the Piglet object in the page, such as start position, etc.

_addlistener: Adding a listener function to a pig object

　Start: Let the pig begin to move, let the pig start movement according to a certain movement formula, and determine whether the pig fell dead

Jump: The pig has a beating method, when calling the jumping method, resets the Pigy in the profile option.js with the actual position value of the piglet in the page, and resets Pig.s to 0,time as 0

_dead: Execute the incoming overcallback function, note here must be call or apply will be in the function of this point to the controller, remember how the main program passed these two parameters, see game.js in this sentence:

Which T.fall is the game module fall method, this method still remember, in the first section we talked about, he is this:

Another parameter, T, is the game object, so This._overcallback.call (This._controller) in the _dead method is equivalent to executing the fall method in the diagram above, where this points to the game object. So once the Pig._dead () method is called, the game ends, and then the Pig.fall () method is called to let the pig lie on the floor, or the pig will be a short distance from the floor.

Fall: The reader can try to get rid of the Game.fall () of the Pig.fall () This sentence to try, naturally understand the meaning of this statement

Hit: The pig has two kinds of death (forgive the author can only use this argument), one fell to die on the ground, the other is killed in the post, the hit method is to deal with the situation of the pig was killed, when called Pig.hit (), every 20 milliseconds to let the piglet's Y value minus 12, and assign a value to the DOM object's bottom value to actually control the movement of the piglet until the pig lies on the floor.

}) (Flappy | | {});

The above is the abstract of pig, some of the understanding of the details of the need for the reader to do some hard work, first explain in detail the meaning of the red word part of the pseudo-code.

Flappy Pig Small Game Source Analysis (4)--core pig module (not yet to be continued)