So erstellen Sie Zufallszahlen in Ihrem HTML5 Spiel

Zufallszahlen sind ein wichtiger Bestandteil von HTML5-Spiele-Programmierung. Oft wollen Sie irgendeine Art von zufälligen Verhalten. Dies wird verwendet, um die Komplexität und Unberechenbarkeit des Universums zu imitieren. Die meisten Sprachen haben einen Zufallszahlengenerator eingebaut. Diese spezielle Funktion eine Art semi-Zufallszahl erzeugt. Oft werden Sie einige Manipulation zu tun haben, die Zahl zu machen, um das Muster passen Sie wollen.

bild0.jpg

Die Seite scheint ein wenig komplex, aber es beschreibt ein leistungsfähiges und flexibles System, wenn Sie wissen, wie es zu benutzen. Hier ist, was passiert:

  1. javascript erzeugt eine Zufallszahl.

    Verschiedene Sprachen tun dies auf unterschiedliche Weise, aber javascript hat eine Funktion, die einen zufälligen Floating-Point-Wert zwischen 0 und 1. Dieser Wert erzeugt wird, in dem rohen Feld angezeigt.

  2. Multiplizieren Sie den rohen Wert von 100.

    In diesem Beispiel möchten Sie eine Zahl zwischen 1 und 100. Wenn Sie ein 0-zu-1 mit 100 multiplizieren, erhalten Sie 0-99,9999 (mit viel Neunen) Wert. Das ist immer näher. Die mal 100 Box zeigt den rohen Wert, nachdem dieser mit 100 multipliziert wurde.

  3. Konvertieren Sie die große Zahl in eine ganze Zahl.

    Der Benutzer wird nie eine Zahl mit 17 Stellen nach dem Komma zu erraten, so benötigen Sie eine ganze Zahl ist. javascript hat eine Reihe von Möglichkeiten, einen Schwimmer in eine Ganzzahl umzuwandeln. Um die 1 bis 100 Verhalten erhalten Sie suchen, benutzen Sie eine Methode namens Math.ceil. Das Endergebnis wird in der letzten Box gezeigt.

Hier ist der Code in seiner Gesamtheit:

rand100.html

Machen Sie Zufallszahlen 1 bis 100

Verwenden Sie Mathe für Ihren Spiel-Code

Um dieses Programm funktioniert, müssen Sie in die ultimative Waffe der geekiness nennen: Math.

javascript hat eine wunderbare Bibliothek mit dem Namen Mathe. Das Mathe Bibliothek hat einige wirklich geeky Güte darin begraben, wie eine Reihe von häufig verwendeten mathematischen Funktionen sowie Konstanten (wie pi) und ein paar andere Utility-Funktionen für Arbeit mit Zahlen.

Zunächst ist selbstverständlich die Funktion, die Zufallszahlen erzeugt. Man nennt es Math.random ().

Sie müssen wirklich sagen Math.random (). Wenn Sie anrufen zufällig() von selbst, wird javascript nicht wissen, was du redest.

Das Math.random () Funktion erzeugt eine semi-Zufallszahl. (Es ist nicht wirklich zufällig, sondern wird durch eine komplexe Formel, die aus einer anderen Zahl hergestellt werden.) Die Zufallszahl wird ein Fließkommawert zwischen 0 und 1. Dies gilt nicht hilfreich sein, aber mit ein wenig Mathematik, können Sie konvertieren die von 0 bis 1 Wert zu jedem anderen Bereich, den Sie möchten.

In Ergänzung zu zufällig() Funktion, die Mathe Objekt verfügt über eine Reihe von Funktionen, mit denen Sie einen Fließkommawert zu konvertieren (das heißt, eine Zahl mit einem Dezimalpunkt) auf eine ganze Zahl (Sie haben es - eine Reihe ohne ein Komma). Der Standard parseInt () Methode in javascript gebaut, aber manchmal will man eine schickere Umwandlung zu tun. Die Math-Bibliothek hat eine Anzahl dieser Werkzeuge:

  • Math.round ()Wandelt eine Zahl, die die Standardrundung Algorithmus. Wenn der Dezimalteil 0,5 oder weniger beträgt, die kleinere ganze Zahl ist chosen- wenn der Dezimalteil größer als 0,5 ist, desto größer ganze Zahl gewählt wird. Das bedeutet, dass 3,1 bis 3 Runden Runden und 3,8 bis 4 ist.

  • Math.floor (): Diese Funktion rundet immer nach unten, so 3.1 und 3.8 werden beide 3. parseInt () Funktion ist identisch mit Math.floor ().

  • Math.ceil (): Diese Funktion (get it - die Funktion Decke) rundet immer, also 3.1 und 3.8 sowohl als 4 enden.

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

Wie man die HTML-Spiel Formular

Wie immer bildet HTML die Grundlage eines jeden Programms javascript. Die Hauptsache hier ist die Form, die die Benutzeroberfläche zur Verfügung stellt. Diese Form hat einige vorhersagbare Eigenschaften:

  • Eine Spanne, die Rohdaten zu halten: Es gibt wirklich nichts für den Benutzer-Typ, so verwenden, um eine Spanne für die verschiedenen Ausgangselementen. Spans sind ein allgemeiner Inline-Tag. Sie sind super für Situationen wie diese, wo man einige einfache Ausgangselement benötigen, die mit dem Hauptstrom der Seite inline sein kann. Die Rohdaten Spanne wird (hier gehen Sie...) Genannt spnRaw.

  • Eine weitere Spanne für die times100 Daten: Da das Programm die Berechnungen der Fall ist, wird die Ausgabe anzuzeigen.

  • Eine dritte Spanne für die endgültige Ausgabe: Nachdem alle Berechnungen fertig sind, müssen Sie eine Möglichkeit, Ihre brillante Arbeit anzuzeigen. spnFinal wird diesem Zweck dienen.

  • Labels alles klar zu machen: Ohne Etiketten zu erklären, was passiert ist, gibt es nur ein paar Zahlen auf dem Bildschirm sein. Vergessen Sie nicht, Etiketten, um noch auf einfache Beispiele, damit der Benutzer herausfinden, was los ist.

  • Eine Taste zum Starten der ganze Aktion: Nichts wird passieren, bis der Benutzer danach fragt, so eine Schaltfläche zum Formular hinzufügen. Wenn die Schaltfläche geklickt wird, haben nennen es die rollen() Funktion eine Zahl zu rollen.

  • CSS zu machen es gut aussehen: HTML ohne CSS ist hässlich, so fügen Sie genug CSS das HTML-Formular anständig aussehen zu lassen.

Menü