Diese Beitr?ge von Beitr?gen zeigt Ihnen, wie Sie ein einfaches Windows 8 -Spiel mit HTML5, JavaScript, WinJs und CreateJs erstellen k?nnen . Das Spiel basiert auf dem XNA -Beispielspiel ?Catapult Wars Lab“. Wir werden die Verm?genswerte aus diesem Spiel wiederverwenden, wenn wir eine neue Version für Windows 8 entwickeln, die auf Web -Technologien basiert. In diesem Beitrag reagieren wir auf Benutzereingaben und machen die Dinge durch Hinzufügen von Ton etwas lebhafter.

Key Takeaways

• Das Tutorial zeigt, wie ein einfaches Windows 8 -Spiel mit HTML5, JavaScript, WinJs und CreateJs erstellt wird. Das Spiel basiert auf dem XNA -Beispielspiel ?Catapult Wars Lab“.
• Das Spiel ist so konzipiert, dass sie auf Benutzereingaben in verschiedenen Formen wie Maus, Berührung, Stift und sogar Gesten reagieren, mit der Implementierung des MSPOinter-Systems und der MSgesture zum Erkennen von Gesten wie Tap und Double-Tap.
• Das Spiel enth?lt auch Soundeffekte mithilfe von HTML -Audioelementen und Voranschl?gen, um sicherzustellen, dass die Sounddateien zu Beginn des Spiels fertig sind und das Spielerlebnis verbessern.

Benutzereingabe

Natürlich gibt es viele M?glichkeiten, wie wir die Zielarbeiten h?tten haben k?nnen-zuf?llige, zeitbasierte, pr?zisionsbasierte (z. B. ?Klicken Sie auf… jetzt!“), Aber in diesem Fall lassen wir den Benutzer eine Zeile zeichnen, die sowohl die Richtung als auch die Geschwindigkeit angibt . Fügen wir zun?chst neue Variablen in der N?he der oberen Runde von default.js hinzu: Windows 8 unterstützt verschiedene M?glichkeiten zum Zeichnen - Maus, Berührung, Stift - und unser Spiel muss flexibel genug sein, um den Benutzer zu unterstützen.? Glücklicherweise kombiniert das MSPOinter -System die Unterstützung für alle in einem.? Wir verwenden MSPOInterdown/bis zum Beginn und Ende des Ziels sowie MSPOIntermove, um Feedback bereitzustellen, wenn der Benutzer das Ziel anpasst. übrigens gibt es auch eine gro?e Unterstützung über MSgesture zum Erkennen von Gesten wie Tap, Doppelauftastung usw. Ein gutes Beispiel für die Behandlung von Eingaben und Gesten ist die ?Ballineight“ -Stichprobe auf MSDN. Diese Ereignisse werden verwendet, indem sie auf die H?rerfunktionen hinweisen, die beim Feuern genannt werden.? Kürmen wir uns jetzt darum und fügen Sie die Oberseite der Funktion initialize () hinzu: Und jetzt für die Funktionen selbst: Fügen Sie hinzu, wo Sie m?chten, aber ich habe zwischen update () und fireshot () platziert: Beachten Sie, dass hier eine übung übrig bleibt.? Der Einfachheit halber habe ich den Text mit AIM % und/oder w?hrend der Funktion orderaim () einen Text ausgelassen.? Versuchen Sie, dies hinzuzufügen - aus früheren Teilen verwenden wir bereits die gleichen Techniken, die Sie ben?tigen. Und eine Funktion, die uns hilft, das Ziel zu berechnen: Einfachheit regiert den Tag und dies ist nur für Spieler 1, aber hier ist, was passiert:

• Zeilen 239-241-Erstellen Sie einen neuen Punkt aus dem Abstand von Start zu Endpunkten.? Skalieren Sie es auf eine gute Geschwindigkeit, um sie pro Bild/Update anzuwenden.
• Zeilen 242 & 244 - Stellen Sie sicher, dass X und Y begrenzt sind, sodass der Schuss nicht einfach vom Bildschirm verschwindet und zu schnell geht
• Zeilen 243 & 245 - Stellen Sie sicher

