Ich habe ein Rollenspiel in JavaScript erstellt. Sie können auch. Hier ist wie.

Du willst also versuchen, ein Spiel zu machen, bist aber ein bisschen eingeschüchtert? Mach dir keine Sorgen, ich war auch!

Ich hatte zum Beispiel Angst, Gegenstände zu benutzen. Sie waren dieses große gruselige Ding, das ich für später beiseite gelegt habe. Aber jetzt benutze ich sie die ganze Zeit!

Ich werde Sie durch alle Schritte führen, die ich durchlaufen habe, um mein JavaScript-Rollenspiel zu erstellen.

Hier ist mein Spiel, das auf CodePen läuft. (Beachten Sie, dass es noch nicht für Mobilgeräte optimiert ist):

Erstens ,Wählen Sie den Punkt Ihres Spiels. Ist es ein Rätsel? Ein Rollenspiel? Ein Hack & Slash? Denken Sie jetzt über die technischen Schwierigkeiten nach. Ein Puzzlespiel würde viel kompliziertes Javascript erfordern. Ein Hack & Slash würde viel sorgfältiges Balancieren erfordern und so weiter.

Entscheiden Sie außerdem, ob es sich um ein Browsergame, ein Handyspiel oder beides handelt (ein "natives Web" -Spiel).

Zum Beispiel passt mein Spiel nicht gut auf den mobilen Bildschirm, weil der Spieler 24 Zauber hat. Das Klicken auf diese kleinen Schaltflächen auf einem winzigen Bildschirm ist nicht angenehm, daher müsste ich das Spiel für Handys neu gestalten.

Zweitens schreiben Sie alle Dinge auf, die Sie programmieren müssen, um das Spiel tatsächlich zu machen. Für mich war es:

  • ein Inventarsystem
  • ein Artikelgenerator
  • ein Spielerstatistiksystem
  • ein Spar-System

Drittens , fangen Sie an, Ihr Spiel zu machen, indem Sie diese Probleme einzeln lösen.

Benötigen Sie Hilfe beim Erstellen des Spiels?

Es ist viel einfacher, Ihr Spiel in kleine Aufgaben zu unterteilen. Du machst kein Spiel, du machst ein Inventarsystem. Dann machst du ein Kampfsystem. Und so weiter.

Verwenden Sie diese Tools, um Assets zu erstellen, die Ihr Spiel gut aussehen lassen, es sei denn, Sie sind bereits gut im Zeichnen - oder möchten Monate oder Jahre damit verbringen, gut darin zu werden:

  • Game-Icons.net - diese Symbole machen Spaß und sind einfach zu färben
  • Open Game Art - Holen Sie sich einige großartige gemeinfreie Assets
  • Bulk Resize Photos - ein großartiges Tool zum Erstellen eigener winziger Symbole
  • CSS Sprite Generator - hilft Ihnen beim Erstellen von CSS-Spritesheets für Ihre Symbole

Probleme, auf die ich gestoßen bin und wie ich sie gelöst habe

Spritesheets

Planen Sie mehr als 20 Bilder in Ihrem Spiel? Wenn ja, möchten Sie nicht 20 Bilder mit Bildlinks zu jedem erstellen. Sie denken vielleicht nicht, dass 20 Bilder so viel sind, aber wenn Sie sich entscheiden, 50 weitere hinzuzufügen? Hier bieten sich Spritesheets an. Fügen Sie einige Bilder darauf ein, kopieren Sie die CSS-Datei in Ihr Projekt und fügen Sie einfach die Klasse zu Ihrem Element hinzu, die Ihrem gewünschten Bild entspricht.

Speichern Sie den Status Ihres Spiels

Möchten Sie, dass Ihr Spiel gespeichert wird? Nun, Sie können wählen, ob Sie den LocalStorage des Browsers verwenden oder Dinge auf einem Server speichern möchten. Server erfordern Back-End-Kenntnisse. Wenn Sie keine haben, empfehle ich die Verwendung von LocalStorage. Es speichert das Spiel, solange der Benutzer es nicht mit einem Bereinigungstool löscht. So habe ich es gemacht:

Speichern Sie grundsätzlich alle Ihre Daten in einem Objekt und aktualisieren Sie dann Ihre Elemente beim Laden. Verwenden Sie den JSON-Stringify und analysieren Sie ihn später.

