JavaScript Fun: Baue ein Ratespiel mit Zahlen!

1. Willkommen beim Kurs!: Hey, willkommen in dieser Klasse. Wenn Sie ein Webentwicklungsanfänger sind und einfach nur einspringen und einige lustige Projekte erstellen möchten, Sie bei uns genau richtig. Die Idee hinter diesen Serien ist es, Ihnen zu zeigen, was Sie mit normalem HTML, CSS und JavaScript tun können . Wir werden keine Frameworks, keineBoilerplate, keine Bibliotheken oder irgendwelcheVorlagen verwenden Boilerplate, keine Bibliotheken oder irgendwelche , stattdessen werden wir alles komplett von Grund auf neu erstellen, Schritt für Schritt, um Ihnen zu zeigen, wie diese drei Technologien arbeiten alle zusammen. Das Projekt dieser Klasse wird eine Vermutung das Zahlenspiel sein. Ein Computer erzeugt eine Zufallszahl zwischen eins und 100, und dann können wir wählen, ob wir versuchen, dies in fünf oder zehn Versuchen zu erraten. Wenn wir eine dieser Optionen auswählen, diese [unhörbar] unsere Spielansicht, wo wir jede Vermutung in diese Eingabe hinzufügen können , die einen Wert wie 50 im Inneren hier ersetzen wird. Wir sehen, dass unsere Vermutung zu hoch ist. Das bedeutet jetzt, da unsere Vermutung zu hoch ist, liegt die richtige Zahl jetzt im aktuellen Bereich von 1-50. Wir können dann eine zweite Vermutung hinzufügen. Das ist auch zu hoch, also bedeutet das jetzt, dass unsere Reichweite zwischen 1 und 25 liegt. Gehen wir für fünf, es ist einfach zu niedrig, 12, und wir fangen an, diesen Bereich zwischen 12-25 einzugrenzen. Während wir diese Vermutungen machen, protokollieren wir auch die Zahl, die vorherigen Versuche sowie die vorherigen Vermutungen, damit wir die Dinge verfolgen können, während wir gehen. Wir haben jetzt sechs weitere Versuche, das in Ordnung zu bringen. Lassen Sie uns für 20, 22 gehen, und bei dieser Gelegenheit war die richtige Vermutung 23. Siehst du, wir haben das in acht Versuchen richtig. Wir haben dann die Möglichkeit, ein neues Spiel zu starten, das uns zurück zu unserem Startbildschirm führt. Dieses Spiel ist komplett von Grund auf neu konstruiert. Wir verwenden reguläre HTML, um die gesamte Benutzeroberfläche zu konstruieren. Danach nutzen wir CSS für Styling, Positionierung und Layout. Dann stellen wir JavaScript vor, um unser Spiel voll interaktiv zu machen. Wir behandeln alle Funktionen mit regulärem JavaScript. Wir müssen die Eingaben des Benutzers erfassen. Wir müssen eine Zufallszahl zwischen eins und 100 generieren und diese dann mit der Vermutung des Benutzers vergleichen. Wir müssen alle vorherigen Versuche protokollieren. Wir müssen Schwierigkeitseinstellungen hinzufügen. Wir müssen handhaben, was zu tun ist, wenn das Spiel vorbei ist und auch den Bereich Schieberegler aktualisieren, obwohl der Benutzer kann es nach jeder ihrer Vermutungen eingrenzen. Das ist also, was wir bauen werden. Ich freue mich, Ihnen das beizubringen. Lassen Sie uns in die erste Lektion springen. 2. Teile deine Arbeit auf Skillshare!: Wenn Sie an einem Kurs teilnehmen, ist es wirklich wichtig, dass Sie sich nicht angewöhnen diesen Kurs zu verfolgen , nur um eine weitere Vorlesung abzuhaken. Nehmen Sie sich die Zeit, jede Lektion zu bearbeiten, den Code, den Sie schreiben, zu überprüfen und darüber nachzudenken, wie Sie diese Lösungen selbst angehen könnten . Vor diesem Hintergrund ist dieser Kurs projektbezogen und bietet Ihnen die Möglichkeit, wirklich etwas Persönliches und Einzigartiges zu schaffen. Du musst dich nicht zu sehr verirren und vom Unterricht abgelenkt werden . Du kannst sogar einen Schritt zurücktreten, nachdem du den Kurs beendet hast, und danach zurückkommen und einige Projektänderungen vornehmen. Das gibt dir wirklich eine gute Gelegenheit, das Gelernte außerhalb des Unterrichts zu üben . Denke auch daran, dein Projekt auch hier auf Skillshare zu teilen und nur ich werde es mir ansehen, aber es wird auch Kommilitonen inspirieren. Weitere Informationen zum Klassenprojekt findest du auf der Registerkarte Projekt und Ressourcen, wo du nicht nur dein Projekt hochladen kannst, sondern auch andere Klassenprojekte sehen kannst. In diesem Sinne freue ich mich darauf zu sehen, was Sie hier auf Skillshare erstellen und hochladen. 3. So erstellst du die Benutzeroberfläche: Hey, willkommen zum Start dieses neuen Spiels und diesem neuen Abschnitt. Das ist ein erster Blick auf das, was wir bauen werden. Es ist ein Zufallszahlenspiel, bei dem der Benutzer eine Zufallszahl zwischen 1-100 generieren wird, und dann entweder bei 10 Versuchen oder fünf Versuchen, je nachdem, welcher der Benutzer wählt. Wir haben dann die Chance zu erraten, welche Nummer der Computer generiert hat. So 1-100 ist eine ziemlich breite Palette, so dass wir während des Spiels auch einige Hinweise bekommen, lassen Sie uns wissen, ob wir zu hoch oder zu niedrig sind. Unsere Vermutung von 50 ist zu hoch, was bedeutet, dass unsere aktuelle Reichweite jetzt bei 0-50 liegt, und die Zahl ist irgendwo in diesem Abschnitt. Wir sehen auch die Anzahl der vorherigen Versuche unten und wir erstellen auch ein Protokoll der vorherigen Vermutungen, damit der Benutzer weiß, welche er in der Vergangenheit ausgewählt hat. Gehen wir für 20, 10 und 1. Nun, unsere Nummer ist zwischen Eins und 10. Gehen wir für 5, 2, und jetzt haben wir das in sechs Versuchen. Die Nummer war zwei. Dann haben wir die Möglichkeit, ein neues Spiel auszuwählen und neu mit dem einfachen oder harten Modus zu starten. Wie immer werden wir mit der Erstellung der Benutzeroberfläche mit HTML beginnen. Wir werden diesen Abschnitt hier erstellen, der ein Wrapper ist, und dann im Inneren werden wir zwei Abschnitte erstellen. Der erste wird der Wrapper für alles sein , was wir auf dem Startbildschirm gerade hier sehen, einschließlich des Textes und auch der beiden Schaltflächen. Der zweite Abschnitt wird der Spielbereich sein, den Sie hier sehen. Lassen Sie uns auf dem Desktop beginnen, indem Sie einen neuen Projektordner erstellen. Wir wollen das hier nennen „Guess a Number“. Ziehen Sie diese dann im Texteditor, um dies zu öffnen. Wir können entweder eine neue Datei erstellen, indem Sie auf dieses Symbol nur hier klicken, oder verwenden Sie Command oder Control N, um eine neue Datei zu erstellen, die die index.html sein wird. Lassen Sie uns einige HTML-Struktur zu diesem Dokument hinzufügen. Ich werde den Emmet Befehl verwenden, der HTML:5 ist. Der Dokumenttitel von erraten ein Zahlenspiel. Dann unten im Körper, werden wir unseren Hauptabschnitt erstellen , der der Wrapper sowohl für unseren Startbildschirm als auch für den Spielbereich ist. Wir werden unser div erstellen, das der Willkommensbildschirm sein wird. Lassen Sie uns diesem eine ID des Begrüßungsbildschirms geben, und auch kurz danach werden wir unseren zweiten Abschnitt erstellen. Dieser wird eine ID des Spielbereichs haben. Beginnen wir im ersten Abschnitt, der der Willkommensbildschirm ist, und dies ist der Abschnitt, den Sie gerade hier sehen. Wir beginnen ganz oben mit einer Überschrift. Lassen Sie uns dies innerhalb unseres ersten div hinzufügen. Der Text ist, erraten Sie die Zufallszahl. Dann werden wir ein Break-Tag hinzufügen, nur um die nächste Zeile direkt darunter zu platzieren, also zwischen eins und 100. Dann gleich danach werde ich einen Abschnitt erstellen, der den Schwierigkeitstitel und auch die beiden Tasten haben wird . Der erste wird den Text der Auswahl Schwierigkeitsgrad innerhalb des P-Elements haben . Gefolgt von einem div, das der Wrapper für beide unserer Buttons sein wird. Innerhalb dieses in der CSS werden wir diesem eine Klasse geben, die gleich Button-Wrapper ist, und dann können wir unsere beiden Tasten platzieren. Die obere Taste ist für unsere einfache Einstellung. Wir können den Text der einfachen und auch 10 Versuche hinzufügen. Gefolgt von einer zweiten Taste, und diese ist für den harten Modus, und das sind fünf Versuche. Lassen Sie uns dies im Browser öffnen und sehen, wie das aussieht. Lassen Sie uns den Pfad für unseren Index kopieren, und fügen Sie ihn dann in eine neue Registerkarte ein. Ein ziemlich einfacher Startbildschirm. Wir haben nur unseren Text und unsere Schaltflächen, und dann gehen wir zu unserem Spielbereich direkt darunter. Wenn wir auf einen dieser Buttons klicken, wir dann zu unserem Spielbereich gebracht , den wir jetzt mit dem Bau beginnen werden. Aber oben werden wir mit dem Text Ihrer Vermutung beginnen. Aber wenn Sie sich frühzeitig von der Demo erinnern, haben wir auch einen Knopf oben , der während des Spiels versteckt wird. Dies wird es uns ermöglichen, ein neues Spiel zu starten, sobald das Spiel beendet ist. Das allererste Element, das wir in unserem Spielbereich haben werden, wird eine Schaltfläche sein, und wir werden dies in unserem JavaScript anzeigen und verstecken. Wir werden eine ID des neuen Spiel-Button erstellen. Dieser Knopf hatte den Text des neuen Spiels. Danach fügen wir einen Abschnitt hinzu, der der Wrapper für den Text am oberen Rand Ihrer Vermutung und auch die Eingabe sein wird. Eine Überschrift der Ebene 3 mit dem Text Ihrer Vermutung. Diese Stufe 3 Überschrift wird auch während des Spiels ersetzt werden, um den Benutzer wissen zu lassen, ob seine Vermutung zu hoch oder zu niedrig war. Um dies zu tun, können wir auch eine ID hinzufügen, so dass wir dies mit JavaScript markieren können, und die ID, die ich geben werde, ist Textausgabe. Gefolgt von unserer Eingabe direkt unten, mit der Art der Zahl. Die ID, die gleich dem Eingabefeld sein wird, die wir später verwenden werden, um die Eingabe des Benutzers zu erfassen. Da unser Spiel zwischen eins und 100 liegt, werden wir die Min- und Max-Attribute hinzufügen. Das Minimum von eins und der Maximalwert ist also 100. Werfen wir einen Blick. Aber jetzt wird dies auch auf der gleichen Seite sein, da wir JavaScript noch nicht verwendet haben, um dieser Abschnitte ein- und auszublenden, aber das ist vorerst in Ordnung. Zurück zu unserem Spielbereich, und gleich nach dem Abschnitt hier, gehen wir nach unten zu unserem Bereich Bereich. Wir haben den Text des aktuellen Bereichs. Wir werden dann unseren Abschnitt nur hier aktualisieren, wenn der Benutzer Vermutungen hinzufügt, und dann auch einen Abschnitt für den Fortschrittsbalken. Lassen Sie uns dies in einen neuen Abschnitt einschließen, und das P-Element des aktuellen Bereichs, gefolgt von einem span Element, das für unseren Text sein wird , der derzeit 1-100 ist. Dieser Text wird auch während des Spiels aktualisiert, so dass wir eine ID zu dieser Spanne hinzufügen können. Wir können dies mit JavaScript ändern, und die ID, für die ich gehen werde, ist Bereichsausgabe. Danach werden wir unseren Bereich schaffen. Nun, dies wird erstellt, indem ein div als Wrapper verwendet wird, und dann innerhalb verschachtelt, werden wir drei Abschnitte erstellen. Lassen Sie uns einige Vermutungen im Inneren von hier hinzufügen. Also lasst uns für 50 und 90 gehen. Wir werden diesen grünen Abschnitt in der Mitte haben, das ist der aktuelle Bereich, der der Benutzer dazwischen ist. Derzeit liegt unsere Zahl zwischen 50 und 90, also wollen wir diesen Space Abschnitt nur hier haben. Dann haben wir auf beiden Seiten einen hohen und niedrigen Abschnitt, um den Rest des Raumes zu füllen. Dieses div hier ist für unseren Wrapper und wir geben diesem eine ID des Bereichs. Dann im Inneren verschachtelt, werden wir drei separate Span-Elemente erstellen. Der erste wird für unseren niedrigen Abschnitt sein, und lassen Sie uns das noch zwei Mal duplizieren. Der mittlere ist unser grüner Abschnitt und wir werden diesen Raum nennen, und am Ende ist das hoch. Dies wird unser erster roter Abschnitt auf der linken Seite, der grüne Abschnitt in der Mitte und dann der rote Abschnitt auf der rechten Seite sein. Unser letzter Abschnitt ganz unten wird für unsere Statistiken sein. Dies wird unsere bisherige Anzahl von Versuchen und auch die vorherigen Vermutungen protokollieren . Der erste dieses Abschnitts wird Statistiken sein, und dann innerhalb verschachtelt, wird dies zwei divs haben. Das erste div wird für die Anzahl der vorherigen Versuche sein und wir geben diesem eine Klasse von Informationen, mit dem Text der Anzahl der vorherigen Versuche. Wir werden dann kurz danach eine Spanne haben und das wird für diese Zahl sein, die wir hier sehen. Moment fügen wir einfach den Wert Null hinzu, und dann werden wir dies später in JavaScript aktualisieren, indem wir die ID der Versuche auswählen. Der folgende Abschnitt wird nur ziemlich gleich sein, also können wir diesen div-Abschnitt kopieren, fügen Sie ihn ein. Dies hat auch die gleiche Klasse von Informationen, so dass es konsistentes CSS hat. Aber dieses Mal ist der Text Ihre früheren Vermutungen. Die ID wird auch Vermutungen sein und dann einen Bindestrich im Browser anzeigen. Lassen Sie uns dies überprüfen, indem Sie neu laden, und dies lässt alle unsere HTML-Inhalte an Ort und Stelle, bereit für unser Styling im nächsten Video. 4. Design mit CSS: Lassen Sie uns nun an die Arbeit gehen, indem Sie unsere Stylesheets in der Seitenleiste erstellen. Eine neue Datei neben unserer index.html, die wir die styles.css nennen werden. Schließen Sie das hier. Wir können dies auch in unserem Index innerhalb unseres Kopfbereichs verknüpfen. Erstellen Sie einen Link mit der href von styles.css. Beginnen wir mit dem HTML innerhalb unseres Stylesheets. Im Inneren von hier werden wir unsere Schriftgröße vorstellen. Ich werde meine auf 10 Pixel setzen, und auch einen Standardwert für Gewicht, und ich werde 300 verwenden. Kurz bevor wir weitermachen und den Rest unserer Stile für dieses Projekt erstellen, werde ich etwas vorstellen, das ein bisschen Zeit sparen kann. Nun, dies wird ein Plugin namens Live Server sein, und das wird uns ersparen, den Browser jedes Mal zu aktualisieren, wenn wir Änderungen vornehmen. Wir können Änderungen in unserem Code vornehmen, die Datei speichern, und dies wird sofort aktualisiert. Dies ist völlig optional. Sie müssen dieses Plugin nicht installieren, und wenn Sie einen anderen Texteditor verwenden, haben Sie möglicherweise nicht den gleichen zur Verfügung. Um dies einzuführen, müssen wir zur Sidebar gehen. Wenn Sie einen Visual Studio-Code verwenden, klicken Sie auf die „Erweiterungen“ und verwenden Sie dann die Suche ganz oben. Wir geben eine Suche nach dem Live Server, und dann können Sie hier mehrere Optionen haben. Die, die ich derzeit verwende, ist diese nur hier, und dann müssen Sie installieren und aktivieren. Sobald diese Option aktiviert ist, sollten Sie unten eine Schaltfläche sehen, auf der „Go Live“ steht. Sie können dann auf diese klicken, um den Live Server zu starten, und dies öffnet sich dann innerhalb des Browsers. Wenn Sie dieses Symbol nicht ganz unten sehen, können Sie zu Ansicht, Befehlspalette gehen und dann eine Suche nach Live Server durchführen, wo wir die Optionen haben, dies mit unserem Live Server zu öffnen. Dies ist völlig optional und Sie können mit der gleichen Art und Weise fortfahren, die wir zuvor verwendet haben. Aber jetzt, wenn wir in unsere nächste [unhörbare] gehen, die der Körper ist, werde ich einige Eigenschaften hier drinnen setzen. Legen wir die Breite unseres Körpers auf 90 Prozent des Ansichtsfensters fest. Wir können dies mit Marge Null Auto zentrieren. Dann werde ich einen Hintergrund setzen, der ein radialer Farbverlauf sein wird. Wir werden dies verwenden, um zwischen zwei verschiedenen Farben zu mischen. Dies wird in einer kreisförmigen Bewegung von der Mitte bis zum Ende der Seite verschmelzen . Der radiale Farbverlauf wird zwei Werte annehmen. Der erste, ich werde 343e63 verwenden, und dann durch ein Komma getrennt, wird das zweite 2a3352 sein. Geben Sie dies ein Speichern und wir sehen sofort die Änderungen im Browser. Danach gehen wir für unseren Hauptabschnitt, der der Wrapper für all unser Spiel ist. Wir können einen Wrapper erstellen, der die Textausrichtung in der Mitte gesetzt wird, eine Hintergrundfarbe f8f1e9, eine Grenze, die unser Spiel auf der linken Seite, dem unteren und auch der rechten umwickeln wird . Zuallererst müssen wir die Rahmenfarbe festlegen und dies auch als durchgezogene Linie festlegen. Wir können das dann auf drei verschiedenen Seiten einstellen. Unsere Grenze wird eine durchgehende Linie sein, und unsere Farbe, die gleich ef7b54 sein wird. Wenn wir das speichern, derzeit sehen wir die Grenze ist auf allen vier Seiten platziert. Um dies auf mehreren Seiten zu wählen, können wir die border-width Eigenschaft verwenden und geben Sie dann die Breite, die wir wollen die Grenze auf vier verschiedenen Seiten. Die erste ist die Spitze. Wir wollen Null oben, acht Pixel auf der rechten Seite, acht Pixel unten und auch für die linke. Lassen Sie uns diesen Abschnitt mit der minimalen Höhe von 80 Prozent der Höhe des Ansichtsfensters etwas größer machen. Wir können diese Ränder auch unten links und rechts mit unserem Grenzradius abrunden. Die obere linke oben rechts ist Null, dann drei Rems unten rechts und auch unten links. Auch ein Rem der Polsterung, um es einige Abstände innerhalb des Abschnitts zu geben. Der Textfarbwert, den ich verwenden werde, wird 1f2933 sein. Dies ist also unser Hauptabschnitt und jetzt werden wir einige der Elemente ansprechen, die innen verschachtelt sind. ganz oben auf unserem Willkommensbildschirm beginnen, haben wir diese Level-2-Überschrift. Dann können wir auch unsere Textelemente auswählen. Lassen Sie uns zunächst für unser h2 gehen. Wir können die Schriftgröße ein wenig größer, also 2.2 rems. Außerdem können wir einige Abstände oben und unten erstellen. Ich werde dies ziemlich viel Abstand oben und unten geben, und dann Null auf der linken und rechten Seite, dann unseren Text, der innerhalb der p-Elemente ist. Wir können auch die Schriftgröße auf 1,8 Rems erhöhen. Kleben Sie mit diesem Willkommensbildschirm Abschnitt, als nächstes haben wir diesen Button Bereich, der eine Klasse von Button-Wrapper hat. Derzeit sind diese beiden Schaltflächen nebeneinander platziert, so dass wir dies ändern können, indem Sie den Anzeigetyp auf Flex setzen, die Flex-Richtung als Spalte. Als nächstes können wir die einzelnen Buttons mit dem Button-Element anvisieren. Ich muss den Standardrahmen mit keiner verschieben. Wir können auch den Cursor ein Zeiger sein, sobald Sie einen Mauszeiger über diese Schaltfläche verwenden. Dann die Hintergrundfarbe für unsere Buttons. Lassen Sie uns für einen Hex-Wert gehen. Dies wird eine grüne Farbe mit dem Farbton von 83e1d0 sein. Einige Polsterung auf der Innenseite des Knopfes von zwei Rems. Dann werden wir einen Grenzradius auf der Oberseite unserer ersten Schaltfläche anwenden, und dann am unteren Rand unserer zweiten Schaltfläche. Dies wird uns diesen abgerundeten Effekt geben, den wir auf den Knöpfen gerade hier sehen. Für jetzt werden wir die allererste Schaltfläche innerhalb dieses Selektors anvisieren. Wir können den Grenzradius auf der Oberseite einstellen. Also ein Rem oben links, ein Rem oben rechts und dann Null unten. Derzeit gilt dies für alle unsere Schaltflächen. Jetzt können wir dies überschreiben, indem wir das letzte Kind auswählen. Letztes Kind wird auf die letzte aller Art von Schaltflächen abzielen, die sich innerhalb dieses Wrappers befindet. Wenn wir einen dritten Knopf hätten, würde das auf die dritte Schaltfläche zielen, wenn wir eine vierte Schaltfläche hätten, würde das auf die vierte Schaltfläche zielen, und so weiter. Wir haben nur unsere zwei Knöpfe, also wird das letzte Kind auf diesen harten Knopf nur hier anwenden. Wir können den Hintergrund überschreiben, und ich werde die gleiche rote Farbe verwenden, die wir für diese Grenze haben. Wir verwenden auch die gleiche rote Farbe für unseren Bereichsschieber während des Spiels. Dies bedeutet, dass wir jetzt mehrere Male eine gleiche Farbe verwenden. Wir könnten voran gehen und die gleiche Farbe enthalten, aber wir können auch etwas verwenden, das CSS-Variablen genannt wird , auch als benutzerdefinierte Eigenschaften bekannt. Genau wie bei der Verwendung von JavaScript können wir benutzerdefinierte CSS-Eigenschaften verwenden, um eine Variable zu erstellen und diese mehrmals innerhalb der gesamten Datei zu verwenden. Die Art und Weise, wie wir dies tun können, wenn wir ganz oben gehen, werde ich einen Abschnitt erstellen, der alle unsere Variablen enthalten wird. Das erste, was ich tun werde, ist, auf die Wurzel zu zielen. Dies wird es uns ermöglichen, unsere Variablen zu erstellen, die wir auf unserer ganzen Seite verwenden können. Die Art und Weise, wie wir eine Variable innerhalb von CSS erstellen, besteht darin, die doppelten Bindestriche zu verwenden. Wir verwenden dann einen Variablennamen wie grün, und dann können wir unseren Wert auswählen. Der grüne Wert, den wir derzeit verwenden, ist dieser hier nur für unsere Buttons. Wir können dies kopieren, einfügen und ein Semikolon hinzufügen. Wir können auch unsere rote Farbe deklarieren, die wir wiederverwenden werden, die einen Wert von ef7b54 hat. Als nächstes können wir auch die Farbe für unseren Hintergrund einstellen, also Strich, Strich Hintergrund, und dies wird die Farbe für alle Hauptabschnitte sein. Der Hauptabschnitt, wenn wir nach unten scrollen, gibt es eine, die nur hier ist, wir können dies greifen und dies als eine Variable setzen. Wenn wir wollten, könnten wir auch die Farben für unsere radialen Farbverläufe festlegen. Lassen Sie uns diese kopieren, gradient-1 und auch die gradient-2. Jetzt haben wir unsere Variablen ganz oben deklariert. Wie nutzen wir diese jetzt in unserem Projekt? Wir verwenden sie anstelle unserer Farben, also lassen Sie uns diese ersten Radial-Gradient entfernen. Wir setzen diese dann innerhalb einer var Funktion und dann deklarieren wir den Namen, den wir ihm gerade oben gegeben haben. Dieser war Gradient-1, und dann wird der zweite Wert Gradient-2 sein. Wieder, innerhalb unserer var Funktion. Speichern Sie das, und jetzt unser Farbverlauf, jetzt wieder eingesetzt. Bis zum Hauptbereich können wir unseren Hintergrund auch durch unsere Variable ersetzen. Du grenzst an. Wir haben dies auch innerhalb einer Variablen gespeichert, und diese ist Farbe rot. Es funktioniert immer noch gut innerhalb des Browsers. Wenn wir nun zu unseren Schaltflächen scrollen, haben wir die grüne Variable, also Strich, Strich grün. Die Hintergrundfarbe für unser letztes Kind oder unsere zweite Taste wird die rote Variable sein, die wir auch direkt oben setzen. Der Grenzradius dafür wird auch anders sein. Wir können dies mit dem Grenzradius überschreiben, indem wir den oberen auf Null und Null setzen, und dann die untere rechte und auch die untere linke auf 1rem setzen. Wir haben auch den neuen Spiel-Button gerade hier, aber wir werden dies sehr bald mit JavaScript verstecken. Jetzt bis zum Spielbereich, gehen wir für unsere Level-3-Überschrift, die der Text Ihrer Vermutung ist. Dies wird auch später ersetzt, um eine Nachricht an den Benutzer zu sein. Alles, was wir für unsere Level-3-Überschrift tun werden, ist, die Schriftgröße auf 2rems zu setzen. Als nächstes haben wir unsere Zahleneingabe. Dies ist die einzige Eingabe, die wir auf dem Bildschirm haben werden, so dass wir nicht spezifischer über die Auswahl des Typs sein müssen. Alles, was wir tun werden, ist, die Grenze auf ein Pixel zu setzen. Eine durchgezogene Linie, die hellgrau sein wird. Wir lassen es mit dem Rest des Hintergrunds harmonieren, indem wir dies als transparent festlegen. Ränder geben etwas Platz außerhalb unserer Elemente von 2rems oben und unten und dann Null auf der linken und rechten. Polsterung für einige interne Abstände von 1rem, dies ist die obere und untere und dann Null auf der linken und rechten. Deine Breite, 16 Rems. Dann können wir auch den Text ausrichten, um in der Mitte zu sein. Dies wird der Text sein, den der Benutzer in dieses Feld eingibt. Dies wird dies in die Mitte unserer Elemente schieben. Darunter haben wir unseren Bereich Abschnitt, der ist der Wrapper, unten unten unten hier, der unsere drei Spannweiten enthält. Wir werden nicht viel mit diesen Span-Elementen im CSS tun. Wir werden diese bis zum JavaScript-Abschnitt später belassen, aber im Moment können wir den Bereichsabschnitt so einstellen, dass er eine bestimmte Höhe und auch die Hintergrundfarbe hat. Das war ein Ausweis. Der Anzeigetyp wird die Flexbox sein. Diese werden standardmäßig auf der Seite in einer Zeile angezeigt. Der Hintergrund, um zu beginnen, wird dies eine volle grüne Farbe sein. Wir können unsere grüne Variable nutzen. Eine Höhe von 50 Pixeln, ein Füllwert von Null und dann auch etwas Rand. Ich werde nur den Rand auf Null oben und rechts setzen, 4rems ganz unten und Null auf der linken Seite. Das ist nur, um uns etwas unterste Marge zu geben. Es ist diese Grundlage aus dem Startabschnitt direkt unten. Als nächstes werden wir den Text von 1-100 etwas größer machen. Dieser Abschnitt hat die ID, die Bereichsausgabe sein wird. Die Schriftgröße, 1.6rems, und das ist alles, was wir derzeit für diesen Bereich tun müssen. Wir erledigen den Rest in unserem JavaScript. Unten unten haben wir unseren Statistikbereich und dies hat die Klasse der Statistiken. Das ist für unseren Wrapper. Alles, was wir hier drinnen tun werden, ist, die Textausrichtung auf der linken Seite zu setzen, und dann können wir uns um unsere beiden Abschnitte kümmern. Innerhalb unseres Index oder HTML haben wir beide Abschnitte eine Klasse von Informationen gegeben. Dies ist so, dass wir die CSS-Flexbox verwenden können, genau wie in der endgültigen Version, wo wir beide Elemente nebeneinander platzieren. Wir fügen einige Abstände dazwischen hinzu und stellen sicher, dass diese über die Seite ausgerichtet sind. Unsere Info, die Anzeigeart von Flex. Wir können dann rechtfertigen Inhalt verwenden, um den Abstand zwischen hinzuzufügen. Derzeit sind diese nicht korrekt auf der Seite aufgereiht. Wir sehen, dass dies ein wenig höher ist. Um dies zu beheben, richten wir unsere Artikel auf der Querachse in der Mitte aus. Sowohl dieser Wert von Null als auch der Strich waren innerhalb dieser Span-Elemente enthalten. Um dies zu beheben, können wir unsere Info-Abschnitt und dann jede Spanne, die innen ist markieren. Die Schriftgröße, wir gehen für 1.6rems zu gehen. Wir sind fast fertig für unser Styling für dieses Projekt. Kurz bevor wir fertig sind, lassen Sie uns diese Schaltfläche nur hier anvisieren, die nur am Ende des Spiels erscheinen wird. Dies hat die ID des neuen Spielknopfs. Alles, was wir tun werden, ist, den Grenzradius auf Null zurückzusetzen. Schließlich können wir eine Medienabfrage für die größeren Größen hinzufügen. Unsere Medien, die minimale Bildschirmbreite von 800 Pixel. Das einzige, was ich hier tun werde, ist, die Körperbreite zu beschränken, wenn dies größer wird. Auf den größeren Bildschirmen werde ich nur die maximale Breite auf 60 Prozent der Ansichtsfensterbreite einstellen , nur damit sie nicht zu überdehnt aussieht. Der Körperabschnitt, können wir die Breite auf 60vw einstellen. Das war's jetzt für unser Styling. Sie können natürlich Dinge ändern, wenn Sie wollen. Als nächstes gehen wir zu unserem JavaScript-Abschnitt über und beginnen, die Funktionalität für unser Spiel zu behandeln. 5. So startest du das Spiel: Jetzt ist es an der Zeit, unser JavaScript zu unserem Projekt hinzuzufügen. in unserem Texteditor Lassen Sie unsin unserem Texteditoreine neue Datei in der Wurzel unseres Projekts erstellen, die „script.js“ genannt wird. Wir können zu unserer Index-Seite gehen und dies unten, direkt über dem schließenden Body-Tag verknüpfen . Das Skript und die Quelle werden also gleich unserer „script.js“ sein. Das erste, was wir tun wollen, wenn das Spiel geladen wird, ist eine Zufallszahl zu generieren, die zwischen eins und 100 liegt. Wir können eine Funktion auslösen, sobald der Browser diese Dokumente lädt , indem ein onload-Ereignishandler zum body-Tag hinzugefügt wird. Sobald die Seite geladen ist, können wir eine Funktion auslösen und ich werde diese „init“ nennen. Dies initialisiert effektiv unser Spiel, sobald der Browser geladen wird. Über zu unserer script.js können wir jetzt eine Variable erstellen, um diesen Wert innerhalb zu speichern. Ich werde das „ComputerGuess“ nennen. Ich habe dies außerhalb einer Funktion deklariert, so dass es in jeder anderen Funktion verwendet werden kann. Wenn wir dies innerhalb einer Funktion deklarieren würden, wäre diese Variable auf diese bestimmte Funktion beschränkt. Das heißt, wir konnten nicht in anderen Teilen unseres Programms darauf zugreifen. Lassen Sie uns unsere Funktion erstellen, die unsere Init-Funktion sein wird. Dies nimmt keine Parameter an. Dann müssen wir unseren ComputerGuess so einstellen, dass er gleich unserer Zufallszahl ist. Wir können dies tun, indem Sie die Math.Random, die eine Zahl zwischen Null und eins wählen wird. Wir wollen, dass das zwischen eins und 100 liegt. Daher können wir dies mit 100 multiplizieren. Dies wird uns nun mit einer Zufallszahl verlassen, die mit einer Null beginnt, bis zu 99. Wir wollen jedoch, dass dies zwischen eins und 100 liegt, damit wir eins am Ende addieren können. Wir müssen dies auch abgerundet sein, damit wir das mit Math.floor runden können. Lassen Sie uns dies an Ort und Stelle setzen und wir können die Math.Floor-Methode nutzen und dann unsere Nummer übergeben. Dies rundet jede unserer Zahlen ab, so dass wir eine Zahl zwischen eins und 100 haben. Lassen Sie uns testen, ob das funktioniert. Wir können den ComputerGuess protokollieren und dies sollte jedes Mal geladen werden, wenn der Browser beginnt. Wir haben einen Fehler. Also inits, wir müssen sicherstellen, dass dies korrekt geschrieben ist. Jetzt erhalten wir jedes Mal, wenn wir den Browser neu laden, eine Zufallszahl. Wir können das in der Konsole sehen. Dies ist ein guter Start für unser Projekt. Das nächste, was wir tun müssen, ist einige Elemente auf dem Bildschirm ein- und auszublenden. Wenn diese Seite zum ersten Mal geladen wird, müssen wir den neuen Spiel-Button nicht sehen, er wird nur am Ende unseres Spiels da sein. Also lasst uns das entfernen. Wählen Sie unser Dokument durch die ID, und die ID, die wir auswählen möchten, ist die „NewGameButton“, die wir gerade hier sehen können. Ich werde dies verschieben, indem ich die CSS-Stil-Eigenschaft der Anzeige so setze , dass sie einem Zeichenfolgenwert von „none“ entspricht. So wird unser Button jetzt entfernt, sobald das Spiel geladen und wir auch diesen Spielbereich entfernen wollen. Also lassen Sie uns das duplizieren. Aber dieses Mal wird die ID, die wir auswählen wollen, gleich diesem Spielbereich sein. Sie denken vielleicht, warum nicht einfach den Spielbereich verstecken, auch die Schaltfläche enthält? Nun, das liegt daran, dass wir später im Spiel, sobald es fertig ist, immer noch diesen Spielbereich an Ort und Stelle halten müssen, aber wir werden die Schaltfläche wieder einschalten. Die ID, die Sie auswählen möchten, ist die „GameArea“, die uns nun den Startbildschirm überlässt. Gut, wir haben jetzt eine Zufallszahl. Wir verstecken jetzt den Spielbereich. Als nächstes müssen wir eine Funktion erstellen, um das Spiel tatsächlich zu starten. Dies beinhaltet das Ausblenden dieses Begrüßungsbildschirms. Dann zeigt der Spielbereich, den wir gerade entfernt haben, was uns effektiv zwei Bildschirme geben wird. Um dies zu tun, erstellen wir eine Funktion und wollen diese die „StartGameView“ nennen. Sobald das Spiel begonnen hat, möchten wir diesen Bereich entfernen oder ausblenden. Wenn wir zu unserer Indexseite zurückkehren, hat dieser Bereich die ID „WelcomeScreen“. Also document.getElementById. Wir möchten den Begrüßungsbildschirm auswählen. Genauso wie ein [unhörbar] verwenden Sie die style-Eigenschaft von display und stellen Sie dies gleich „none“. Duplizieren Sie diese Zeile und das nächste, was wir tun müssen, ist, den Spielbereich wieder einzurichten , den wir gerade oben hatten. Änderungen am Spielbereich und damit dies auf dem Bildschirm angezeigt wird, müssen wir den Anzeigetyp ändern, um „Block“ zu sein. Als nächstes brauchen wir eine Möglichkeit, diese Funktion tatsächlich aufzurufen, sobald das Spiel beginnt. Nun, die Art und Weise, wie wir das tun werden, ist, indem wir unsere einfachen und die harten Tasten benutzen. Für jetzt, beide Tasten, wir werden einfach nur die gleiche Funktion aufrufen, aber wir werden sie später ändern, so dass der Benutzer nur fünf oder 10 Versuche hat. Lassen Sie uns unsere Funktionen erstellen. Unsere erste Funktion wird für den Easy-Modus sein. Dann wird unsere zweite Funktion für den harten Modus sein. All dies wird tun, ist einfach unsere „StartGameView“ -Funktion aufzurufen. So können wir diese in beide Funktionen hinzufügen. Um diese Funktionen aufzurufen, tun wir dies auf unserer Indexseite. Lassen Sie uns zu unseren Schaltflächen gehen und wir werden es auf Click-Event-Handler hinzufügen. Eine Funktion, die wir aufrufen möchten, sobald die Schaltfläche angeklickt wurde, ist der einfache Modus. Die zweite Taste wird die Hard-Modus-Funktion auslösen. Wir sollten nun in der Lage sein, dieses Spiel im Browser zu spielen. Lasst uns einfach anklicken. Dadurch wird nun der Begrüßungsbildschirm ausgeblendet und der Spielbereich angezeigt. Laden Sie diese über die harte Taste neu. Dies führt uns auch zum Spielabschnitt 2. Jetzt haben wir eine Möglichkeit, unser Spiel zu beginnen. Im nächsten Video werden wir die Eingabe des Benutzers erfassen und diese auch mit unserer Zufallszahl vergleichen. 6. So erstellst du die Benutzereingabe und Vergleich: Jetzt haben wir eine Zufallszahl generiert und innerhalb unseres ComputerGuess gespeichert. Wir werden auch die Eingaben des Benutzers erfassen, die sie in dieses Zahlenfeld hinzufügen. Da es mehrere Möglichkeiten sein wird, wir dies innerhalb eines Arrays speichern. Also werden wir sagen, lassen Sie unsere UserGuesses gleich einem leeren Array zu beginnen, und dann können wir nach unten scrollen und eine Funktion erstellen, die die Vermutung des Benutzers mit der Zufallszahl vergleichen wird . Diese Funktion wird als „CompareGuess“ bezeichnet. Der Punkt wird sein, die Eingabe des Benutzers aus diesem Feld innerhalb unserer Indexseite zu erfassen. Diese Eingabe hat die ID von InputBox. Lassen Sie uns das mit „document.getElementById“ greifen. Dann können wir den Wert auswählen, den der Benutzer eingibt. Genau wie früh müssen wir dies auch in eine Zahl umwandeln, damit wir das ausschneiden können. Wir können die Zahlenfunktion verwenden und diese dann einfügen. Schließlich können wir dies innerhalb einer Konstante speichern, die UserGuess genannt wird. Jetzt haben wir diese Vermutung. Das nächste, was wir tun möchten, ist, dies auf das Array unseres Benutzers zu schieben. Lassen Sie uns auf unsere Variable zugreifen, und dann können wir einen neuen Wert in unser Array schieben. Der neue Wert ist unser UserGuess. Um zu überprüfen, dass dies funktioniert, können wir dies auch innerhalb unserer Benutzeroberfläche in unserer index.html anzeigen . Unten unten haben wir diesen Vermutungsabschnitt, der alle vorherigen Vermutungen ausgeben wird. Zurück zu unserer Funktion, lasst uns diese nach der ID greifen und dann das InnerHTML auf UserGuesses setzen. Mit diesem jetzt erfasst, das nächste, was wir tun müssen, ist, unsere CompareGuess Funktion über in unserer index.html aufzurufen . Werfen wir einen Blick auf unsere Input, die gerade hier ist. Wir können unsere Funktion jedes Mal aufrufen, wenn der Benutzer eine Nummer hinzufügt und dann Enter drücken, indem der onchange Ereignishandler hinzugefügt wird. Der Funktionsname lautet „CompareGuess“. Über zum Browser und wir können überprüfen, dass dies funktioniert. Startet unser Spiel, addieren Sie die Werte von 40, 89, und unsere Vermutungen werden jetzt unten angezeigt. Es gibt verschiedene Möglichkeiten, wie wir ein Leerzeichen zwischen jedem von ihnen hinzufügen können, aber eine wirklich einfache Möglichkeit, dies zu tun, ist, indem wir zu unserem Skript übergehen. Wir können ein Leerzeichen mit einer leeren Zeichenfolge erstellen und dies unserer Vermutung hinzufügen. Nun, wenn wir hier eine Zahl hinzufügen, 45, 78, haben diese jetzt ein Leerzeichen vor jeder Zahl. Wir sind jetzt in einer Position, wo wir die Zufallszahl haben und auch der Benutzer erraten. Jetzt brauchen wir eine Möglichkeit, diese beiden Werte zu vergleichen und zu überprüfen, ob sie richtig sind. Lassen Sie uns dies in der Funktion „CompareGuess“ tun. Wir werden drei verschiedene Ergebnisse schaffen. Die erste, wir werden überprüfen, ob die Vermutung des Benutzers höher ist als die Vermutung des Computers. Wir fügen dann eine zweite Bedingung von „else if“ hinzu, und dies wird überprüfen, ob die Vermutung des Benutzers kleiner ist als die Vermutung des Computers. Schließlich fügen wir einen Abschnitt „else“ hinzu. Es ist nur für, wenn die Vermutung des Benutzers gleich der Vermutung des Computers ist. Lassen Sie uns zunächst damit umgehen, dass der Benutzer zu hoch ist. Nun, alles, was wir tun werden, ist eine Nachricht an den Benutzer auszugeben , also „document.getElementById“. Eine ID, die wir greifen wollen, ist unsere Textausgabe. Dies ist unsere Ebene drei Überschrift oben oben, die den Text Ihrer Vermutung ersetzen wird. Um dies zu tun, setzen wir das InnerHTML, und es kann eine Zeichenfolge von Texten sein, die besagt: „Deine Vermutung ist zu hoch.“ Wir müssen auch diese Formulareingabe löschen. Momentan, wenn wir den Wert hier hinzufügen und dann eingeben drücken, bleibt der Wert hier immer noch drin. Gehen wir also zurück und fügen Sie dies innerhalb des „if“ -Abschnitts hinzu. Derzeit haben wir das Eingabefeld gerade hier. Also können wir diese Codezeile nur hier greifen, dies herbringen, und wir können den Wert so einstellen, dass er gleich einer leeren Zeichenfolge ist. Der nächste Abschnitt, der das „else if“ ist, wird überprüft, ob die Vermutung des Benutzers zu niedrig ist. Wir können so ziemlich das gleiche in diesem Abschnitt tun, unsere Botschaft wird zu niedrig sein. Schließlich, im Abschnitt „else“, können wir dies auch hinzufügen. Wir müssen das Eingabefeld nicht zurücksetzen, da das Spiel vorbei ist. Alles, was wir tun müssen, ist eine Nachricht zu setzen, die „Richtig“ sein wird. Wir können jetzt voran gehen und dies im Browser testen. Aber kurz bevor wir es tun, lasst uns unser ComputerGuess packen und wir können das jetzt in die Konsole stecken. Lassen Sie uns dies in der „init“ -Funktion tun, also sehen wir dies, sobald unser Spiel geladen wird. Wir haben unsere Computer-Vermutung, die gerade hier ist. Lassen Sie uns ein Konsolenprotokoll mit diesem Wert machen. Über den Browser, können wir jetzt mit der rechten Maustaste klicken und „Inspect“, um die Konsole zu öffnen. Wir haben jetzt einen Wert von 83. Lasst uns einfach anklicken. Wenn wir tiefer gehen, sagen wir 10. Oops, es steht, dass es richtig ist, also schauen wir mal, was wir getan haben. Zurück zu unserer Funktion. Also, wenn der UserGuess größer ist als der ComputerGuess, UserGuess, ist dieser ein ComputerGuess. Versuchen wir es noch einmal. Wir haben einen Wert von 25. Also gehen wir tiefer, wir werden 10 sagen. Deine Vermutung ist zu niedrig. Jetzt gehen wir für 50. Deine Vermutung ist zu hoch. Lassen Sie uns versuchen 25, und wir bekommen die Nachricht der richtigen. Jetzt haben wir die Vermutung des Benutzers erfolgreich mit der Zufallszahl verglichen. 7. So registrierst du frühere Versuche: Lassen Sie uns nun auf die Protokollierung der Anzahl der Versuche der Benutzer gehen. Der Grund, warum wir das tun, ist, weil wir einen einfachen und harten Modus haben , um unser Spiel zu beginnen. Sobald der Benutzer entweder fünf oder zehn Versuche erreicht hat, wissen wir, dass das Spiel vorbei ist. Wir können diese Anzahl der Versuche auch hier protokollieren, so dass Sie auch sehen können, wie weit in das Spiel Sie sind. Um dies zu tun, lassen Sie uns gehen und eine Variable oben in unserem Skript-Aufruf erstellen, den es versucht, und setzen Sie diese zunächst auf Null. Danach müssen wir diesen Wert jedes Mal um eins erhöhen , wenn der Benutzer etwas in das Eingabefeld eingegeben hat. Gehen Sie zu unserer Funktion „CompareGuess“, um dies nur für unsere if-Anweisungen festzulegen. Wir müssen diese Versuche Variable um jeweils eins erhöhen, einige der Benutzer eine Vermutung gemacht hat. Wir können dies mit Versuchen++ tun, und dies wird den aktuellen Wert um eins erhöhen. Derzeit ist dies der Wert Null und für jede Vermutung wird es zu eins und dann zwei und so weiter gehen. Wir müssen dann das DOM aktualisieren, das ist unser Abschnitt gerade hier. Wenn wir zu unserer Indexseite gehen und dann nach unten scrollen, müssen wir die Spanne mit der ID der Versuche aktualisieren. Lassen Sie uns dies durch die ID greifen und dann den inneren HTML so einstellen, dass er gleich unserer Variablen ist, die Versuche ist. Okay, lassen Sie uns das versuchen, wenn wir in den einfachen Modus gehen, um zu beginnen, haben wir 10 Versuche, haben wir 10 Versuche, also können wir hier beliebige Zahlen hinzufügen. Dies wird mit jeder Vermutung erhöht. Wir werden sicherstellen, dass der Spieler nicht sehr bald über die maximale Anzahl von Versuchen gehen kann . Aber im Moment werden wir nur die Nachricht an den Benutzer aktualisieren. Innerhalb des anderen Abschnitts gerade hier, ist dies, wenn sie ihre Vermutung richtig bekommen. Wir können auch zu diesem Abschnitt hinzufügen und dem Benutzer mitteilen , wie viele Versuche er es richtig gemacht hat. Wir können sagen, Sie haben es in, und fügen Sie dann unsere Versuche Variable, und fügen Sie dann auch bis zum Ende eine Reihe von Versuchen hinzu. Zum Beispiel würde dies sagen, dass Sie es in vier Versuchen bekommen haben und so weiter. Lassen Sie uns das mal ausprobieren, versuchen die einfache Einstellung und sehen, ob wir richtig bekommen können, also sind wir zu hoch, 30, 10, 20, 15, 12, und da gehen wir. Die richtige Zahl war 14 und wir haben das in achten Versuchen. Gut. Mit diesem jetzt alles funktioniert. Lassen Sie uns nun unsere Schwierigkeitseinstellungen im nächsten Video hinzufügen. 8. So fügst du Schwierigkeitseinstellungen hinzu: Auf unsere einfachen und unsere Hardball-Knöpfe. Wir werden nun die Anzahl der Vermutungen, die der Benutzer machen kann, auf 10 oder fünf beschränken . Lassen Sie uns zunächst an die Spitze unseres Skripts gehen, und wir werden eine Variable erstellen, um uns in zu starten. Ich werde dies die MaxGuesses nennen, und das wird zunächst nicht auf einen bestimmten Wert gesetzt. Es ist einfach, weil wir möchten, dass dies entweder auf fünf oder 10 gesetzt wird, je nachdem, welche Taste der Benutzer drücken wird. Wir können dies tun, wenn wir entweder die einfache oder die harte Modus-Funktion starten. Im einfachen Modus werden wir die maximalen Vermutungen auf 10 einstellen, und dann im harten Modus werden wir dies auf fünf setzen. Jetzt haben wir alle Informationen, die wir brauchen. Wir haben diese Versuche Variable nur hier, das ist die Anzahl der Versuche, die der Spieler hatte. Wir haben auch die maximale Variable. Wir können diese nun vergleichen, um zu überprüfen, ob der Benutzer weitermachen kann oder ob das Spiel vorbei ist. Lasst uns das machen. Lassen Sie uns zu unserer Funktion gehen, wo ich die Nachricht an den Benutzer senden werde. Dies ist CompareGuess, und wir wollen diesen Abschnitt nur ausführen , wenn die Anzahl der Versuche kleiner ist als die maximale Anzahl der Vermutungen. Lassen Sie uns das alles an Ort und Stelle setzen, und wir erstellen eine neue if-Anweisung, die überprüfen wird, ob die Versuche kleiner als die Anzahl aller MaxGuesses sind. Innerhalb der geschweiften Klammern können wir nun in den Abschnitt einfügen. Dieser, wenn Abschnitt wird nur ausgeführt, wenn sie die maximale Anzahl von Vermutungen nicht erreicht haben. Wenn sie das Maximum erreicht haben, ist dies also der letzte Versuch. Um dies zu handhaben, können wir kurz danach einen anderen Abschnitt erstellen. Dieser andere Abschnitt ist der allerletzte Versuch, also könnte dies der 10. Versuch oder der fünfte Versuch im harten Modus sein. Auch wenn dies der allerletzte Versuch ist, wollen wir trotzdem entscheiden, ob die Spieler die Nummer richtig bekommen haben oder nicht. Wir können dies tun, indem wir den gleichen Abschnitt wie oben greifen, und wir können einfach die Nachrichten ändern. Stellen Sie sicher, dass Sie alles innerhalb des if-Abschnitts greifen, also die else, else if, im if-Abschnitt. Lassen Sie uns das kopieren. Fügen Sie dies in unseren neuen Abschnitt else hinzu. Da dies der letzte Schritt ist, wenn die Vermutung des Benutzers zu hoch ist, werden wir diese Meldung ändern, die angezeigt wird. Wir werden sagen, dass du verlierst. Sie können dann ein Break-Tag hinzufügen, um dies zur nächsten Zeile hinzuzufügen, der Text der Zahl war, dann lassen wir den Computer Variable am Ende erraten , um den Benutzer wissen zu lassen, was die Nummer war. Wir müssen das Eingabefeld nicht zurücksetzen, da dies die letzte Vermutung ist. Wir können dies auch aus dem else if Abschnitt entfernen und dann die Nachricht innerhalb von hier auch ändern. Dies sonst, wenn Abschnitt ist, wenn der Benutzer erraten ist zu niedrig, was bedeutet, dass sie auch das Spiel verloren haben. Wir können genau die gleiche Nachricht von oben holen und dann diese nur innerhalb von hier ersetzen. Die dritte Bedingung ist, wenn der Spieler die richtige Nummer hat, so können wir diese Nachricht verlassen, wie sie ist. Lassen Sie uns das hier einen Prozess geben. Lassen Sie uns gehen, um den harten Modus zu beginnen. Wir haben fünf Versuche. Fünfzig, zu niedrig, 80, zu hoch, 87, 85, und wir haben das Spiel in fünf Versuchen verloren. Zurücksetzen und in den Easy-Modus zurückkehren. Probieren wir das aus, zu hoch. Sobald wir 10 Versuche bekommen, ist dieses Spiel auch vorbei. Dies verliert jetzt mit einem voll funktionsfähigen, einfachen und harten Modus. 9. So baust du das Spielende: Es gibt ein paar Dinge, die wir jetzt tun müssen, um das Ende des Spiels zu bewältigen. Wenn wir das Ende des Spielbildschirms sehen und genau wie wir es über auf der rechten Seite tun. Wir möchten auch unseren NewGameButton neu vorstellen. Dies ist ein Ende in unserem Index-html. Diese gerade hier, die im Grunde den Browser aktualisieren wird, so können wir dann unseren Spielmodus wählen. Wir werden auch sicherstellen, dass das Spiel, sobald das Spiel vorbei ist, keine Werte mehr in dieses Eingabefeld hinzufügen kann. Wenn wir hier weiter nach innen gehen, können wir immer noch Werte eingeben, und sie werden immer noch als unsere vorherigen Versuche protokolliert und auch in das Array geschoben. Um dies zu tun, gehen wir zu unserem Skript und erstellen eine Spiel beendete Funktion. Oben oben, direkt unter unseren Variablen ist, wo ich meine erstellen möchte. Der Funktionsname von GameEnd. Schritt 1 wird es sein, unseren NewGameButton wieder einzuführen. Index, dies ist die ID von NewGameButton. Wir können dies tun, indem wir den Anzeigetyp zurücksetzen. Gleich unten hier setzen wir diese NewGameButton auf den Anzeigetyp von none. Lassen Sie uns diese Zeile kopieren und diese in unsere GameEnd-Funktion hinzufügen. Alles, was wir tun müssen, ist, den Anzeigetyp so zu ändern, dass er in der Linie ist. Kurz danach werden wir auch ein neues Attribut zu diesem Eingabefeld hinzufügen , so dass dies nur hier ist. Wir werden dies so einstellen, dass es schreibgeschützt ist, sobald das Spiel beendet ist, so dass der Benutzer keine neuen Werte mehr eingeben kann. Der erste Schritt besteht darin, diese Elemente und die ID zu greifen, von der wir dies ergreifen werden. Hier ist unsere InputBox. Wir können dies auf unserer Indexseite sehen. Dies ist unsere Eingabe und die ID von InputBox und um ein neues Attribut zu unseren Elementen hinzuzufügen, können wir eine Methode namens setAttributes verwenden. Das erste, was wir eingeben müssen, ist der Attributname, der schreibgeschützt ist. Ich werde dies auf einen Wert von schreibgeschützt setzen. Wir müssen nun dieses Spiel beendete Funktion aufrufen, sobald wir das Spiel abgeschlossen haben. Scrollen Sie nach unten zu unserer CompareGuess Funktion, die gerade hier ist, und unser Spiel ist effektiv vorbei in jedem dieser Abschnitte, in denen wir entweder richtig oder Sie verlieren. Ausgehend von oben, der erste richtige Abschnitt oder Sie verlieren, ist dieser gerade hier. Wir können dann unsere GameEnd-Funktion aufrufen. Lassen Sie uns das kopieren und weiter unten gehen. Wir haben auch Sie verlieren Abschnitt hier, was bedeutet, dass das Spiel vorbei ist. Wir können auch unsere Funktion aufrufen, wir haben einen Abschnitt SIE VERLÖSER. Das Spiel ist vorbei, und schließlich haben wir einen korrekten Abschnitt unten ganz unten, wo wir die gleiche Funktion aufrufen können. Rüber zum Browser, und lassen Sie uns das überprüfen. Wir gehen für den Hard-Modus, und lassen Sie uns schnell jeden Wert eingeben, der verwendet wird, um unser Spiel zu beenden. Wir verlieren, wir sehen den neuen Spiel-Button, und wir können jetzt keine neuen Werte mehr in unser Eingabefeld. Wenn wir nun jedoch versuchen, auf den neuen Spiel-Button zu klicken, sehen wir im Browser nichts passiert. Alles, was wir mit dieser Schaltfläche tun, ist es zu ermöglichen, den Browser neu zu laden , der uns zurück zum Startbildschirm führt. Oben in unserer index.html können wir onclick Ereignishandler zu dieser Schaltfläche hinzufügen. Im öffnenden Tag onclick. Ich werde dies auf eine neue Funktion namens NewGame setzen. Zurück zu unserem Drehbuch. Lassen Sie uns dies nur auf dem GameEnd hinzufügen. Dies war NewGame, und die Art und Weise, wie wir den Browser innerhalb unseres Codes neu laden können, besteht darin, die window.location auszuwählen und dann eine Methode namens reload aufzurufen. Lassen Sie uns überprüfen, ob das funktioniert und beenden Sie unser Spiel. Bei beliebigen Zufallswerten im Inneren sehen wir nun den Endbildschirm. Klicken Sie auf das NewGame, und wir haben ihn jetzt auf den Startbildschirm gebracht. 10. So erstellst du den Abschnitt des Bereiches: In unserer Index- oder HTML-Seite haben wir diesen Bereich frühzeitig erstellt. Nun, dies wird Sie aktualisieren und wieder, um den Spieler zu zeigen, der Zahlenbereich, aus dem sie noch zur Auswahl haben. Wir werden dies tun, indem wir diese drei Abschnitte aktualisieren. Wir werden JavaScript verwenden, um das CSS wie den Rand, und auch die Hintergrundfarbe, O2O-Skriptdatei und wir können jetzt einrichten. Das erste, was ich gegen die Spitze tun möchte, ist, zwei neue Variablen zu setzen. Diese Variablen werden das niedrige und auch das hohe sein, und diese werden während des Spiels aktualisiert werden. Wenn wir unser Spiel zum ersten Mal beginnen, ist der niedrige Wert eins, und der höchste Wert ist 100. Stellen wir diese Standardwerte hoch, hoch von 100s. Es ist ein Handle, all diese Funktionalität, wir werden eine neue Funktion erstellen, und dies wird UpdateRange genannt werden. Um unseren Bereichsschieber zu aktualisieren, müssen wir auf alle drei dieser Abschnitte zugreifen. Lassen Sie uns diese zuerst durch die ID zuschneiden, also getElementById. Die erste war niedrig, und so befindet sich innerhalb einer Konstante namens LowValue. Wir können das noch zwei Mal beurteilen, und das zweite ist der Raum. Dies ist der Abstand zwischen den hohen und den niedrigen Werten. Der dritte ist hoch. Ich nenne dies den HighValue. Sowohl dieser LowValue als auch der HighValue werden die roten Bereiche sein, die wir sehen können, wenn wir ins Spiel gehen. Dies wird der untere Abschnitt über auf der linken Seite sein, und dann werden wir den höchsten Abschnitt über auf der rechten Seite aktualisieren. Dieser Raum dazwischen ist der Bereich, aus dem der Benutzer noch wählen muss, und dies wird ein grüner Abschnitt sein. Um dies innerhalb unseres Skripts zu tun, werden wir diese CSS-Werte der Flexbox und auch die Hintergrundfarbe aktualisieren . Um einen Platz für den niedrigen Abschnitt auf der linken Seite zu machen, müssen wir den Wert von low berücksichtigen, und wir können dies als Prozentsatz verwenden, um den Flex-Wert festzulegen. Denken Sie daran, wenn Sie die Flexbox verwenden, wenn alle drei dieser Abschnitte den gleichen Wert von eins hätten, würden diese alle versuchen, eine gleiche Menge an Speicherplatz zu beanspruchen. Allerdings wird dieser Abschnitt nicht gleich sein , da er auf unseren Variablen basieren wird. Beginnen wir mit unserer lowValue-Variable, wir können die style-Eigenschaft oder flex setzen, und dies wird gleich unserer niedrigen Variablen sein, und da dies CSS ist, müssen wir auch eine Zeichenfolge am Ende hinzufügen, Dies ist das Prozentsymbol. Dies wäre auch für Überwerte, wie z. B. ein Pixel, gleich . Wir werden diesem LowValue auch eine Hintergrundfarbe geben. Stellen Sie den dunklen Hintergrund so ein, dass er unserer Hintergrundfarbe entspricht, die ef7b54 sein wird. Wir werden eine ziemlich ähnliche Sache für unsere nächsten beiden Abschnitte tun, also lassen Sie uns diese beiden Stilabschnitte kopieren. Ich werde dies direkt unter unserem Raum einfügen, und auch den hohen Abschnitt. Der Raumabschnitt wird alles dazwischen sein. Um diesen Wert zu erhalten, werden wir auf die hohe Variable zugreifen und das Tief wegnehmen, das uns den Raum dazwischen geben wird. Der Hintergrund wird unsere grüne Farbe sein, die der Wert von 83e1d0 ist. Der letzte ist dieser Wert von hoch unten unten unten. Jetzt können wir nicht einfach den Wert von high ausgeben. Nun, das liegt daran, wenn wir einen Blick auf unsere Fortschrittsleiste werfen, wenn die hohe Vermutung der Benutzer zum Beispiel 70 ist. Wenn wir dies als Wert von 70 hinzufügen, wird ein roter Abschnitt von links, rechts über bis zu 70 Prozent erzeugt. Allerdings haben wir bereits die niedrigen Abschnitte und den Abstand dazwischen Wenn dies also ein Wert von 70 sein würde, wollen wir nur einen roten Abschnitt für die restlichen 30 Prozent direkt am Ende erstellen . Die Art und Weise, wie wir dies tun können, ist, das von einer 100 wegzunehmen, und das wird uns den verbleibenden Platz geben, um den roten Abschnitt direkt am Ende auszufüllen. Wir haben bereits diese rote Farbe von vorher gesetzt, also können wir diese jetzt speichern und diese Funktion dann jedes Mal aufrufen, wenn der Benutzer eine Vermutung macht. Unsere Funktion ist UpdateRange. Wir können dies nach jeder Vermutung in unserer CompareGuess Funktion aufrufen. Dies ist unser CompareGuess, also lassen Sie uns das Öffnen in Klammern auswählen, und rufen Sie uns dies kurz nach dem Schließen auf. Wenn ich jetzt diese Datei speichere und es uns ausprobiere, das sind Werte im Inneren von hier, sehen Sie, dass noch nichts richtig funktioniert. Dies liegt daran, dass wir uns sowohl auf die hohen als auch auf die niedrigen Variablen ganz oben verlassen , aber wir haben dies noch nicht mit der Vermutung des Benutzers aktualisiert. Wir können diese beiden Werte aktualisieren, zurück nach unten in unserer CompareGuess Funktion. Der erste if Abschnitt, hier checken wir ein, wenn die Vermutung des Benutzers zu hoch ist. Daher können wir unsere hohe Variable mit dem Wert der Vermutung des Benutzers aktualisieren. Darunter, innerhalb unseres else if -Abschnitts, ist dies, wenn die Vermutung des Benutzers zu niedrig ist. Daher können wir unsere niedrige Variable aktualisieren, um gleich der Vermutung unserer Benutzer zu sein. Speichern wir diese Datei und probieren Sie dies im Browser aus. Fügen Sie alle Werte innerhalb von hier hinzu, und wir sehen immer noch kein Update, also schauen wir uns das an. Wir erhalten den hohen Abschnitt, wenn die Vermutung des Benutzers zu hoch ist. Wenn es zu niedrig ist, erhalten wir im niedrigen Abschnitt. Gehen wir zu unserer Funktion. Die Hälfte unserer Variablen, UpdateRange. Wir können aus dem Texteditor sehen, dass unser Raum und auch die HighValue-Variablen nicht verwendet werden, also lassen Sie uns es ändern, um Raum zu sein, und auch das gleiche direkt darunter. Diese beiden sollten einen hohen Wert haben, und ich denke, dies ist einer der Nachteile des Kopierens und Einfügen, also speichern wir das, und geben Sie uns einen Sprung in den Browser. Fügen Sie hier alle Werte hinzu, also 10, und die ersten 10 Prozent sind jetzt unser niedriger Abschnitt, lassen Sie uns mit einem hohen Wert von 90 versuchen. Dieser füllt die letzten 10 Prozent gibt uns den Bereich dazwischen. Gehen wir für 50, das schließt sich jetzt. Dies funktioniert so ziemlich alles richtig, aber es gibt ein kleines Problem. Derzeit ist unser höchster Wert 90, aber wenn wir einen HighValue wie 99 hinzufügen würden, sehen wir, dass unsere Reichweite jetzt steigt. Wenn wir einen höheren Wert hinzufügen, wollen wir nicht, dass unsere Reichweite steigt, wir wollen immer noch mit dem vorherigen Hoch bleiben, das 90 war. Es mag etwas verwirrend klingen, aber wir wollen die hohe Variable nur aktualisieren, wenn sie niedriger als das vorherige Hoch war. Zurück zu unserer Vergleichsfunktion, wenn wir unser Hoch setzen, werden wir ein if save erstellen, das überprüft, ob unsere Benutzer-Vermutung niedriger ist als das vorherige Hoch. Wenn ja, werden wir dann unsere Variable setzen. Dies wird alle Fälle stoppen, wie zuvor, wenn unser vorheriges Hoch 90 war, und dann war die Benutzer-Vermutung 99, und eine if-Anweisung wie diese wird dieses Ding daran hindern. Das Gleiche wird passieren, wenn wir für den niedrigen Abschnitt zurückgehen, wenn Sie ein Tief von 50 haben, das gibt uns jetzt unser Sortiment von eins bis 50, gehen wir für unsere 30, 10. Nun, unser tiefer Abschnitt ist zwischen eins und 10. Wenn wir einen niedrigeren Wert wie fünf hinzufügen würden, wieder passiert das gleiche Problem, das geht breiter, während wir wollen, dass dieser Aufenthalt genau gleich bleibt. Direkt unten, wo wir unseren niedrigen Abschnitt aktualisieren, können wir auch eine bedingte Anweisung hinzufügen. Wir möchten nur, dass diese Variable aktualisiert wird, wenn die Vermutung des Benutzers höher als das aktuelle Tief ist . Lassen Sie uns das einen Test machen. Lassen Sie uns für eine 10 als 90. Nun, gehen wir für den niedrigen Abschnitt, wenn wir diesen tiefer machen, wie fünf, dieser rote Abschnitt bleibt genau dort, wo er ist. Wir werden versuchen, höher zu gehen, also 95, und das scheint jetzt alles richtig zu funktionieren. Unser Regenteil ist fast jetzt fertig und das nächste, was zu tun ist, ist, auch den Text in der Mitte zu aktualisieren. Dies ist unser aktuelles Sortiment von eins bis 100s. Wir möchten dies auch während des Spiels aktualisieren. Wir werden dies auch nach links oder rechts schieben, um über unserem grünen Abschnitt zu sein. Der Ort, an dem wir dies tun werden, ist wieder in unserer Update-Bereichsfunktion. Blättern Sie zurück nach oben. Wir können dann diesen Abschnitt auswählen, der innerhalb der Spanne mit der ID der Bereichsausgabe eingewickelt wird. Der erste Schritt ist, das zu greifen. Wir würden Element nach ID bekommen. Lassen Sie uns diese innerhalb einer Konstante namens Bereichsausgabe speichern. Wir möchten nun diese Bereichsausgabe erfassen und dann den HTML-Code aktualisieren , um die neuen aktualisierten Werte zu sein. Lassen Sie uns das Back-Häkchen verwenden, damit wir eine Template-Zeichenfolge erstellen können, die es uns ermöglicht, einige Variablen in unsere Ausgabe einzufügen. Die erste Variable, die wir innerhalb des $ -Symbols und der geschweiften Klammern hinzufügen. Dies ist ein Wert von low , den Sie direkt oben setzen, der Strich, fügen Sie ein $ Symbol und dann können wir unsere hohe Variable innerhalb der geschweiften Klammern einfügen. Wir gehen dann weiter, um diesen Abschnitt nach links oder rechts zu bewegen, um direkt über unserem grünen Abschnitt zu sein. Wir können dies tun, indem wir den Rand auf der linken und auch auf der rechten Seite setzen. Der Rand auf der linken Seite wird der gleiche sein wie unser niedriger Abschnitt und der Rand auf der rechten Seite wird gleich unserem hohen Abschnitt sein und stellen Sie sicher, dass dies im Text ist. Dies wird dies als Textwert unseres Elements setzen. Wieder werden wir unsere Bereichsausgabe auswählen und wir werden mit der Stil-Eigenschaft beginnen , die Margin-links sein wird. Wenn Sie eine Style-Eigenschaft mit JavaScript setzen, verwenden wir keine Bindestriche, wie wir es mit CSS tun würden. Stattdessen setzen wir dies als camelCase, so dass das erste Wort des Margens ganz klein ist und dann jedes Wort kurz danach mit einem Großbuchstaben beginnt. Wie ich bereits erwähnt habe, werden wir das so einstellen, dass es genau das Gleiche ist wie unser niedriger Wert. Wir setzen dann unsere Marge auf der rechten Seite. Genau wie oben werden wir den Stil festlegen, aber dieses Mal der Rand auf der rechten Seite und das ist der gleiche wie unser Flex-Wert, also kopieren Sie dies und lassen Sie uns dies testen. Also 10, 90, das ist gleich, also ist unser Text jetzt in der Mitte. Versuchen wir 50 und 70, 85, und jedes Mal, wenn wir unser Sortiment aktualisieren, wird dies jetzt knapp über unseren grünen Bereich geschoben. Gut. Dies ist der Bereich jetzt abgeschlossen und der letzte Schliff, den ich zu diesem Projekt machen werde, ist auch diese Nummer Abschnitt Flash machen. Die Art und Weise, wie wir dies tun können, besteht darin, eine Animation zu unserer Bereichsausgabe hinzuzufügen und diese dann innerhalb unseres CSS zu setzen. Das wird einigermaßen unkompliziert sein. Alles, was wir tun werden, ist, eine neue Klasse hinzuzufügen , und wir können diese Eigenschaft mit einer Klassenliste setzen. Klassenliste hat eine Methode namens add, die es uns ermöglicht, eine neue Klasse hinzuzufügen, die wir Flash nennen werden. Wir können dies dann in unserer styles.css verwenden. Außerhalb unserer unmittelbaren Abfrage, genau wie bei jeder der Klasse, zielen wir dies mit dem Punkt ab und dann können wir hier unsere Animation einrichten. Unsere Animation wird die Keyframes Regel verwenden, so können wir unsere Keyframes einstellen und dies wird uns erlauben, genau festzulegen , welche CSS-Eigenschaften wir als jede Stufe unserer Animation hinzufügen oder entfernen möchten. Der Animationsname wird gleich Flash sein und dann im Inneren können wir genau beide CSS-Regeln festlegen. Wir wollen zu unterschiedlichen Prozentsätzen anwenden, also bei Null Prozent, was der Anfang ist, können wir die Deckkraft auf einen Wert von eins setzen und ein Wert von eins ist überhaupt nicht transparent, das ist völlig undurchsichtig. Es ist genau so, wie das Element aussehen soll. Bei 50 Prozent oder auf halbem Weg durch diese Animation werden wir diese Deckkraft dann auf 0,5 reduzieren. Null wäre vollständig transparent oder vollständig durchsichtig. Das ist also ein halber Wert. Am Ende unserer Animation können wir den 100-prozentigen Wert so einstellen, dass er auf den Wert eins zurückgesetzt wird. Jetzt haben wir diesen Animationsnamen von Flash, wir können jetzt dies einstellen. Ich werde auch diese Animation auf eine Dauer von einer Sekunde einstellen und dies auch als unendlich festlegen , damit unsere Animation weiterhin im Browser läuft. Lassen Sie uns diese speichern und versuchen Sie diesen oder einfachen Modus und wenn es wieder startet, wird die Klasse jetzt hinzugefügt und wir können sehen, dass unsere Animation jetzt wirksam ist. Herzlichen Glückwunsch, Sie haben jetzt das Ende dieses Projekts erreicht und ich werde Sie im nächsten sehen. 11. Folge mir auf Skillshare: Ein herzlicher Glückwunsch von mir, dass ich das Ende dieser Klasse erreicht habe. Ich hoffe, Sie haben es wirklich genossen und etwas Wissen daraus gewonnen. Wenn Sie diese Klasse genossen haben, stellen Sie sicher, dass Sie den Rest meiner Klassen hier auf SkillShare überprüfen, und folgen Sie mir auch für Updates, und auch um über alle neuen Klassen informiert zu werden, sobald sie verfügbar sind. Nochmals vielen Dank, viel Glück. Hoffentlich sehe ich dich wieder in einer zukünftigen Klasse.