Wir haben früher einen tempor?ren Code zum Update () hinzugefügt, damit Player 1 immer zuf?llig feuert.? Jetzt k?nnen wir das ersetzen, um den neuen AimVector zu verwenden: Gehen Sie voran und leiten Sie das Spiel ... Jetzt k?nnen Sie die Maus, den Stift oder die Berührung verwenden, um den Schuss zu steuern!

"Ich muss Dinge h?ren!" - Sound

hinzufügen Unser Job als Game Dev ist erst erledigt, wenn wir etwas Klang haben.? Wir haben die Tondateien bereits in Teil 2 hinzugefügt. Machen wir den n?chsten Schritt, indem wir sie laden. Erstens einige Variablen in Standard.js, um die Dinge aufger?umt zu halten: Erinnern Sie sich an Teil 2 an, dass wir bereits vorlodern haben, um sicherzustellen, dass unsere Ressourcen zu Beginn des Spiels fertig sind?? Wir k?nnen den gleichen Ansatz mit Ger?uschen verwenden. Fügen wir sie dem Manifest hinzu: Um diese Dateien zu verwenden, erstellen wir Instanzen von HTML -Audioelementen.? Kurz gesagt, wenn Sie einfach eine Audio -Instanz pro Sounddatei erstellen, werden Sie wahrscheinlich auf das Ausschneiden sto?en, wenn ein Sound vor Abschluss des vorherigen Spiels dieser Instanz nicht abgespielt wird.? Es gibt mehrere Ans?tze für den Umgang mit diesem (z. B. siehe ?HTML5 Audio und JavaScript Control“ ), aber wir werden die einfache und ineffiziente bei jedem Sound eine Instanz verwenden, wenn wir eine Instanz verwenden. Beachten Sie, dass wir in diesem Beispiel SoundJs (ein weiterer Teil von CreateJs) nicht verwenden werden, aber Sie k?nnen es natürlich gerne für einen Dreh nutzen! Fügen Sie die Helferfunktion von PlaySound (Datei) hinzu: Das ist es!? Jetzt nennen wir es nur und geben die konstante Zeigeung auf die richtige Datei an.? Wir werden dies an mehreren Stellen tun. Fügen Sie zun?chst einen Anruf an FireShot () hinzu: Nun proceshit (): Wie der Kommentar erw?hnt, k?nnen Sie den "Hit" -Sound anstelle von "explodieren" verwenden, wenn Sie gerne mehrere Treffer ben?tigen, um ein Katapult zu zerst?ren. Und schlie?lich spiele End -Gewinn oder verliere den Sound in Endgame (): Gehen Sie voran und fahren Sie mit, um die Dinge auszuprobieren.

Spiel auf… und auf… und auf…

Glückwunsch!? Du hast ein Spiel gemacht! Wir haben in diesen Beitr?gen viel Boden behandelt, aber wie alles andere gibt es viel von anderen Dingen zu versuchen.? Warum nicht einen Stich auf einige von ihnen machen?

• Bildschirmanpassungen - Portr?t/Landschaft, schnappt/gefüllt.? Eine gro?artige Chance, über CSS -Medienfragen zu erfahren!
• Berührung/Gestenunterstützung
• Sprites/Animationen - Shot -Hit/Miss, Katapult Pullback/Fire, Catapult zerst?rt
• Gameplay -Dynamik - Wind hinzuzufügen, neue Szenen, neue Katapultfunktionen/Upgrades, Auswahlm?glichkeiten in Munition usw.
• Fügen Sie einen Berg und bewegende Wolken zum Hintergrund hinzu (die Verm?genswerte sind bereits da)
• Fügen Sie etwas Intelligenz zum derzeit sehr künstlichen Intelligenz
hinzu
• überlegen Sie, ob Sie eine Live -Kachel verwenden - vielleicht zeigen Sie die letzte/hohe Punktzahl des Spielers?

