[Cson original] HTML5-based Super Mario game demo

Function Description:

The demo of the HTML5-based Super Mario game, with the right and right arrow keys controlling the movement and the right arrow keys controlling the jump. The game is based on the HTML5 game framework cngamejs developed by myself (click here for details: HTML5 game framework cngamejs development record ).

Please use the latest version of browser to view.

Effect display:

CodeImplementation:

The game demo mainly contains the following elements: Resource loading, external input, collision detection, animation, game loop, and scenario. I will analyze and explain them step by step.

1. Resource loading:

First, we need a game object that represents a level. This object has three methods: Initialize, update, and draw. Their respective functions are initialization, updating all game elements and drawing all game elements. Before starting a game, you must first load all the image resources, then start the game loop, and call the initialization parameters of the game object:

 /*  Image src object  */ 
 VaR Srcobj = {
Startsrc: "images/gamestart.png ",
Backgroundsrc: "images/background.png ",
Enemysrc: "images/enemy.png ",
Playersrc: "images/player.png ",
Stonesrc: "images/stone.png ",
Stonesrc2: "images/stone2.png ",
Pillarsrc: "images/pillar.png ",
Bulletsrc: "images/bullet.png"
}
 /*  Initialization  */ 
Cngame. INIT ('gamecanvas ', {width: 500, height: 400 });
 VaR Marygame = {
Initialize: Function (){
},
Update: Function (){

},
Draw: Function (){
}
}
Cngame. loader. Start ([srcobj. example, srcobj. playersrc, srcobj. enemysrc, srcobj. stonesrc, srcobj. example, srcobj. bulletsrc, srcobj. pillarsrc], marygame );

2. external input:

Because the keyboard direction keys are required to generate Mary's movement, we need to check whether the keyboard direction keys are pressed. We can use ispressed (keyname) of cngamejs to detect the keyboard input:

If(Cngame. Input. ispressed ("up ")){
This. Jump ();

}
Else If(Cngame. Input. ispressed ("right ")){
This. Moveright ();
}
Else If(Cngame. Input. ispressed ("Left ")){
This. Moveleft ();
}
Else{
This. Stopmove ();
}
 

In this way, you can use different keyboard input to make Mary behave differently.

3. Collision Detection:

Cngamejs encapsulates the collision detection of Rectangles and rectangles, so we can use it as the collision detection between game objects and objects. The collision detection here is complex, they detected the collision between Mary and the enemy or the stone, and followed up to change the speed and acceleration of Mary.

1: collision between Mary and the enemy, judge the enemy die or Mary die based on the speed of Mary y.

2: The collision between Mary and the stone sets the speed of Mary y to 0 and the acceleration of Y to 0.

3: Mary leaves the Stone: Restores gravity acceleration.

4. Animation:

The animation here mainly refers to the animation of Mary's foot when moving. We can use images and animations when Mary stops. The so-called animation is actually a frame animation in a large image. For example, we can first prepare an image like this:

After that, you just need to make it show Mary in different positions each time to complete the animation: effect Preview

5. game loop

A game loop is a loop started after resources are loaded. It receives user-passed FPS and calculates the cycle interval. Each cycle updates frames and draws frames to generate game animations:

If(CG. loop &&! CG. Loop. Stop ){//End the previous Loop
CG. Loop. End ();
}
CG. Loop =NewCG. gameloop (self. gameobj );//Start a new game loop
CG. Loop. Start ();
 

6. Scenario:

The so-called scenario is the implementation object that Mary keeps moving in the center of the canvas while the background moves in the opposite direction when Mary moves. The scene object not only moves the background, but also moves non-player game objects in the opposite direction based on the player's speed: effect Preview

This. Background =NewCngame. View ({SRC: srcobj. backgroundsrc, Player:This. Player, imgwidth: 2301 });//Scenario Initialization
This. Background. centerplayer (True);//Set players in the center
This. Background. insideview (This. Player, "x ");//Keep players in the visible area
 

 

Finally, download the source code of the game and the cngamejs framework. Click to download.

Welcome to reprint, please indicate the source: http://www.cnblogs.com/Cson/archive/2012/02/14/2350652.html