Erstellen eines einfachen Windows 8 -Spiels mit JavaScript: Game Logic

Key Takeaways

• Die Spielschleife, die der Herzschlag eines jeden Spiels ist, ist eine Funktion, die viele Male pro Sekunde läuft und zwei primäre Jobs hat
• aktualisieren, was los ist, und zeichnen Sie die neue Szene. Die EaselJS -Tickerklasse wird verwendet, um das Timing der Spielschleife zu verwalten, die Spielschleife zu pause/wieder aufzunehmen und die verstrichene Zeit zu messen.
• Die Spiellogik beinhaltet das Hinzufügen von Funktionen zum Abfeuern, das Aktualisieren des Displays, das Verschieben der Aufnahme, das Handling von Treffern und das Beenden des Spiels. Die Osten -Displays -Displays -Methoden unterstützt eine maßgebliche () Methode, mit der es leicht erkennen kann, ob ein Punkt über die Position des aktuellen Objekts liegt.

Dies ist der dritte in einer Reihe von vier Beiträgen über vier Wochen, die Ihnen zeigen, wie Sie ein einfaches Windows 8 -Spiel mit HTML5, JavaScript, WinJs und CreateJs erstellen. 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 werden wir Dinge mit einer Spiellogik und JavaScript zum Leben erwecken.

Die Spielschleife

Der Herzschlag eines Spiels ist die Spielschleife.  Es ist eine Funktion, die viele Male pro Sekunde läuft und zwei Hauptjobs hat: Aktualisieren Sie, was los ist, und zeichnen Sie die neue Szene. In Teil 2 haben wir den Umriss bereits eingerichtet: Nun ist die Frage, wie wir die Gameloop () -Funktion beginnen und sie mehrmals pro Sekunde laufen lassen.

Easeljs Ticker -Klasse

Glücklicherweise verfügt Easteljs über eine Tickerklasse, die einige Funktionen enthält, die wir verwenden werden:

• Verwalten Sie das Timing der Spielschleife
• Pause/Nehmen Sie die Spielschleife
wieder auf.
messen verstrichene Zeit

Es ist eine statische Klasse, sodass wir sie einfach verwenden können.  Fügen Sie in default.js eine neue StartGame () -Funktion hinzu und rufen Sie sie am Ende von PrepedGame () auf: Hier fordern wir Ticker auf, das Fenster zu verwenden. RequestAnimationFrame ist eine relativ neue API für Webanwendungen, mit der sichergestellt wird, dass die Arbeit nicht unnötig erfolgt.  Um zu verstehen, warum dies besser sein kann als ein fester Timer (z. B. mit setTimeout ()), siehe die Probe für RequestAnimationFrame auf der IE -Teststrecke. Jedes Mal, wenn der RequestAnimationFrame fertig ist, wird unsere Spielschleife ausgeführt.

"Bereit, ziel, Feuer!"

