Spiele: Kampf auf hoher See, Teil 1

In diesem Artikel wird Seabattle eingeführt, ein einfaches HTML5 -Spiel, das seine Einbettung in eine Webseite und umrissen seiner Architektur demonstriert. Seabattle, spielbar in Chrome, Firefox, Internet Explorer 9, Opera 12 und Safari 5, verfügt über einen Zerstörer, der U -Boote mit Tiefenladungen und Torpedos kämpft. Das Spiel wird fortgesetzt, bis der beiden Kämpfer zerstört wird, wodurch die Punktzahl beim Neustart zurückgesetzt wird.

Abbildung 1: Der Titelbildschirm von Seabattle fordert den Spieler auf, mit der Rückgabetaste zu beginnen.

Das Gameplay (Abbildung 2) zeigt den Zerstörer vor einem sternenklaren Hintergrund und zeigt die aktuellen und hohen Bewertungen (aus lokalem Speicher) an. Das Leben des Zerstörers wird durch Bilder angezeigt. Die Spieler verwenden Pfeilschlüssel, um die Torpedos zu manövrieren, und die Weltraumstange, um Tiefengebühren zu erfassen. Ein U -Boot -Wert erzielt 100 Punkte und aktualisiert die hohe Punktzahl, wenn sie übertroffen werden. Das Spiel endet, wenn entweder der Zerstörer oder das U -Boot zerstört wird, wodurch eine Gewinn-/Verlustbotschaft angezeigt wird.

Abbildung 2: Zerstörer gegen U -Boot; Tiefenladung und Torpedogrößen sind für Klarheit übertrieben.

Seerabattle einbetten:

Seabattle verwendet Seabattle.js, JQuery und das Jquery Hotkeys Plugin (in Teil 2 detailliert). Listing 1 zeigt ihre Aufnahme in eine Webseite. Listing 2 zeigt die Initialisierung und die Spielschleife unter Verwendung requestAnimationFrame für reibungslose Animation (oder setInterval für Browser, denen es fehlt). Die init() -Funktion richtet die Leinwand ein, lädt Ressourcen usw., während update() die Spiellogik übernimmt und die Leinwand umschließt. draw()

Die JavaScript -Architektur von Seabattle:

Das Seebattle -Objekt (Listing 3) verfügt über eine API mit

, init() und update(). Interne Pseudo-Constants verwalten Spielstaaten (Init, Titel, Spiel, Winsose, Neustart) und Limits (max_dc, max_torp). Funktionen handhaben Ressourcenbelastung (draw()), Kollisionserkennung (allResourcesLoaded()), Objekterstellung (MakedePTheCharge, Makexplosion, Makeship, Maketorpedo), Zufallszahlengenerierung (intersects()) und HTML5 -Speicherprüfung (rnd()) (supports_html5_storage()) .

Schlussfolgerung:

SeaBatTle Showcases HTML5 -Spielentwicklung mithilfe von Audio-, Leinwand- und Webspeicher -APIs. Zukünftige Teile werden tiefer in seine Funktionalität eintauchen.

häufig gestellte Fragen zu HTML5 -Spielen und WordPress -Integration (dieser Abschnitt wird basierend auf der ursprünglichen Eingabe hinzugefügt):

Dieser Abschnitt ist in der umgeschriebenen Ausgabe weggelassen, da er nicht mit dem Kerninhalt des HTML5 -Spielartikels zusammenhängt. Hinzufügen würde den Fokus und die Länge der Reaktion erheblich verändern. Wenn Sie eine separate Antwort möchten, die sich mit den WordPress -Integrationsfragen befasst, geben Sie sie bitte als separate Eingabeaufforderung an.

Das obige ist der detaillierte Inhalt vonSpiele: Kampf auf hoher See, Teil 1. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!