Genie?en!? Ich freue mich darauf, von den gro?artigen neuen Dingen zu h?ren, die Sie hinzufügen!

h?ufig gestellte Fragen zum Erstellen eines einfachen Windows 8 -Spiels mit JavaScript

Wie kann ich meinen Spielfiguren komplexere Bewegungen hinzufügen? Mit dieser Methode k?nnen Sie glattere Animationen erstellen, indem Sie Ihre Animationsfunktion vor dem n?chsten Repaint des Browsers aufrufen. Sie k?nnen diese Methode verwenden, um die Position Ihrer Spielfiguren basierend auf Benutzereingaben oder Spiellogik zu aktualisieren. Sie k?nnen beispielsweise einen Charaktersprung verwenden, wenn der Benutzer eine bestimmte Taste drückt.

Wie kann ich meinem Spiel Soundeffekte hinzufügen? Das Spielerlebnis. Sie k?nnen das Audio -Objekt in JavaScript verwenden, um Sounddateien abzuspielen. Um einen Sound abzuspielen, müssen Sie ein neues Audioobjekt erstellen und die "Play" -Methode aufrufen. Sie k?nnen auch die Lautst?rke steuern, den Sound schleifen und den Sound mithilfe der Methoden "Lautst?rke", "Schleife" und "Pause" stoppen.

Um Ihr Spiel reaktionsschnell zu machen, k?nnen Sie die Eigenschaften von 'window.innnerwidth' und 'window.innerHeight' in JavaScript verwenden. Diese Eigenschaften geben die Breite und H?he des Browserfensters zurück. Sie k?nnen diese Eigenschaften verwenden, um die Gr??e und Position Ihrer Spielelemente basierend auf der Gr??e des Browserfensters anzupassen.

Wie kann ich meinem Spiel Multiplayer -Funktionen hinzufügen? Ihr Spiel kann ziemlich komplex sein. Sie müssen WebSockets verwenden, um die Echtzeitkommunikation zwischen den Spielern zu erm?glichen. Sie müssen auch Probleme wie Latenz und Synchronisation behandeln.

Wie kann ich mein Spiel für eine bessere Leistung optimieren? Eine M?glichkeit besteht darin, die Methode "RequestAnimationFrame" für Ihre Animationen zu verwenden. Diese Methode ist effizienter als "setInterval" oder "setTimeout", da sie die Animation pausiert, wenn der Benutzer auf eine andere Registerkarte wechselt. Eine andere M?glichkeit besteht darin, die Verwendung globaler Variablen und Verschlüsse zu minimieren, da sie viel Speicher annehmen k?nnen.

Wie kann ich meinem Spiel Touch -Steuerelemente hinzufügen? Diese Ereignisse werden abgefeuert, wenn der Benutzer den Bildschirm berührt, den Finger bewegt und den Finger hebt. Sie k?nnen diese Ereignisse verwenden, um die Bewegung Ihrer Spielfiguren zu steuern.

Wie kann ich mein Spiel im Windows Store ver?ffentlichen? Ein Windows -Store -Entwicklerkonto. Sobald Sie ein Konto haben, k?nnen Sie Ihr Spiel zur Zertifizierung einreichen. Wenn Ihr Spiel den Zertifizierungsprozess überschreitet, wird er im Windows Store ver?ffentlicht. Sie müssen den Namespace von Windows.applicationModel.Store verwenden. Dieser Namespace bietet die Klassen und Methoden, die Sie für die Implementierung von In-App-K?ufen ben?tigen. ApplicationModel.userDataAccounTs Namespace. Dieser Namespace enth?lt die Klassen und Methoden, die Sie zum Implementieren von Erfolgen ben?tigen.

Wie kann ich mein Spiel auf verschiedenen Ger?ten testen? . Mit diesem Tool k?nnen Sie Ihr Spiel remote debuggen und auf einem Windows -Ger?t testen.

Das obige ist der detaillierte Inhalt vonErstellen eines einfachen Windows 8 -Spiels mit JavaScript: Eingabe und Sound. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!