Introduction détaillée à l'exemple de code de la démo du jeu Super Mario basée sur HTML5

Description de la fonction :

Une démo du jeu Super Mario basée sur HTML5. Les touches fléchées contrôlent le mouvement vers la gauche et la droite, et les touches fléchées contrôlent le saut. le framework de jeu HTML5 cnGameJS développé par moi.

Veuillez utiliser la dernière version du navigateur pour visualiser.

Affichage de l'effet :

Implémentation du code :

Les principaux éléments de cette démo de jeu sont : le chargement des ressources, l'entrée externe, la détection de collision, l'animation, la boucle et la scène du jeu. Je vais analyser et expliquer étape par étape.

　1. Chargement des ressources :

Il faut d'abord avoir un objet de jeu, représentant un niveau. Cet objet a les trois méthodes suivantes : initialiser, mettre à jour et dessiner. Leurs fonctions respectives sont l'initialisation, la mise à jour de tous les éléments du jeu et le dessin de tous les éléments du jeu. Avant le début du jeu, toutes les ressources d'image doivent d'abord être chargées, puis la boucle de jeu est lancée et les paramètres d'initialisation de l'objet de jeu sont appelés :

 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. Entrée externe :

Étant donné que les touches de direction du clavier sont nécessaires pour provoquer le mouvement de Mary, nous devons détecter si les touches de direction du clavier sont enfoncées. Nous pouvons utiliser isPressed (keyName) de cnGameJS pour détecter. saisie au clavier :

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

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

　De cette façon, Mary peut effectuer différents comportements via différentes saisies au clavier.

3. Détection de collision :

cnGameJS encapsule la détection de collision de rectangles et de rectangles, nous pouvons donc l'utiliser comme détection de collision entre objets de jeu, ici La complexité de la collision la détection consiste à détecter la collision entre Mary et des ennemis ou des pierres, et à suivre la situation pour modifier la vitesse et l'accélération de Mary.

1 : Mary entre en collision avec l'ennemi et détermine si l'ennemi meurt ou si Mary meurt en fonction de la vitesse de Mary dans la direction Y.

　2 : Marie entre en collision avec la pierre, ce qui fait que la vitesse de Marie dans la direction Y est de 0 et l'accélération dans la direction Y de 0.

　3 : Marie quitte la pierre : l'accélération de la gravité est restaurée .

4. Animation :

L'animation ici fait principalement référence à l'animation des pieds de Marie lorsqu'elle bouge. Nous pouvons utiliser des images lorsque Marie s'arrête et une animation lorsqu'elle bouge. . La soi-disant animation est en fait une animation d'image au sein d'une grande image. Par exemple, nous pouvons d'abord préparer une image comme celle-ci :

　

Il suffit ensuite de la faire afficher. Marie dans une position différente à chaque fois, pour compléter l'animation : Aperçu de l'effet

5. Boucle de jeu

La boucle de jeu est une boucle démarrée après le chargement de la ressource. Il reçoit les fps transmis par l'utilisateur, calcule ainsi l'intervalle de boucle, met à jour les images et dessine des images à chaque fois, et génère une animation de jeu :

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

6 . Scène :

La soi-disant scène est l'objet de réalisation que lorsque Marie bouge, Marie reste au centre de la toile et le fond se déplace dans la direction opposée. L'objet de scène déplace non seulement l'arrière-plan, mais déplace également les objets de jeu non-joueurs dans la direction opposée en fonction de la vitesse du joueur : Aperçu de l'effet

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!