Erstellen eines einfachen Windows 8 -Spiels mit JavaScript: Eingabe und Sound

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!