Ich baute eine Rolle-spielen-Spiel in JavaScript

[pg_quiz id='1']

Ich hatte Angst, die Verwendung von Objekten, zum Beispiel. Sie waren dieses große gruselige Sache, die ich ad Acta gelegt Weg für später. Aber jetzt habe ich Sie alle die Zeit nutzen! Zuerst wählen Sie den Punkt zu Ihrem Spiel. Ist es ein Rätsel? Ein RPG…
wie man eine javascript-Spiel

So dass Sie wollen, um zu versuchen und machen ein Spiel, aber ein bisschen eingeschüchtert? Keine Sorge, ich war auch!

Ich hatte Angst, die Verwendung von Objekten, zum Beispiel. Sie waren dieses große gruselige Sache, die ich ad Acta gelegt Weg für später. Aber jetzt habe ich Sie alle die Zeit nutzen!

Ich werde gehen Sie durch alle Schritte, die ich ging durch meinen JavaScript-Rollenspiel.

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

Erste, wählen Sie den Punkt des Spiels. Ist es ein Rätsel? Ein RPG? Ein hack & slash? Alle Rechte, denken Sie jetzt über die technischen Schwierigkeiten der Herstellung. Ein puzzle-Spiel erfordert eine Menge komplizierte javascript. Ein hack & slash würde müssen viel sorgfältiger balancing und so weiter.

Außerdem entscheiden Sie, ob Sie wollen, dass es ein browser-Spiel, Handy-Spiel, oder beide (“native web” – Spiel).

Zum Beispiel, mein Spiel kann nicht richtig auf dem Handy-Bildschirm, weil der Spieler hat 24 Zauber. Das ist nicht komfortabel Klick auf die kleinen Tasten auf einem kleinen Bildschirm, so dass ich brauchen würde, um die Umgestaltung der Spiel für das Handy.

Zweite, notieren Sie sich alle die Dinge, die Sie Programmieren müssen, um tatsächlich das Spiel machen. Für mich war es:

  • ein Inventar-system
  • ein Element generator
  • ein Spieler stat-system
  • eine saving-system

Drittens, beginnen Sie Ihr Spiel durch die Lösung dieser Probleme eins nach dem anderen.

Hilfe benötigen eigentlich ein Spiel erstellen?

Es ist viel einfacher zu brechen Sie Ihr Spiel nach unten in kleine Aufgaben. Sie sind nicht so ein Spiel, du machst eine Inventar-system. Dann machen Sie combat system. Und so weiter.

Es sei denn, Sie sind bereits gut im zeichnen — oder wollen Sie verbringen Monate oder Jahre immer gut — verwenden Sie diese Werkzeuge zum erstellen von Vermögenswerten, die machen Sie Ihr Spiel gut Aussehen:

  • Game-Icons.net — diese Symbole sind Spaß und einfach Farbe
  • Offenes Spiel-Kunst — Holen Sie sich einige gute public-domain-Vermögen
  • Bulk Resize Fotos — ein großes Werkzeug für die Herstellung Ihrer eigenen kleinen Symbole
  • Der CSS-Sprite Generator hilft Ihnen, CSS-spritesheets für Ihre Symbole

Probleme, die ich mit Ihnen zusammentraf, und wie ich diese gelöst

Spritesheets

Planen Sie auf dem haben von mehr als 20 Bilder in deinem Spiel? Wenn dem so ist, Sie will nicht 20 Bilder mit Bild-links zu jedem. Sie könnten nicht denken, 20 Bilder ist, dass viel, aber wenn Sie sich entscheiden, fügen Sie 50 mehr? Das ist, wo spritesheets in handliches kommen. Ein paar Bilder auf Sie kopieren Sie die CSS-Datei zu Ihrem Projekt, und fügen Sie einfach die Klasse, um Ihr element, das entspricht mit Ihrem gewünschten Bild.

Speichern Ihres Spiels Zustand

Wollen Sie Ihr Spiel zu speichern? Auch Sie können wählen zwischen der Verwendung des Browsers “LocalStorage” und die Speicherung von Sachen auf einem server. Server benötigen eine back-end-wissen. Wenn du keines hast, schlage ich vor, “LocalStorage”. Es speichert das Spiel, solange der Benutzer nicht löschen Sie es mit einigen cleanup tool. Hier ist, wie ich es gemacht habe:

