Wie man den Zahlen-Guesser in Deinem HTML5-Spiel baut - Dummies

Mit Zufallszahlen können Sie interessante HTML5-Spiele erstellen. Sehen Sie sich ein einfaches Spiel an, das HTML, CSS und JavaScript zusammen verwendet. Dieses Spiel hat eine Reihe interessanter Features:

• Es benutzt die Webseite als Interface. Wie viele JavaScript-Programme verwendet es eine Webseite als Benutzerschnittstelle. Ein Eingabeelement wird für die Eingabe verwendet, ein div ist das Hauptausgabeelement und eine Schaltfläche löst alle Aktionen aus.

• Es verwendet CSS für das Styling. Die verschiedenen Teile der Seite sind mit CSS formatiert. Das CSS ist zur Vereinfachung und Wiederverwendbarkeit in einem externen Stylesheet gespeichert.

• Er teilt dem Benutzer mit, wie viele Züge er genommen hat. Bei jedem Durchgang erinnert der Computer den Benutzer daran, wie viele Züge passiert sind.

• Wenn der Benutzer richtig geraten hat, wird eine Schaltfläche zum Neustart angezeigt. Diese Schaltfläche wird zuerst ausgeblendet und erscheint nur, wenn sie benötigt wird.

• Die richtige Antwort steht Programmierern über eine spezielle Debugging-Funktion zur Verfügung. Beim Testen des Programms kann der Entwickler sehen, was die richtige Antwort ist, aber diese Informationen sind für den Benutzer verborgen.

• Eine init () Funktion beginnt das Spiel. Die Funktion init () initialisiert das Spiel. Sie wird aufgerufen, wenn das Programm zuerst beginnt und wieder, wenn der Benutzer von vorne beginnen möchte.

• Eine weitere Funktion ist an die -Taste angehängt. Wenn der Benutzer auf die Schaltfläche "Überprüfung prüfen" klickt, wird die Schätzung des aktuellen Benutzers mit der richtigen Antwort verglichen und ein Hinweis an den Benutzer zurückgegeben.

  

Wie man das Spielprogramm gestaltet

Wenn Sie ein komplexes Programm erstellen, müssen Sie mit einem Entwurfsplan beginnen.

Ein Großteil der Arbeit in der Spieleentwicklung geschieht, bevor Sie mit der Programmierung beginnen. Wenn Sie das Spiel gut entwerfen, ist die Programmierung viel einfacher. Ein Spieledesign hilft Ihnen dabei, viele Dinge über das Spiel zu verstehen, bevor Sie anfangen, Code zu schreiben:

• Allgemeines Layout: Das Layout ist zwar nicht vollständig von dieser Zeichnung bestimmt, aber das allgemeine Aussehen ist leicht zu erkennen.

• Benannte Elemente: Jedes Element, das einen Namen haben muss, wurde festgelegt und die Namen werden in das Dokument geschrieben. Einige Elemente (wie die erste Schaltfläche) brauchen keine Namen, weil sie nicht im Code referenziert werden.

• Tastenfunktionen: Jede Taste ruft eine Funktion auf. Das Diagramm zeigt an, welche Funktion jede Taste anruft.

• Funktionspläne: Jede Funktion ist mit einer englischsprachigen Beschreibung der Funktion geplant.

• Globale Variablen: Die Variablen, die zwischen Funktionen aufgeteilt werden müssen, werden beschrieben.

Es ist tatsächlich schwierig, ein gutes Designdokument zu erstellen, aber dadurch wird die Programmierung wesentlich einfacher. Es ist schwer herauszufinden, was Sie zu tun versuchen, und es ist auch schwer herauszufinden, wie Sie es tun können. Ein Design-Dokument trennt diese beiden Prozesse, sodass Sie sich zuerst auf konzentrieren können, was Sie tun, und sich dann um kümmern, wie Sie es tun werden.

So erstellen Sie HTML für das Spiel

Der HTML-Code für das Zahlenrätselspiel ist ziemlich einfach zu schreiben, wenn Sie das Spiel zuerst auf Papier entworfen haben. Hier ist der Code:

Zahlen-Guesser

Zahlen-Guesser
Ich denke an eine Zahl zwischen 0 und 100. Rate meine Zahl, und ich werde sagen, ob du zu hoch, zu niedrig oder korrekt bist. Ihre Vermutung überprüfen Sie Ihre Vermutung noch einmal

Es ist schön, HTML, CSS und JavaScript zu trennen, da Sie mit dieser Vorgehensweise ein großes Problem in eine Reihe kleinerer Probleme "unterteilen" können. Hier sind die Hauptmerkmale des HTML-Dokuments:

1. Link zum CSS in einer externen Datei.

   Im Moment ist das CSS nicht kritisch, daher verschieben Sie es in eine separate Datei, damit Sie später damit arbeiten können.

2. Lagern Sie den JavaScript-Code aus.

   Sie verschieben den JavaScript-Code auch in eine externe Datei, sodass Sie sich darüber keine Sorgen machen müssen. Erstellen Sie im HTML-Code einfach die Verknüpfungen zu den externen Dateien.

3. Erstellen Sie ein Formular als Hauptkomponente der Seite.

   Der wichtigste Aspekt dieser Seite ist das Formular. Wie die meisten Formulare verfügt es über ein Fieldset, Beschriftungen, Eingabeelemente und Schaltflächen.

4. Erstellt ein div für die Ausgabe.

   Das Ausgabe-Div ist nur ein gewöhnliches Div. Sie legen es in das Feldset, damit es eine visuelle Verbindung zum Rest des Formulars erhält. Sie können Standardtext in das div einfügen (obwohl Sie diesen Text wahrscheinlich später ändern werden). Da das div durch Code referenziert wird, benötigt es ein id-Attribut.

5. Erstellen Sie einen Eingabebereich für die Schätzung des Benutzers.

   Der Benutzer muss eine numerische Eingabe eingeben. Verwenden Sie zu diesem Zweck ein Eingabeelement. Lesen Sie in Ihrer Dokumentation die ID dieses Elements. (Du hast ein Designdokument gemacht, oder?) Es ist schön, der Eingabe ein Label hinzuzufügen, damit der Benutzer weiß, was dort erwartet wird.

6. Erstellen Sie eine Schaltfläche zum Überprüfen der Schätzung.

   Der Nutzer legt keine Vermutung fest, bis er auf die Schaltfläche "Ihre Vermutung überprüfen" klickt. Also, Sie müssen wirklich einen solchen Knopf haben. Diese Schaltfläche benötigt keinen Namen, ruft aber die Funktion checkGuess () auf.

7. Erstellen Sie eine zweite Schaltfläche, um erneut zu beginnen.

   Ein interessantes Feature dieses Programms ist eine Schaltfläche, mit der der Benutzer neu starten kann. Diese zweite Schaltfläche ist nur verfügbar, wenn der Benutzer die Antwort richtig erraten hat. Sie erstellen es mit gewöhnlichem HTML und verwenden CSS- und JavaScript-Tricks, damit es verschwindet und bei Bedarf angezeigt wird.