Modularisieren Sie Ihren Code

Finden Sie heraus, welcher Teil fest codiert und welche Teile modularisiert werden sollen. Ich habe fälschlicherweise hartcodierte Zaubersprüche gestartet, die schnell hässlich wurden. Ich brauchte 24 dieser Funktionen zusammen mit 24 ifCritical-Funktionen.

Nun fragen Sie sich vielleicht, wie der zweite Zauber funktioniert. Ich habe eine Funktion playerAttack (), die das Zauberobjekt verwendet, um Dinge zu tun:

  • Zuerst wird die Funktion zum Aktualisieren von Zaubersprüchen ausgeführt, die das Zauberobjekt aufruft. Dann nimmt der Zauber deine aktuellen Statistiken und wandelt sie in Werte wie "Schaden" und "Manakosten" um.
  • Es prüft, ob der Schaden mehr als 0 beträgt. Wenn ja, fügt es dem Boss Schaden zu und zeigt den Schaden, den Zauber, den es verursacht hat, und die Menge an. Dies gilt auch für die meisten anderen Werte. Du denkst vielleicht, dass ein Check größer als Null nutzlos ist, aber du wirst es dir noch einmal überlegen, wenn das Spiel sagt, dass du 0 Schaden angerichtet und 0 Mana wiederhergestellt hast.
  • Dann führt es eine benutzerdefinierte Funktion aus, falls der Zauber eine hat. Dies könnte verwendet werden, um Zaubersprüchen Spezialeffekte zu verleihen, die durch unsere Hauptangriffsfunktion nicht möglich sind.

Die Spielschleife

Für mich überprüft und aktualisiert die Spielschleife Dinge: Spielerstatistiken, ob der Spieler tot ist, ob der Spieler gerade aufgestiegen ist, ob ein Boss tot ist und so weiter.

Sie müssen dies selbst herausfinden. Ich denke, es ist eine gute Lernerfahrung. Überlegen Sie, wofür und wann die Überprüfungen und Aktualisierungen ausgeführt werden müssen. Zum Beispiel habe ich bei einer Levelprüfung festgelegt, dass sie alle 20 Sekunden ausgeführt wird, da das Leveln keine so große Sache ist.

Aber dann habe ich auch einen Boss-Todes-Check, der jede Sekunde nach Kampfbeginn ausgeführt wird. Warum? Die Spieler müssen also nicht 20 Sekunden warten, bis ein Boss stirbt.

Einige andere Dinge müssen nicht einmal in einer Schleife sein. Die Funktionen können nur bei Bedarf aufgerufen werden. Nehmen Sie zum Beispiel meine Update-Zauberfunktion. Es wird nur aufgerufen, wenn ein Spieler einen Zauber benutzt.

Ein paar Dinge, die ich gelernt habe:

  • Objekte sind gut. Auf diese Weise müssen Sie beim Speichern von Daten nur das Objekt speichern - nicht die 50 einzelnen Variablen.
  • Legen Sie Zeitüberschreitungen und Intervalle immer als Variablen fest, damit sie später gelöscht werden können - es sei denn, es handelt sich um dauerhafte Effekte, und Sie sind sicher, dass Sie sie niemals löschen müssen.
  • Eine große Javascript-Datei ist möglicherweise keine gute Idee. CodePen erlaubt nur eine JavaScript-Datei, aber im Idealfall sollten Sie alles in Module unterteilen.
  • Wenn Sie sich keine Sorgen um die Leistung machen, können Sie das Objekt einfach kopieren und einfügen, wenn es aktualisiert werden muss. Sie müssen nicht die Hälfte der Werte einzeln aktualisieren. Wenn das Objekt sehr groß ist, können Sie das Objekt sogar zuerst als Variable definieren wie: var object; und bauen Sie es dann mit einer anderen Funktion auf, wenn Sie möchten, dass es aktualisiert wird. Ich habe das mit meinen Zaubersprüchen gemacht. Jedes Mal, wenn ein Spieler einen Zauber wirkt, definiert die Funktion updateSpell () zuerst das Zauberobjekt erneut, berechnet den gesamten Schaden und die Statistiken und löst dann den Zauber aus.

