Detailed introduction to the sample code of the Super Mario game demo based on HTML5

Function description:

A demo of the Super Mario game based on HTML5. The left and right arrow keys control movement, and the arrow keys control jumping. This game is based on the HTML5 game framework cnGameJS developed by me.

Please use the latest version of the browser to view.

Effect display:

##Code implementation:

The main elements of this game demo are: resource loading, external input, collision detection, animation, game loop and scene. I will analyze and explain step by step.

　

1. Resource loading:

　We must first have a game object, representing a level. This object has the following three methods: initialize, update and draw. Their respective functions are initialization, updating all game elements and drawing all game elements. Before the game starts, all image resources must be loaded first, and then the game loop is started and the initialization parameters of the game object are called:

##

 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"
}

cnGame.init('gameCanvas',{width:500,height:400});
 maryGame={
    initialize:(){
    },
    update:(){

    },
    draw:(){
    }
}
    cnGame.loader.start([srcObj.backgroundSrc,srcObj.playerSrc,srcObj.enemySrc,srcObj.stoneSrc,srcObj.stoneSrc2,srcObj.bulletSrc,srcObj.pillarSrc],maryGame);

　

2. External input:

Since the keyboard direction keys are required to cause Mary’s movement, we need to detect whether the keyboard direction keys are pressed. We can use cnGameJS’s isPressed (keyName) to detect keyboard input:

        (cnGame.input.isPressed("up")){
.jump();

        }
 (cnGame.input.isPressed("right")){
.moveRight();    
        }
 (cnGame.input.isPressed("left")){
.moveLeft();
        }
{
.stopMove();
        }

In this way, Mary can perform different behaviors through different keyboard inputs.

3. Collision detection:

cnGameJS encapsulates the collision detection of rectangles and rectangles, so we can use it as collision detection between game objects and objects, here The complexity of collision detection is to detect the collision between Mary and enemies or stones, and follow the situation to change Mary's speed and acceleration.

1: Mary collides with the enemy, and determines whether the enemy dies or Mary dies based on the speed of Mary in the Y direction.

2: Mary collides with the stone, causing Mary's Y-direction velocity to be 0 and Y-direction acceleration to 0.

3: Mary leaves the stone: the gravitational acceleration is restored.

4. Animation:

The animation here mainly refers to the animation of Mary’s feet when she moves. We can use pictures when Mary stops and animation when she moves. . The so-called animation is actually a frame animation within a large picture. For example, we can first prepare a picture like this:

　

Then we only need to make it display Mary in a different position each time , to complete the animation: Effect preview

5. Game loop

The game loop is a loop started after the resource is loaded. It receives the fps passed in by the user, thus Calculate the loop interval, update frames and draw frames each time, and generate game animation:

                    (cg.loop&&!cg.loop.stop){                        cg.loop.end();
                    }
                    cg.loop= cg.GameLoop(self.gameObj);                    cg.loop.start();

6. Scene:

The so-called scene is an object that when Mary moves, Mary remains in the center of the canvas and the background moves in the opposite direction. The scene object not only moves the background, but also moves non-player game objects in the opposite direction according to the player's speed: Effect preview

##

            .background= cnGame.View({src:srcObj.backgroundSrc,player:.player,imgWidth:2301});            .background.centerPlayer();            .background.insideView(.player,"x");

The above is the detailed content of Detailed introduction to the sample code of the Super Mario game demo based on HTML5. For more information, please follow other related articles on the PHP Chinese website!