Wie man Zufallszahlen in Ihrem HTML5-Spiel erstellt - Dummies

Zufallszahlen sind ein wichtiger Bestandteil der HTML5-Spielprogrammierung. Oft willst du ein zufälliges Verhalten. Dies wird verwendet, um die Komplexität und Unberechenbarkeit des Universums nachzuahmen. Die meisten Sprachen haben einen Zufallszahlengenerator eingebaut. Diese spezielle Funktion erzeugt eine Art von Halbzufallszahl. Oft müssen Sie einige Manipulationen vornehmen, damit die Nummer zu dem gewünschten Muster passt.

Die Seite scheint ein wenig komplex zu sein, beschreibt aber ein mächtiges und flexibles System, wenn man weiß, wie man es benutzt. Hier ist was passiert:

1. JavaScript generiert eine Zufallszahl.

   Verschiedene Sprachen tun dies auf verschiedene Arten, aber JavaScript hat eine Funktion, die einen zufälligen Gleitkommawert zwischen 0 und 1 erzeugt. Dieser Wert wird in der Rohbox angezeigt.

2. Multiplizieren Sie den Rohwert mit 100.

   In diesem Beispiel möchten Sie eine Zahl zwischen 1 und 100. Wenn Sie eine 0-zu-1 mit 100 multiplizieren, erhalten Sie 0 bis 99. 9999 (mit vielen Neunen) Wert. Das kommt näher. Das Feld Zeiten 100 zeigt den Rohwert, nachdem er mit 100 multipliziert wurde.

3. Wandelt die große Zahl in eine ganze Zahl um.

   Der Benutzer wird niemals eine Zahl mit 17 Nachkommastellen erraten, also benötigen Sie eine ganze Zahl. JavaScript hat eine Reihe von Möglichkeiten, um eine Gleitkommazahl in eine ganze Zahl umzuwandeln. Um das gewünschte Verhalten von 1 bis 100 zu erhalten, verwenden Sie eine Methode namens Math. Zelle. Das Endergebnis wird im letzten Feld angezeigt.

Hier ist der Code in seiner Gesamtheit:

rand100. html fieldset {Breite: 600px; margin-right: auto; margin-left: auto;} label {float: links; Breite: 250px; Textausrichtung: rechts; Randrecht: 1em; clear: left;} spanne {float: left;} Schaltfläche {display: block; Lösche beide; margin: auto;} function roll () {// Variablen für Formularelemente erstellen var spnRaw = document. getElementById ("spnRaw"); var spn100 = Dokument. getElementById ("spn100"); var spnFinal = Dokument. getElementById ("spnFinal"); // bekomme Zufallszahl var raw = Math. zufällig(); SpnRaw. innerHTML = roh; // multiplizieren mit 100 var times100 = raw * 100; spn100. innerHTML = times100; // Erhalte die Decke var final = Math. Ceil (Zeiten 100); spnFinal. innerHTML = final;} // end roll

Mach zufällige Zahlen 1 - 100
raw 0 mal 100 0 final 0 würfeln

Benutze Mathe für deinen Spielcode

Um dieses Programm zum Laufen zu bringen, müssen die ultimative Waffe der Geekiness aufrufen: Math.

JavaScript hat eine wunderbare Bibliothek namens Math . Die Mathematik-Bibliothek hat einige wirklich geeky Güte darin vergraben, wie eine Reihe von häufig verwendeten mathematischen Funktionen sowie Konstanten (wie Pi) und ein paar andere nützliche Funktionen für die Arbeit mit Zahlen.

Zunächst ist es natürlich die Funktion, die Zufallszahlen erzeugt. Es heißt Mathe. zufällig().

Sie müssen wirklich Mathe sagen. zufällig(). Wenn Sie random () selbst aufrufen, weiß JavaScript nicht, wovon Sie sprechen.

Die Mathematik. Die Funktion random () erzeugt eine Semi-Zufallszahl. (Es ist nicht wirklich zufällig, sondern wird durch eine komplexe Formel aus einer anderen Zahl erzeugt.) Die Zufallszahl wird ein Gleitkommawert zwischen 0 und 1 sein. Dies scheint nicht hilfreich zu sein, aber mit ein wenig Mathematik können Sie konvertieren der Wert von 0 bis 1 auf einen anderen Bereich, den Sie wünschen.

Neben der Funktion random () verfügt das Objekt Math über eine Reihe von Funktionen, mit denen Sie einen Gleitkommawert (dh eine Zahl mit einem Dezimalpunkt) in eine ganze Zahl umwandeln können (Sie haben es erhalten - eine Zahl ohne ein Dezimalpunkt). Die standardmäßige parseInt () -Methode ist in JavaScript integriert, aber manchmal möchten Sie eine größere Konvertierung durchführen. Die Mathematikbibliothek verfügt über eine Reihe dieser Tools:

• Mathematik. round (): Konvertiert eine Zahl mit dem Standard-Rundungsalgorithmus. Wenn der Dezimalteil ist. 5 oder weniger, wird die kleinere ganze Zahl gewählt; wenn der Dezimalteil größer ist als. In 5 wird die größere ganze Zahl gewählt. Das bedeutet, dass 3. 1 auf 3 und 3. 8 auf 4 Runden.

• Mathe. floor (): Diese Funktion rundet immer ab, so dass 3. 1 und 3. 8 beide 3 werden. Die Funktion parseInt () ist identisch mit Math. Fußboden().

• Mathe. ceil (): Diese Funktion (get it - die Deckenfunktion) rundet immer auf, so dass 3. 1 und 3. 8 beide als 4 enden.

Die Funktion, die Sie benötigen, hängt von den spezifischen Umständen ab.

Wie man das HTML-Spielformular erstellt

Wie immer bildet HTML die Grundlage für jedes JavaScript-Programm. Die Hauptsache hier ist das Formular, das die Benutzerschnittstelle bereitstellt. Dieses Formular hat einige vorhersagbare Eigenschaften:

• Eine Spanne, um die Rohdaten zu halten: Für den Benutzer gibt es wirklich nichts einzugeben, also verwenden Sie eine Spanne für die verschiedenen Ausgabeelemente. Spans sind ein generisches Inline-Tag. Sie sind super für Situationen wie diese, wo Sie ein einfaches Ausgabeelement benötigen, das mit dem Hauptfluss der Seite inline sein kann. Die Rohdaten-Spanne wird aufgerufen (hier gehts …) spnRaw.

• Eine weitere Spanne für die Daten times100 : Wenn das Programm die Berechnungen durchführt, zeigt es die Ausgabe an.

• Ein dritter Bereich für die endgültige Ausgabe: Nachdem alle Berechnungen abgeschlossen sind, benötigen Sie eine Möglichkeit, Ihre brillante Arbeit anzuzeigen. spnFinal wird diesem Zweck dienen.

• Beschriftungen, um alles klar zu machen: Ohne Beschriftungen, die erklären, was passiert, gibt es nur ein paar Zahlen auf dem Bildschirm. Vergessen Sie nicht, selbst einfache Beispiele mit Labels zu versehen, damit der Benutzer herausfinden kann, was vor sich geht.

• Eine Schaltfläche zum Starten aller Aktionen: Es wird nichts passieren, bis der Benutzer danach fragt. Fügen Sie dem Formular also eine Schaltfläche hinzu. Wenn Sie auf die Schaltfläche klicken, rufen Sie die Funktion roll () auf, um eine Zahl zu rollen.

• CSS, um alles gut aussehen zu lassen: HTML ohne CSS ist hässlich, also fügen Sie genug CSS hinzu, um das HTML-Formular anständig aussehen zu lassen.