Lustige Dinge, bei denen ich Kompromisse eingegangen bin:

  • Die Manakosten für Fertigkeiten sind pro Boss-Level, denn wenn sie auf Spielerebene wären, würde ich Spieler für das Aufsteigen bestrafen. Dies machte auch höhere Bosse viel schwieriger, was mir gefiel.
  • Elemente werden mit allen Statistiken erstellt, aber sie werden nicht angezeigt, wenn sie 0 sind. Auf diese Weise muss ich nicht nach undefinierten Werten suchen, und ich kann vermeiden, Statistiken anzuzeigen, wenn sie als 0 generiert werden. Doppelter Gewinn!
  • Ich habe Buffs und Debuffs sehr vereinfacht. Grundsätzlich gibt es eine var buffStat, nerfStat, totalStat und stat. Buffs oder Debuffs stapeln sich also nie.
  • Bei Bossen wird die Fähigkeit nerf stat nicht auf 0 reduziert. Dies ist viel ausgefeilter. Es überprüft die Statistik um 9999999 und prüft dann, ob sie kleiner als 0 ist. Wenn ja, setzt es sie auf 0. Wenn Sie es also schaffen, ein Niveau zu erreichen, in dem Statistiken in Milliardenhöhe vorliegen, muss ich möglicherweise weitere hinzufügen Nullen.

All dies hat mich dazu gebracht, dass ich etwas weiter vorausplanen sollte, auch wenn ich gerade ein lustiges Projekt aufbaue, um meine eigenen Fähigkeiten zu erweitern.

Außerdem habe ich jetzt ein viel besseres Verständnis dafür, wie Fehler entstehen: Manchmal erkennt man nicht alle Randfälle, in denen Dinge die Straße kaputt machen können. Und dann beißen die Käfer.

Bugs und Exploits

Dieser überraschte mich und erschreckte mich ein wenig. Ich konnte nicht glauben, dass mein perfektes Kunstwerk Fehler enthielt!

Ok, ich übertreibe ein bisschen. Aber ich habe die schiere Anzahl von Dingen unterschätzt, die schief gehen könnten, ohne dass ich es überhaupt merkte.

Hier sind ein paar Fehler und Exploits, die auf meinem Kopf aufgetaucht sind:

  1. Sie können die Boss-Level ändern, während Sie gegen einen Boss kämpfen, und auf diese Weise bessere Beutetropfen erhalten
  2. HP- und Mana-Balken würden irgendwann überlaufen
  3. Sie könnten den Boss angreifen, bevor der Kampf überhaupt begonnen hat. Sprechen Sie über einen Trottel!
  4. Mana könnte negativ werden, was dich daran hinderte, selbst grundlegende Angriffe auszuführen. Dies ist die Hauptmethode, mit der du dein Mana wiederherstellen kannst.
  5. Heilungen haben vorübergehend Ihre maximale Gesundheit erhöht.
  6. Ein Zauber war aufgrund eines CSS-Problems die meiste Zeit nicht anklickbar
  7. Wenn du angreifst, während du nicht im Kampf bist, kannst du deine Zauber auf eine unendliche Abklingzeit setzen

Das klingt alles schrecklich, oder? In einem MMORPG würden diese Dinge vom ersten Tag an missbraucht und alles ruinieren!

Die gute Nachricht ist, dass die meisten von ihnen leicht zu reparieren waren - normalerweise mit weniger als einer Codezeile.

Bei anderen Fehlern musste ich jedoch das gesamte System komplett überarbeiten. Mit dem Zaubersystem musste ich nicht mehr 3 ganze Funktionen für jeden Zauber schreiben, sondern brauchte nur noch ein kleines Objekt, dessen Bearbeitung nur wenige Sekunden dauert.

Hier ist mein Spiel, wenn Sie es ausprobieren möchten (beachten Sie, dass es nicht für mobile Geräte optimiert ist):

Und hier ist der Code (der auch Open Source ist und auf CodePen bearbeitet werden kann):

RobertSkalko / LOOT-RPG-v1.0

LOOT-RPG-v1.0 - Töte Bosse und hol dir LOOT! github.com

Denken Sie daran, dass ich ein Anfänger bin (nur 2 Monate in der Programmierung), damit einige meiner Lösungen verbessert werden können. Hoffentlich habe ich dir zumindest die Grundlagen gegeben, um dir den Einstieg zu erleichtern!

Viel Spaß beim Erstellen Ihres Javascript-Spiels!