Detaillierte Einführung in den Beispielcode der Super Mario-Spieldemo basierend auf HTML5

Funktionsbeschreibung:

Eine Demo des Super Mario-Spiels basierend auf HTML5. Die Pfeiltasten steuern die Bewegung nach links und rechts, und die Pfeiltasten steuern das Springen das von mir entwickelte HTML5-Game-Framework cnGameJS.

Bitte verwenden Sie zum Anzeigen die neueste Version des Browsers.

Effektanzeige:

Code-Implementierung:

Die Hauptelemente dieser Spieldemo sind: Ressourcenladen, externe Eingabe, Kollisionserkennung, Animation, Spielschleife und Szene, die ich Schritt für Schritt analysieren und erklären werde.

　1. Ressourcenladung:

Wir benötigen zunächst ein Spielobjekt, das ein Level darstellt. Dieses Objekt verfügt über die folgenden drei Methoden: Initialisieren, Aktualisieren und Zeichnen. Ihre jeweiligen Funktionen sind Initialisierung, Aktualisierung aller Spielelemente und Zeichnen aller Spielelemente. Bevor das Spiel startet, müssen zunächst alle Bildressourcen geladen werden, dann wird die Spielschleife gestartet und die Initialisierungsparameter des Spielobjekts heißen:

 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. Externe Eingabe:

Da die Richtungstasten der Tastatur erforderlich sind, um Marys Bewegung auszulösen, müssen wir erkennen, ob die Richtungstasten der Tastatur gedrückt werden. Zur Erkennung können wir isPressed (keyName) von cnGameJS verwenden Tastatureingabe:

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

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

　Auf diese Weise kann Mary durch verschiedene Tastatureingaben unterschiedliche Verhaltensweisen ausführen.

3. Kollisionserkennung:

cnGameJS kapselt die Kollisionserkennung von Rechtecken und Rechtecken, sodass wir sie hier als Kollisionserkennung zwischen Spielobjekten verwenden können Die Komplexität der Kollision Die Erkennung besteht darin, die Kollision zwischen Mary und Feinden oder Steinen zu erkennen und die Situation zu verfolgen, um Marys Geschwindigkeit und Beschleunigung zu ändern.

1: Mary kollidiert mit dem Feind und bestimmt anhand der Geschwindigkeit von Mary in Y-Richtung, ob der Feind stirbt oder Mary stirbt.

　2: Mary kollidiert mit dem Stein, wodurch Marys Geschwindigkeit in Y-Richtung 0 und ihre Beschleunigung in Y-Richtung 0 beträgt.

　3: Mary verlässt den Stein: Die Schwerkraftbeschleunigung wird wiederhergestellt .

4. Animation:

Die Animation hier bezieht sich hauptsächlich auf die Animation von Marys Füßen, wenn sie sich bewegt. Wir können Bilder verwenden, wenn Mary anhält, und Animationen, wenn sie sich bewegt. . Bei der sogenannten Animation handelt es sich eigentlich um eine Rahmenanimation innerhalb eines großen Bildes. Wir können beispielsweise zunächst ein Bild wie folgt vorbereiten:

　

Dann müssen wir es nur noch anzeigen Mary befindet sich jedes Mal in einer anderen Position, um die Animation abzuschließen: Effektvorschau

5. Spielschleife

Die Spielschleife ist eine Schleife, die nach dem Laden der Ressource gestartet wird. Es empfängt die vom Benutzer übergebenen fps, berechnet also das Zyklusintervall, aktualisiert Frames und zeichnet jedes Mal Frames und generiert Spielanimationen:

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

6 . Szene:

Die sogenannte Szene ist das Erkenntnisobjekt, dass Maria in der Mitte der Leinwand bleibt und sich der Hintergrund in die entgegengesetzte Richtung bewegt. Das Szenenobjekt bewegt nicht nur den Hintergrund, sondern auch Nicht-Spieler-Spielobjekte entsprechend der Geschwindigkeit des Spielers in die entgegengesetzte Richtung: Effektvorschau

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

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in den Beispielcode der Super Mario-Spieldemo basierend auf HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!