Im Grunde, speichern Sie alle Ihre Daten in einem Objekt, dann aktualisieren Sie Ihre Elemente auf Last. Verwenden Sie die JSON stringify und parse es später.

Modularisieren Sie Ihre code

Herauszufinden, welcher Teil zu schwer-code und die Teile zu Modularisieren. Ich versehentlich fing hard-coding Zaubersprüche, die bekam schnell hässlich. Ich brauchte 24 diese Funktionen, zusammen mit 24 ifCritical Funktionen.

Nun mögen Sie sich Fragen, wie unterscheidet sich der zweite Zauber funktionieren? Ich habe eine Funktion playerAttack() verwendet, die Zauber-Objekt, um Dinge zu tun:

  • Es wird zuerst das update-Zauber-Funktion, die nennt sich die Zauber-Objekt. Dann ist der Zauber dauert deine aktuellen stats und verwandelt Sie in Werte wie “Schaden” und “Manakosten”.
  • Es prüft, um zu sehen, ob der Schaden mehr als 0. Wenn ja, es macht Schaden auf boss und zeigt den Schaden, der Zauber Tat es, und die Menge. Er tut dies für die meisten anderen Werte auch. Man könnte denken, dass ein größer-als-null-check ist nutzlos, aber du wirst wieder denken, wenn das Spiel sagt du hast 0 Schaden und 0 mana wiederhergestellt.
  • Dann läuft es eine benutzerdefinierte Funktion, wenn der Zauber ein. Dies könnte benutzt werden, um Zaubersprüche spezielle Effekte, die nicht durch unsere Haupt-Angriff-Funktion.

Die game loop

Für mich, der Spiel-Schleife prüft und aktualisiert die Dinge: Spieler stats, ob der Spieler tot ist, ob der Spieler gerade hochgelevelt, ob ein boss tot ist, und so weiter.

Sie müssen diese Abbildung einen aus sich selbst. Ich denke, es ist eine gute Lernerfahrung. Nachdenken für was und Wann die Prüfungen und updates ausführen zu müssen. Zum Beispiel mit einer Wasserwaage überprüfen, habe ich es alle 20 Sekunden da der Abgleich ist nicht so große Sache.

Aber dann habe ich auch einen Boss-Tod-check, das läuft in jeder Sekunde, die nach der Schlacht beginnt. Warum? So müssen die Spieler nicht warten Sie 20 Sekunden für einen boss zu sterben.

Einige andere Dinge, die nicht sogar brauchen, um in einer Schleife. Die Funktionen können nur aufgerufen werden, wenn Sie benötigt werden. Nehmen Sie meine update-Zauber-Funktion, zum Beispiel. Es ist nur aufgerufen, wenn ein Spieler einen Zauberspruch.

Ein paar Dinge, die ich gelernt habe:

  • Die Objekte sind gut. Auf diese Weise, wenn Sie haben, um Daten zu speichern, müssen Sie nur das Objekt zu speichern — nicht die 50 einzelnen Variablen.
  • Immer timeouts und Intervalle als Variablen, so dass Sie gelöscht werden, kann später auf — es sei denn, Sie sind mit dauerhaften Folgen, und Sie sind sicher, Sie werden nicht immer brauchen, um Sie zu löschen.
  • Eine große javascript-Datei ist möglicherweise keine kluge Idee. CodePen, erlaubt nur eine JavaScript-Datei, aber idealerweise sollten Sie alles in Module.
  • Wenn Sie nicht besorgt über die Leistung, Sie können einfach kopieren und fügen Sie das Objekt, wenn es aktualisiert werden muss — keine Notwendigkeit für die Aktualisierung der Hälfte der Werte individuell. Wenn das Objekt ist riesig, man kann sogar definieren, die das Objekt zunächst, als eine variable wie: var Objekt; und dann bauen Sie es mit einer anderen Funktion, wenn Sie wollen, dass es aktualisiert werden. Ich Tat dies mit meinen spells. Jedes mal, wenn Spieler einen Zauberspruch, der updateSpell () – Funktion definiert zunächst die Zauber-Objekt wieder, berechnet den Schaden und stats, und dann feuert den Zauber.