Okay, jetzt haben wir ein Spiel mit einer Laufspielschleife, also ist es Zeit, Spaß zu verleihen! Jeder Spieler/Katapult wird die Munition/Rock auf den anderen abfeuern.  Wir müssen wissen, ob derzeit ein Schuss fliegt, wer es ist, und wie sich der Schuss bewegt. Fügen wir zunächst mehr Variablen zu default.js hinzu: Verwenden wir nun einige von ihnen, indem wir die folgende Funktion der Funktion (update () hinzufügen: Im Moment feuern beide Spieler automatisch (in einer zufälligen Geschwindigkeit) in ihren Kurven.  Die Ammobitmap wird in die obere Mitte des Feuerkatapultes verschoben, und die Shotvelocity erhält einen Zufallswert in einem begrenzten Bereich (angepasst für die Bildschirmauflösung.) Wir werden auch eine Fireshot () -Funktion hinzufügen, um das Schuss anzuzeigen und dem Spiel in der Luft zu sagen:  

Aktualisieren Sie die Anzeige

Bevor wir den Schuss durch die Luft bewegen, konzentrieren wir uns auf die 2. Hälfte der Game -Loop -Gleichung - Zeichnung auf den Bildschirm.  Dies kann oft sehr komplex sein, aber die Easeljs -Bühne kümmert sich um das Zeichnen unserer Inhalte (alle Kinder - Bitmaps, Text usw. - wir haben die Bühne hinzugefügt) zu den Leinwand, also ist dies alles, was wir brauchen: Das ist es!  Wenn Sie das Spiel ausführen, feuert Spieler 1 automatisch und der Schuss erscheint über dem roten Katapult… … Aber es wird sich nicht rühren.  Lassen Sie uns die Dinge in Bewegung bringen.

Verschieben des Schusss

Kehren wir zur Funktion update () zurück und fügen Sie der IF -Anweisung Logik hinzu: Führen Sie es noch nicht aus, wir brauchen noch zwei Funktionen, aber hier ist, was los ist:

• Zeilen 149 & 150 - Bewegen
Zeile 151 - Schwerkraft auf die langsame Geschwindigkeit
• auftragen
• Zeilen 153-155-Hat der Schuss den Boden oder die linke oder rechte Rande des Bildschirms geschafft?
• Zeilen 157-160-verpasst-beenden Sie den Schuss und ändern Sie die Spieler
• Zeilen 162-168-Aufnahme von Spieler 1-Sehen Sie, ob es Spieler 2 traf. Wenn ja, aktualisieren Sie den Lebens von Spielern 2.
• Zeilen 169-175-Schuss von Player 2-Sehen Sie, ob es Spieler traf 1. Wenn ja, aktualisieren Sie den Leben von Player 1.

Fügen wir den Checkhit (Bitmap) hinzu Funktion: Was spricht das von Hittest?  EaselJS DisplayObjects (auf welchem ​​Bitmap basiert) unterstützt eine misstrauische Methode (), mit der es sehr einfach ist, festzustellen, ob sich ein Punkt über die Position des aktuellen Objekts befindet.  Leider skalieren wir Objekte und funktioniert nur mit den Originalgrößen, sodass wir selbst nach Treffern suchen müssen.  Nur ein bisschen Mathematik und wir sind eingestellt.

Handhabung von Hits

Fügen Sie nun die Funktion processHit () hinzu: Dies beendet einfach den Schuss, verändert die Spieler und stellt sicher, dass das Spiel noch nicht vorbei ist.

beenden das Spiel

Beenden wir diesen Beitrag, indem wir das Spiel beenden.  Fügen Sie die Funktion Endgame (Bild) hinzu: Das ist es!  Jetzt können Sie das Spiel laufen und sehen, wer gewinnt.

Was kommt als nächstes?

Wir haben in diesem Teil viel hinzugefügt - die Dinge zeichnen, bewegen, schlagen, enden ... aber es gibt zwei klaffende Löcher.  Erstens spielt der Spieler nicht tatsächlich, sodass wir als nächstes die Eingabebereich hinzufügen.  Zweitens sind die Dinge schrecklich leise, besonders für einen Krieg, also werden wir auch einige Geräusche einwerfen. Auf Teil 4: Nächste Woche!

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

Wie kann ich anfangen, ein Spiel mit JavaScript für Windows 8 zu erstellen? Sie müssen auch Visual Studio installieren, der Entwicklungsumgebung für Windows 8 -Anwendungen. Sobald Sie diese Voraussetzungen haben, können Sie zunächst ein neues Projekt in Visual Studio erstellen und die Vorlage „leere App“ auswählen. Von dort aus können Sie Ihre Spiellogik in JavaScript schreiben und Ihre Spieloberfläche mit HTML5 und CSS entwerfen. Programmiersprache, mit der eine Vielzahl von Spielen erstellt werden kann. Einige Beispiele sind Puzzlespiele, Strategiespiele, Plattformer und sogar 3D -Spiele. Die Möglichkeiten sind endlos und mit den richtigen Tools und Ressourcen können Sie jede Art von Spiel erstellen, die Sie sich vorstellen können.

Wie kann ich meinem JavaScript -Spiel Interaktivität hinzufügen? Dies sind Funktionen, die ausgelöst werden, wenn ein bestimmtes Ereignis auftritt, z. B. ein Mausklick oder ein Tastendruck. Sie können beispielsweise das Ereignis "Onclick" verwenden, um eine Funktion auszulösen, wenn der Benutzer auf ein Spielelement klickt, oder das Ereignis von 'Onkeydown', um ein Zeichen zu verschieben, wenn der Benutzer auf eine Taste drückt.

Wie kann ich ich Testen Sie und debuggen Sie mein JavaScript -Spiel? Visual Studio bietet ein leistungsstarkes Debugging -Tool, mit dem Sie Ihren Code durchlaufen, Variablen inspizieren und Fehler oder Fehler identifizieren können. Sie können auch die Konsole verwenden, um Nachrichten zu protokollieren und die Ausführung Ihres Codes zu verfolgen.

Wie kann ich mein JavaScript -Spiel für die Leistung optimieren? . Dazu gehören die Minimierung der Verwendung globaler Variablen, die Verwendung von RequestAnimationFrame für Spielschleifen, Optimierung Ihrer Bilder und Assets und die Verwendung effizienter Algorithmen für die Spiellogik. Es ist auch wichtig, Ihr Spiel auf einer Vielzahl von Geräten und Browsern zu testen, um sicherzustellen, dass es reibungslos läuft. zu einem JavaScript -Spiel mit der HTML5 -Audio -API. Auf diese Weise können Sie Sounddateien laden und abspielen, die Lautstärke steuern und sogar Soundeffekte erstellen. Sie können auch Bibliotheken wie Howler.js verwenden, um den Prozess zu vereinfachen und fortschrittlichere Audiofunktionen hinzuzufügen.

Wie kann ich mein JavaScript -Spiel im Windows Store veröffentlichen? In Ihrem Spiel können Sie es im Windows Store veröffentlichen, indem Sie ein Geschäftskonto erstellen, Ihre App registrieren und zur Zertifizierung einreichen. Sie müssen Screenshots, eine Beschreibung und andere Informationen zu Ihrem Spiel bereitstellen. Sobald Ihr Spiel genehmigt wurde, kann es im Windows Store heruntergeladen werden.

Kann ich mein JavaScript -Spiel monetarisieren? Eine Möglichkeit besteht darin, Ihr Spiel im Windows Store zu verkaufen. Sie können auch In-App-Käufe einbeziehen, bei denen Spieler zusätzliche Inhalte oder Funktionen kaufen können. Eine andere Möglichkeit besteht darin, Anzeigen in Ihrem Spiel anzuzeigen, obwohl dies sparsam erfolgen sollte, um das Gameplay -Erlebnis zu vermeiden.

Kann ich JavaScript verwenden, um Spiele für andere Plattformen zu erstellen? Nicht auf Windows 8 oder eine bestimmte Plattform beschränkt. Mit den richtigen Tools und Bibliotheken können Sie Spiele erstellen, die auf einer Vielzahl von Plattformen ausgeführt werden, einschließlich Webbrowser, mobiler Geräte und sogar Spielkonsolen. Einige beliebte Bibliotheken für die plattformübergreifende Spielentwicklung mit JavaScript umfassen Phaser, Pixi.js und Three.js.

Wo kann ich mehr über die Spieleentwicklung mit JavaScript erfahren? Websites wie W3Schools, Mozilla Developer Network und Codecademy bieten Tutorials und Führer für JavaScript und Spieleentwicklung an. Es gibt auch viele Bücher, Online -Kurse und Foren, in denen Sie lernen und Hilfe von anderen Entwicklern erhalten können.

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