Wie Arrays zu verwenden, um Daten in Ihrem HTML5 Spiel zu vereinfachen

HTML5-Spiele sind über Daten- oft das bedeutet ein Los

von Daten. Ein Array ist die grundlegendsten Tool-Programmierer für die Verwaltung großer Datenmengen. javascript unterstützt eine einfache, aber sehr leistungsfähige und flexible Array Mechanismus, die Sie tun viel mit Arrays können.

Ein Array ist eigentlich eine sehr einfache Ideen- es ist einfach eine Liste. Du hast bereits Listen oft in HTML-Codierung verwendet, aber in der Programmierung werden Listen Arrays genannt, und haben spezielle Eigenschaften. Dieses Beispiel verfügt über zwei Arrays - eine Liste der Bücher von einem gewissen charmanten und teuflisch gut aussehend Autor geschrieben, und einige der Themen, sagte Autor schreibt über.

Diese Seite hat vier Hauptkomponenten:

• HTML-Struktur: Es hat eine Form mit zwei Tasten. Das Körper Funktion ruft eine Initialisierung, wenn es geladen wird, und jede Taste ruft seine eigene Funktion. Die Seite hat auch eine div genannt Ausgabe.

• Ein drin() Funktion: Diese Funktion ermöglicht den Zugriff auf die Ausgang div, und es lädt sich auch die beiden Arrays in diesem Beispiel beschrieben. Arrays erfordern in der Regel eine Art von Initialisierung.

• Das showBooks () Funktion: Sie werden erstaunt sein, und überrascht, dass diese Funktion eine Reihe von Buchtitel anzeigt.

• Das showTitles () Funktion: Diese Funktion zeigt einen anderen Weg durch die Elemente eines Arrays zu gehen.

Wie die Spielfelder zu bauen

Arrays werden häufig als globale Variablen erstellt, weil sie oft im gesamten Programm verwendet werden (und in einigen Sprachen kann ein Array als Parameter übergeben werden Art kompliziert).

In diesem Programm können Sie eine Reihe von Variablen im globalen Raum erstellen und initialisieren sie alle in der drin() Funktion aufgerufen mit body.onload.

 var output-var Bücher-var Themen-Funktion init () {// initialisieren Ausgang und Arrays // von basicArrays.htmloutput = document.getElementById ( "output") - Bücher = Array ( "Flash Game Programming for Dummies", "Game Programmierung, die L-Linie "," HTML / XHTML / CSS All in One "," javascript und AJAX für Dummies "," HTML5 Quick Reference ") - Themen = Array (5) -Themen [0] =" HTML5 "-Themen [1] = "CSS3" -Themen [2] = "javascript" -Themen [4] = "AJAX" -} // end init

Einstellen der Arrays up ist der wichtigste Teil des Prozesses:

1. Erstellen Sie Variablen für die Arrays.

   Es gibt zwei Arrays in diesem Beispiel Bücher und Themen. Jeder wird erstellt wie jede andere Variable, mit der var Erklärung. Sie schaffen auch eine Ausgabe Variable, die einen Verweis auf die zu halten Ausgabe div.

2. Bauen Sie sich ein drin() funktionieren, um Variablen zu initialisieren.

   Da die Programme immer komplexer werden, ist es üblich, eine Funktion zur Initialisierung haben alles einzurichten. Diese Funktion wird aufgerufen mit body.onload.

3. Bauen Sie die Ausgabe Variable.

   Da alle anderen Funktionen verwenden Ausgabe, Sie schaffen es in drin().

4. Verwenden Sie die Array () Funktion, um die Anordnung von Bücher zu erstellen.

   Diese Sonderfunktion wird verwendet, um ein Array von Elementen zu erstellen. Beachten Sie, dass es einen Groß verwendet EIN. (Wenn Sie technisch sein muss, ist dies ein Konstruktor für eine Feld Objekt, aber in javascript, das ist eine Funktion, auch.)

5. Liste einfach jedes Buch als Parameter in der Array () Funktion.

   Wenn Sie füttern die Feld Funktion eine Reihe von Werten, werden sie die Werte des Arrays. Diese Technik ist groß, wenn Sie bereits wissen, was in jedes Element zu gehen, wenn Sie das Array bauen.

6. Erstellen Sie die Themen Array anders.

   Das Themen Array ist mit einer anderen Technik aufzubauen. In dieser Anordnung können Sie eine einzelne Ganzzahl angegeben werden, die die Anzahl der Elemente das Array enthält.

7. Verwenden Sie den Index-Operator auf Elemente zum Array hinzufügen.

   Alle Array-Elemente haben den gleichen Namen, aber sie haben eine andere Zahl. Verwenden Sie eckigen Klammern mit einer ganzen Zahl auf ein bestimmtes Element in dem Array zu verweisen. Beachten Sie, dass Array-Elemente beginnen immer mit dem Element Null.

Wenn Sie Arrays in anderen Programmiersprachen verwendet haben, werden Sie javascript-Arrays finden sehr nachsichtig zu sein. Seien Sie aber vorsichtig, da Arrays eine jener Eigenschaften, die jede Sprache unterstützt, aber sie alle ein wenig anders funktionieren. Sie finden tatsächlich die javascript-Arrays mehr wie das sind Anordnungsliste in Java oder die Vektor Klasse in C ++ als die traditionelle Anordnung in einer dieser Sprachen.

Die Bücher Array Ihre Spiele vorzubereiten

Arrays sind wunderbar, weil sie Ihnen eine Menge von Daten in einer einzigen Variablen zu packen. Sehr oft, wenn Sie ein Array haben, möchten Sie etwas mit jedem Element in dem Feld zu tun. Die häufigste Struktur, dies zu tun, ist ein für Schleife. Ansehen showBooks () Ein Beispiel:

 Funktion showBooks () {// von basicArrays.htmloutput.innerHTML = "" -für (i = 0- i lt; books.length- i ++) {output.innerHTML + = Bücher [i] + "
"-} // End for-Schleife} // end showBooks

Diese Funktion Schritte durch die Liste der Bücher und gibt den Namen eines jeden im Ausgangsbereich:

1. Deaktivieren Sie das Ausgabe div.

   Ausgabe bereits in der definiert drin() Funktion, es ist so ziemlich einfach sein Wert in der Funktion zu löschen.

2. Baue eine Schleife für die Länge des Arrays.

   Arrays und für Schleifen sind natürliche Partner. In dieser Schleife, Sie haben ich Zählen von Null bis zur Anzahl der Elemente in dem Array.

3. Beginnen Sie mit Null.

   Array-Indizes beginnen immer mit Null, so dass Ihre Zählvariable auch bei Null (in den meisten Fällen) beginnen soll.

4. Verwenden Sie die Eigenschaft length, um zu bestimmen, wie lange das Array ist.

   Wenn Sie eine bauen für Schleife durch eine Anordnung zu dem Schritt, was Sie wirklich wissen wollen, ist, wie viele Elemente im Array sind. Benutzen arrayName.length die Anzahl der Elemente in dem aktuellen Array zu bestimmen, wobei Arrayname ist der Name des aktuellen Arrays. Auf diese Weise, selbst wenn die Anzahl der Elemente in dem Array ändert, noch die Schleife richtig funktioniert.

5. Prozessdaten innerhalb der Schleife.

   Wenn die Zählvariable ist ich, wobei jedes Element des Arrays Arrayname [i] innerhalb der Schleife. Sie können tun, was Sie mit den Daten wollen.