Lustige Dinge, die ich habe kompromittiert:

  • Geschick mana Kosten sind pro boss-level, weil, wenn Sie waren auf der Spieler-Ebene, würde ich Sie bestrafen Spieler für die Nivellierung. Auch dies machte die höhere Ebene Bosse viel schwieriger ist, die ich mochte.
  • Elemente erstellt werden mit allen Statistiken, aber Sie werden nicht angezeigt, wenn Sie 0 sind. Ich habe auf diese Weise brauchen Sie nicht zu überprüfen, für nicht definiert, und ich kann vermeiden, dass Statistiken, wenn Sie generiert, wie 0. Doppelt gewinnen!
  • Ich habe vereinfacht, buffs und debuffs eine Menge. Im Grunde, es ist ein var buffStat, nerfStat, totalStat und stat. Also buffs oder debuffs nie stack.
  • Mit Bosse, nerf stat skill nicht wirklich nerf auf 0. Das ist viel anspruchsvoller als die. Es nerfs der stat von 9999999, dann überprüft, um zu sehen, wenn es weniger als 0 ist. Wenn ja, wird es auf 0. Also, wenn es Ihnen gelingt, einen level erreichen, wo Sie haben Statistiken, die in die Milliarden, könnte ich mehr Nullen.

Was all das gedacht hat, ist mir, dass ich sollte ein bisschen planen weiter in die Zukunft, auch wenn ich mich nur ein Spaß-Projekt zu erweitern die eigenen Fähigkeiten.

Auch ich habe jetzt ein viel besseres Verständnis dafür, wie Fehler entstehen: manchmal Sie nicht erkennen, alle Grenzfälle, wo die Dinge können, brechen die Straße. Und das ist, wenn die Wanzen beißen.

Bugs und Exploits

Diese eine hat mich erstaunt und erschreckt mich ein wenig. Ich konnte nicht glauben, dass meine perfekte Stück Kunst ist, die bugs!

Ok, ich übertreibe ein bisschen. Aber ich habe unterschätzt die schiere Anzahl der Dinge, die schief gehen könnte, ohne mich selbst zu verwirklichen.

Hier ein paar bugs und exploits, die aufgetaucht sind, aus der Spitze von meinem Kopf:

  1. Sie könnte sich ändern, boss-levels, während du gegen einen boss kämpfst, und bessere Beute Tropfen, Weg
  2. HP und Mana bars würde irgendwann überlaufen
  3. Man könnte Angriff der boss vor dem Kampf einmal begonnen. Sprechen Sie über ein sucker punch!
  4. Mana gehen könnte negative, die verhindert, dass Sie können ausführen, auch grundlegende Angriffe, das ist die wichtigste Weise, die Sie wiederherstellen können Ihr mana.
  5. Heilt vorübergehend erhöht Ihre maximale Gesundheit.
  6. Ein Zauber war nicht wirklich anklickbar meisten der Zeit, die durch ein CSS-problem
  7. Anzugreifen die zwar nicht im Kampf legen Sie Ihre Zauber auf unendliche Abklingzeit

Diese alle klingen erschreckend richtig? In einem MMORPG, diese Dinge missbraucht werden, vom ersten Tag an und ruinieren alles!

Nun, die gute Nachricht ist, dass die meisten von Ihnen waren leicht reparierbar — in der Regel mit weniger als 1 Zeile code.

Andere Fehler, obwohl, mich komplett zu überarbeiten das gesamte system. Mit dem Bann-system, ich ging aus dem schreiben zu müssen 3 ganze Funktionen für jeden Zauber benötigen nur ein kleines Objekt, das dauert nur ein paar Sekunden zu Bearbeiten.

Wieder, hier ist mein Spiel, wenn Sie wollen, probieren Sie es aus (beachten Sie, dass es nicht für mobile Geräte optimiert):

Und hier ist der code (die auch open-source-und editierbar auf CodePen):

Halten Sie im Verstand, ich bin ein Anfänger (nur 2 Monate in die Programmierung) so einige meiner Lösungen verbessert werden kann. Hoffentlich aber, ich habe dir zumindest die Grundlagen, um Ihnen den Einstieg!

Leave a Reply

Your email address will not be published. Required fields are marked *