[Cson original] HTML5 game framework cngamejs development record (game loop)

Returned directory

Because the entire game is in a game loop, the game loop is the core part of the game.Each cycle updates the attributes of the game object and draws game elements.

As mentioned in the previous resource loading article, after a resource is loaded, a game loop is started while the game is started. Now let's review this part.Code:

     /*  *
* Processing after image loadingProgram
*  */     
 VaR Imgload = Function (Self ){
 Return   Function (){
Self. loadedcount + = 1;
Self. loadedimgs [This . Srcpath] = This ;
 This . Onload = Null ; //  Ensure that the image is destroyed after the onload is executed once.  
 Self. loadedpercent = math. Floor (self. loadedcount/self. Sum * 100 );
Self. onload & self. onload (self. loadedpercent );
 If (Self. loadedpercent === 100 ){
Self. loadedcount = 0;
Self. loadedpercent = 0;
Loadingimgs = {};
 If (Self. gameobj & self. gameobj. initialize ){
Self. gameobj. initialize ();
 If (CG. loop &&! CG. Loop. Stop ){ //  End the previous Loop  
 CG. Loop. End ();
}
CG. Loop = New CG. gameloop (self. gameobj ); //  Start a new game loop  
 CG. Loop. Start ();
}

}


}
}

After the image resources are loaded, call the initialize method of the game object and determine whether the game loop object exists. If yes, end the previous loop (in this case, the level is usually switched, when a new game object is introduced). Otherwise, the game loop is established and started.

Now let's take a look at the implementation code of the game loop:

 
VaRGameloop =Function(Gameobj, options ){

If(! (This InstanceofArguments. callee )){
Return NewArguments. callee (gameobj, options );
}
This. INIT (gameobj, options );
}
 

the game loop function must also be called in the form of constructor. After the function is called, it is initialized as an object:

 /*   * 
 * initialization 
 *   */ 
 init:  function  (gameobj, options) {
 /*   * 
 * default object 
 *   */ 
  var  defaultobj = {
 FPS: 30 
}; 
 Options = options ||{}; 
 Options = CG. core. extend (defaultobj, options); 
  This . gameobj = gameobj; 
  This . FPS = options. FPS. 
 interval = 1000/This. FPS; 
  This . pause =  false ; 
  This . stop =  true ; 
}, 

You need to set only one parameter, that is, FPS (frame per second), which is the number of frames executed per second. According to this parameter, we can calculate the number of milliseconds to execute a game loop (interval parameter ).In addition, the loop can be paused or stopped.

 /*   * 
 * Start loop 
 *   */ 
 start:  function  () {
  If  ( This . stop) {///   if it is an end state, you can start   
   This . stop =  false ; 
  This . now =  New  date (). gettime (); 
  This . starttime =  New  date (). gettime (); 
  This . duration = 0; 
 loop. call ( This ) (); 
}< BR >}, 

When the cycle starts, we can save the start time so that we can continuously update the duration of the cycle ). Then call the loop function to implement the loop.

     VaR Timeid;
 VaR Interval;
 /*  *
* Loop Method
*  */     
 VaR Loop = Function (){
 VaR Self = This ;
 Return   Function (){
If (! Self. Pause &&! Self. Stop ){

Self. Now = New Date (). gettime ();
Self. Duration = self. startTime-self.now;

 If (Self. gameobj. Update ){
Self. gameobj. Update ();
}
 If (Self. gameobj. Draw ){
CG. Context. clearrect (0, 0, CG. Width, CG. Height );
Self. gameobj. Draw ();
}
}
Timeid = Window. setTimeout (arguments. callee, interval );
}
}

If it is not paused or stopped, the update and draw of the game object are called (note that the update of the game object is responsible for calling the update of all elements of the level, the same is true for draw ). Call setTimeout to call itself recursively to implement a loop.

 

All source code of game loop:

 /*  *
*
* Game loop
*
*  */ 
Cngame. Register ("cngame ", Function (CG ){

 VaR Timeid;
 VaR Interval;
 /* *
* Loop Method
*  */     
 VaR Loop = Function (){
 VaR Self = This ;
 Return   Function (){
 If (! Self. Pause &&! Self. Stop ){

Self. Now = New Date (). gettime ();
Self. Duration = self. startTime-self.now;

 If (Self. gameobj. Update ){
Self. gameobj. Update ();
}
 If (Self. gameobj. Draw ){
CG. Context. clearrect (0, 0, CG. Width, CG. Height );
Self. gameobj. Draw ();
}
}
Timeid = Window. setTimeout (arguments. callee, interval );
}
}

 VaR Gameloop = Function (Gameobj, options ){

 If (! ( This   Instanceof Arguments. callee )){
 Return   New Arguments. callee (gameobj, options );
}
 This . INIT (gameobj, options );
}
Gameloop. Prototype = {
 /*  *
* Initialization
*  */ 
Init:Function (Gameobj, options ){
 /*  *
* Default object
*  */     
 VaR Defaultobj = {
FPS: 30
};
Options = options | {};

Options = CG. Core. Extend (defaultobj, options );
 This . Gameobj = gameobj;
 This . FPS = options. FPS;
Interval = 1000/This. FPS;

This . Pause = False ;
 This . Stop = True ;
},

 /*  *
* Start Loop
*  */     
Start: Function (){
 If ( This . Stop ){ //  If it is in the end state, you can start 
                  This . Stop = False ;

 This . Now = New Date (). gettime ();
 This . Starttime = New Date (). gettime ();
 This . Duration = 0;
Loop. Call ( This )();
}
},
 /* *
* Continue Loop
*  */     
Run: Function (){
 This . Pause = False ;
},
 /*  *
* Pause the loop
*  */     
Pause: Function (){
 This . Pause = True ;
},
 /*  *
* Stop a loop
*  */     
End: Function (){
 This . Stop = True ;
Window. cleartimeout (timeid );
}


}
 This . Gameloop = gameloop;
});