JavaScript Fun: Baue ein Zahlen-Match-Spiel!

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, sind 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, keine bolerplate, keine Bibliotheken oder irgendwelche Vorlagen verwenden. Stattdessen werden wir alles komplett von Grund auf neu aufbauen, Schritt für Schritt, um Ihnen zu zeigen, wie diese kostenlosen Technologien alle zusammenarbeiten. Dieses spezielle Projekt wird ein Zahlenspiel sein. Die Regeln sind ziemlich unkompliziert. Wenn wir auf den Play-Button klicken, werden wir dann mit einer Reihe von Bildern präsentiert, und dann muss der Benutzer entscheiden, ob die Anzahl der Elemente im Bild die gleiche wie die Frage auf der linken Seite ist. Wenn wir denken, dass dies wahr ist, klicken wir auf das Häkchen, Wenn wir glauben, dass dies falsch ist, klicken wir auf das Kreuz und unsere Punktzahl wird dann in Abhängigkeit von der richtigen Antwort angepasst. Wir haben eine bestimmte Anzahl von Bildern, die alle einzigartig sind. Außerdem können wir die Zeitdauer zwischen jedem dieser Bilder auch ändern. Am Ende des Spiels erhalten wir auch die Möglichkeit, ein neues Spiel zu beginnen und auch unsere Gesamtpunktzahl zu sehen. Wie bei allen anderen Projektenerstellen wir die Benutzeroberfläche mit HTML, erstellen wir die Benutzeroberfläche mit HTML, und dann verwenden wir unser CSS für das Styling und auch für das Layout. Wir arbeiten mit Arrays von Objekten, arbeiten mit Zeitverzögerungen, Funktionen und arbeiten mit dem DOM. Zufälliges Einstellen der Quelle des Bildelements, Generieren und Anzeigen in Zufallszahlen, Vergleichen von Zahlen, Arbeiten mit Timeouts, Aktualisierung der Benutzernote und auch einige nette kleine Berührungen wie einige Fade, Animationen zu. Dies ist ein großartiges Projekt, wenn Sie ein Anfänger und ein Neuling von HTML, CSS und JavaScript sind , und ich hoffe, Sie interessieren sich für diesen Kurs. Wir sehen uns in der ersten Lektion. 2. Teile deine Arbeit auf Skillshare!: Wenn Sie an einem Kurs teilnehmen, ist es wirklich wichtig, dass Sie sich nicht angewöhnen, dem nur zu folgen um eine weitere Vorlesung abzubrechen. 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. Sie müssen sich nicht zu sehr verirren und vom Unterricht ablenken , und Sie können sogar einen Schritt zurücktreten, nachdem Sie den Kurs beendet haben, und danach zurückkommen und einige Projektänderungen vornehmen. Das gibt dir wirklich eine gute Gelegenheit, das, was du im Unterricht gelernt hast, praktisch anzuwenden. Denken Sie auch daran Ihr Projekt auch hier auf Skillshare zu teilen, und ich werde es mir nicht nur ansehen, sondern 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: Für dieses nächste Projekt, das das Zahlenspiel ist, werden wir uns darauf verlassen, ziemlich viele Bilder zu verwenden. Sie können Ihre eigenen Bilder für diesen Kurs verwenden, aber ich habe auch einen Image-Ordner zur Verfügung gestellt, wenn Sie die gleichen wie ich verwenden möchten. Wenn Sie zu github gehen und zum Repository für diesen Kurs gehen, der Fun-Javascript projects.com ist. Sie werden dann zu einer Seite weitergeleitet, wo Sie den vollständigen Code herunterladen können , der alle Projekte und auch diese Schritte Lösungen und auch alle Assets enthält . Von hier aus können wir die ZIP-Dateien herunterladen, das komplette Bundle erhalten. Dann einmal heruntergeladen, wenn wir in das Zahlenübereinstimmungsspiel gehen, sehen Sie einen Bilderordner. Es wird auch die kalten Lösungen für jedes Video geben. Das wird das Spiel sein, das wir erschaffen werden. Es ist eine ziemlich einfache Benutzeroberfläche, wir haben nur zwei Abschnitte. Wir haben einen Willkommensbereich, in dem wir auf den Play-Button klicken und loslegen werden. Die ganze Idee dieses Projekts ist, dass wir eine Reihe von Bildern durchlaufen werden, werden dann eine bestimmte Menge an Gegenständen in jedem dieser Bilder haben, wie zwei Karten oder acht Geburtstagskerzen. Dann muss der Benutzer entscheiden, ob die Nummer auf der linken Seite die gleichen mehrere Elemente wie auf dem Bild ist. Zum Beispiel haben wir zwei Paprika, also wäre dies richtig. Wir klicken auf das Häkchen. Dies sind sieben Pinsel, so dass das falsch sein wird, ich werde auf das X klicken. Die Zeitskala für jedes dieser Bilder wird auch innerhalb des Projekts festgelegt werden. Das ist komplett einstellbar. Wenn Sie möchten, dass das Spiel schwieriger wird, können wir die Zeit reduzieren, und wir können es auch erhöhen, um das Spiel einfacher zu machen. Das Spiel ist effektiv überwältigend, wir Zyklus durch alle Bilder. In unserem Fall haben wir 20 Bilder im Ordner Images zur Verfügung gestellt. Sobald wir durch 20 von diesen bekommen, erhalten Sie dann einen Bildschirm am Ende, der dem Benutzer sagt, wie viele sie richtig haben. Über auf den Desktop und lassen Sie uns einen neuen Projektordner erstellen. Der Name dieses Namens wird eine Zahlenübereinstimmung sein. Ziehen Sie das in Ihren Texteditor. Wir können mit einer neuen Datei beginnen, die die index.HTML sein wird. Auch hier brauchen wir unsere HTML-Struktur und ich werde den eingebauten emmet-Befehl verwenden , der HTML5 ist, und fügen Sie dann einen Dokumenttitel hinzu , der Zahlenübereinstimmung ist. Lassen Sie uns mit der rechten Maustaste und kopieren Sie den Pfad, und fügen Sie ihn in eine neue Browser-Tab. Lassen Sie uns in unserem Körperteil arbeiten. Dies wird einen Hauptabschnitt enthalten, der der Haupt-Wrapper für den gesamten Inhalt sein wird. Wir werden auch dieses innerhalb von JavaScript nutzen , damit wir diesem eine eindeutige ID geben können. Ich will zum Spielbereich gehen. Dieser Hauptabschnitt wird aus zwei Hauptbereichen bestehen. Wir werden den Startbereich haben, der auf der linken Seite ist, und auf der rechten Seite werden wir den Bildbereich haben. Dies geht in zwei separate divs. Die erste ist für die linke Seite. Die Klasse fängt an. Das zweite div wird für den Bildbereich zur Klasse des Bildbereichs sein. Dies sind unsere beiden wichtigsten Wrapper für unseren Spielbereich, und wir werden auf der linken Seite beginnen, das sind diese Statistiken. einen Blick auf die endgültige Version hier, wir eine Punktzahl haben, die dynamisch aktualisiert werden wird , wenn der Benutzer diese richtig oder falsch bekommt. Wir werden dann eine Nummer haben, die zufällig generiert wird, den Namen des Bildes und dann unsere beiden Tasten. Auch als Randnotiz auch, wenn wir später dazu kommen. Die Nummer, die gerade hier generiert wird. Dies wird entweder die genaue Anzahl der Elemente im Bild sein, oder es wird eins höher, eins niedriger sein. Dies ist, um das Spiel ein wenig schwieriger zu machen. Zum Beispiel möchten wir keine 10 Elemente auf dem Bildschirm sehen. Dann eine Reihe von eins im Vergleich zu, da dies das Spiel ziemlich einfach machen würde. Lassen Sie uns im Startbereich dieses div öffnen. Ich werde ganz oben mit einem Level 3 Überschrift beginnen. Dieser Beitrag den Text der Partitur. Die Benutzerbewertung wird etwas wie 2 über 20. Aber diese beiden Bereiche werden dynamisch sein. Die erste können wir ein Span-Element erstellen. Geben wir ihm eine ID, die unsere aktuelle Punktzahl sein wird. Kurz nach dem Schrägstrich kann dies ein dynamischer Abschnitt 2 sein. Ein zweiter Bereich Elemente. Dies wird die ID haben, die gleich der Summe zur Verfügung steht. Dies wird die Gesamtanzahl der verfügbaren Punkte sein, die die gleiche Anzahl von Bildern ist, die wir haben werden. Wir können auch einige Platzhalterwerte hinzufügen, nur um dies besser sichtbar zu machen. Gehen wir für zwei und 20. So sieht es im Browser aus. Das nächste, was zu tun ist, ist, zu unserem nächsten Abschnitt zu gehen. Wenn wir auf „PLAY" klicken, wird dies die Anzahl der Elemente im Bild gefolgt von den beiden Tasten sein . Lassen Sie uns dies unter der Überschrift Level 3 tun. Der Text wird die Klasse der Elemente haben. Dies ist so können wir einige Styling innerhalb des CSS hinzufügen. Auch hier werden zwei dynamische Abschnitte sein. Wir werden die zufällig generierte Zahl haben, die entweder die Anzahl der Elemente eins höher oder eins niedriger ist. Lassen Sie uns dies innerhalb einer Spanne mit der ID der Nummer tun. Wir können hier einen Platzhalter Wert hinzufügen. Dann eine zweite Spanne mit der ID, die dem Elementnamen entspricht. Ein Platzhalterwert innerhalb von hier, also werden dies die Bilder sein, also lassen Sie uns für sechs Enten und ein Leerzeichen dazwischen gehen. Als nächstes können wir kurz nach dem p-Element einen neuen div-Abschnitt hinzufügen, der der Wrapper für unsere beiden Schaltflächen sein wird. Die Klasse, die im CSS verwendet werden soll, wird dies gleich vielen Schaltflächen sein. Dann unsere erste Schaltfläche, das erste Symbol, das wir verwenden werden, oder das erste Zeichen wird das Tic sein, das als Hedge-kleine Entität mit dem Code des kaufmännischen Unds verwendet wird, der Hash 10003 gefolgt von dem Semikolon. Die zweite Schaltfläche, die über sein wird, und dies wird ein HTML-Entitätscode sein, der das kaufmännische Und-Zeichen, das harte 10007 und das Semikolon ist. Die nächste Stufe besteht darin, den Bildbereich hinzuzufügen, der die rechte Seite sein wird. Derzeit, wenn wir gerade den HTML starten, kann dies ein wenig chaotisch aussehen , weil wir zwei Abschnitte erstellen müssen. Wir müssen diesen Willkommensbildschirm erstellen, und wir müssen auch den Bildbereich erstellen, sobald das Spiel im Spiel ist. Wir verwenden JavaScript, um diese beiden Abschnitte ein- und auszublenden. Beginnen wir, wenn wir zu unserem zweiten div gehen, kurz nachdem die Statistiken, die Bildbereich ist, am Anfang mit unserem Willkommensbildschirm arbeiten. Ganz oben werden wir eine Überschrift der Ebene 3 hinzufügen, die die ID der Nachricht haben wird. Dies wird eine leere Überschrift der Ebene 3 sein, und wir werden später JavaScript verwenden, um eine Nachricht hinzuzufügen, die dem Benutzer Desk Anruf mitteilen wird. Dieser Abschnitt wird auch nur am Ende des Spiels verfügbar sein. Als nächstes wird ein div Abschnitt, und dies wird der Wrapper für unseren Startbildschirm sein. Hier drinnen wird dies nur der gesamte Inhalt sein, den wir am Anfang sehen. Dann verstecken wir das und beginnen dann mit dem Spiel. Um dies einzigartig zu halten, können wir eine ID hinzufügen, die gleich dem Startbildschirm ist, und der Inhalt zu beginnen wird eine Ebene 1 Überschrift sein. Das ist der Text, den wir ganz oben sehen werden. Beachten Sie auch, wie die Wortnummernübereinstimmung ebenfalls hervorgehoben wird. Das ist unser Abstieg. Dann können wir die Zahlenübereinstimmung in die m-Elemente einwickeln. Der nächste Abschnitt wird auch betont. Wir können sagen, dass die Regeln einfach sind. Wieder in den m-Elementen. Dann wird der ganze Rest des Textes in den p-Elementen sein. Den nächsten beiden Zeilen wird eine HTML-Entität für diesen kleinen Pfeil vorangestellt. Dies wird den Entitätscode haben, der gleich dem kaufmännischen Und-Zeichen, dem harten 96, 54, und dann dem Semikolon, gefolgt vom Text, alle Treffer Daumen nach oben. Wenn die Anzahl der Elemente mit der angezeigten Anzahl übereinstimmt. Danach, ein zweites p-Elemente, werden wir wieder den gleichen HTML-Entitätscode wie oben verwenden. Wir können jetzt absteigen, auf dem Text ist Daumen nach unten, wenn keine Übereinstimmung. Die dritte, die letzte Textzeile ist, ist, dass Sie eine bestimmte Anzahl von Sekunden haben, um zu entscheiden. Diese Zahl wird auch dynamisch sein, so dass wir dies im JavaScript ändern können. Wir müssen diese Zahl in eine Spanne einschließen, die die ID der Zeiteinstellung haben wird. Sie in dem p -Element, das Sie haben, ErstellenSie in dem p -Element, das Sie haben, ein span Element mit dieser ID. Sie können die Zahl hier hinzufügen, wenn Sie möchten, gefolgt von Sekunden, um zu entscheiden. Mal sehen, wie es im Browser aussieht. Das sieht alles gut aus, es hilft uns später nur mit dem CSS. Wir werden auch eine Klasse jede dieser Textzeilen hinzufügen. Dies wird eine Abstandsklasse sein, in der wir einige Abstände oben und unten hinzufügen werden. Gehen wir zu unseren Textzeilen, und wir beginnen mit der ersten Zeile unter dem Titel. Ich werde uns eine Klasse geben, die Space Dash y ist, da dies für das Hinzufügen von Platz und auf der Y-Achse verantwortlich ist. Kopieren Sie dies und fügen Sie es in die p Elemente direkt darunter ein. Dies wird uns einen konsistenten Raum geben, wenn wir unser Styling hinzufügen. Danach haben wir auch eine Play-Schaltfläche unten unten. Gespeichert in diesem div Abschnitt, eine Schaltfläche mit der ID der Play-Schaltfläche, Text zu spielen. Dies ist jetzt der gesamte Inhalt, den wir für all diesen Willkommensbildschirm benötigen. Das nächste, was wir tun müssen, ist ein Platzhalterbild hinzuzufügen, das für effektiv den nächsten Bildschirm sein wird. Es wird einen Blick auf die fertige Version werfen gerade hier. Alles, was wir hier tun müssen, ist, jedes dieser Bilder zu drehen oder zu durchlaufen. Alles, was wir brauchen, und das ist nur ein Platzhalter, gehen Sie unter die Schaltfläche und dann außerhalb unseres Startbildschirmabschnitts. Ein neues div, das der Wrapper für dieses Bild mit der ID des Image-Containers sein wird . Wir werden ein Bild dynamisch mit JavaScript erstellen. Aber jetzt können wir ein Platzhalterbild hinzufügen, nur damit wir sehen können, wie alles aussieht, wenn wir kommen, um unser CSS hinzuzufügen. Zunächst können wir in den Ordner Bilder gehen, und dann Schrägstrich und den Namen eines unserer Bilder. Ich will die Makronen holen. Wir können den Alt-Text vorerst belassen, da dieser sehr bald entfernt wird. Als nächstes müssen wir diese Bilder tatsächlich in unseren Projektordner hinzufügen. Wir können die gleichen Bilder verwenden, die ich in diesem Kurs verwendet habe, oder Sie können Ihre eigenen herunterladen. Ich werde diese in unsere Zahlenübereinstimmungsprojekte einfügen. Dies sollte uns nun ein Bild hinterlassen. Es sieht ein wenig chaotisch aus, da diese beiden Abschnitte ausgetauscht werden. Wir müssen auch etwas CSS Styling hinzufügen, was wir im nächsten Video tun werden. 4. Design mit CSS: Wir sind jetzt wieder mit unserem Projekt und zu diesem Zeitpunkt werden wir einige CSS Styling anwenden , um das Aussehen und das Gefühl dieses Projekts zu verbessern. Um dies zu tun, als würden wir ein Stylesheet innerhalb unseres Projektverzeichnisses erstellen. Neue Datei, und das ist die styles.css. Wir können dies innerhalb der Kopf- oder Indexseite mit unserem Link verknüpfen. Dies ist auf der gleichen Ebene wie unsere Indexseite. Dies ist einfach der Name von styles.css. Wir können zu unseren Stylesheets gehen und damit beginnen, die Wurzel eine Größe innerhalb unseres HTML-Selektors zu erstellen . Beginnen wir mit der Root-Schriftgröße, und ich werde für eine 10 Pixel gehen, und auch eine Farbe, die auf alle Texte in unserem Projekt angewendet wird und lassen Sie uns es überschreiben, kann Selektor verwenden. Die Farbe, für die man sich entscheiden soll, wird 212560 sein. Ich werde überprüfen, dass dies funktioniert, indem Sie den Browser neu laden, und das ist alles jetzt wirksam. Jetzt gehen wir zum Spielbereich, der der Hauptwrapper war , und dies ist der Wrapper für beide vie stats Abschnitt und auch die ImageArea. Das war keine ID, also benutzen wir die harte. Jetzt werden wir hier tun, ist es, einige Schriftart-Styling und auch die Größe zu setzen. Also 1.6rems, etwas Polsterung. Lassen Sie uns für Polsterung auf der Oberseite von 3rems gehen. Dies gibt uns nur einige Abstände oben auf der Seite gerade hier. Der Großteil unseres Stylings wird in zwei Abschnitte aufgeteilt. Haben Sie den Stat-Abschnitt , der alle Informationen oben hier oben ist. Wir haben die Punktzahl, die Anzahl der Elemente auf dem Bild, und auch das Häkchen und die Kreuztasten, und dann unten, was dieser ganze Abschnitt hier sein wird. Dies wird der Bildbereich sein. Lassen Sie uns zunächst beide Abschnitte anvisieren und wir können die minimale Höhe für den kleinen Bildschirm einstellen. Dies ist die Klasse des Bildbereichs und auch die gleiche für Statistiken. Die minimale Höhe, ich werde für 30 vh gehen, das ist 30 Prozent der Browser sichtbaren Ansichtsfenster. Das wird unsere Abschnitte etwas größer machen. Es ist im Moment nicht wirklich wichtig, weil Sie ziemlich viel Inhalt auf dem Bildschirm haben werden, aber später in JavaScript, wenn wir zwischen diesem Abschnitt und dem Bild wechseln, gibt es weniger Inhalt auf der -Bildschirm. Für den Bildbereich werde ich einen Farbverlauf als Hintergrundfarbe anwenden, genau wie die endgültige Version. Dies wird der Abschnitt oval auf der rechten Seite oder auf dem kleinen Bildschirm sein. Dies wird der Abschnitt unten sein. die ImageArea hinunter bewegen, können wir dies tun, indem wir einen Hintergrund als linearen Farbverlauf festlegen. Die erste Farbe werde ich 859ede wählen. Für den zweiten Wert werde ich 6965de gehen. Lassen Sie uns überprüfen, dass es Arbeit in ist. Das ist in Ordnung und das gibt uns diesen geraden linearen Farbverlauf vom helleren bis dunkleren Farbton. Aber ich werde nur einen optionalen ersten Wert von 70 Grad, gefolgt von einem Komma setzen. Dies wird unsere Farbverläufe auf der Seite bei 70 Grad versetzen. Als nächstes wird der Grenzradius, der sowohl für die untere linke als auch für die untere rechte in der mobilen Ansicht gelten wird. Dafür können wir die vier Werte anwenden und diese gehen im Uhrzeigersinn von oben links. links von Null, oben rechts von Null zu und dann, sowohl die unteren rechten als auch die unteren linken Werte von 3rem. Diese sind nun am Ende unseres Abschnitts wirksam geworden. Nur um dies klarer zu sehen, können wir unser Bild vorübergehend entfernen. Lassen Sie uns das aussagen. So sieht das Spiel aus, bevor der Benutzer auf die Schaltfläche „Play“ klickt. Zurück zu unseren Stylesheets und immer noch innerhalb der ImageArea, werden wir die Displayart von Flex verwenden, die es uns ermöglichen wird, all diesen Text in der Mitte zu positionieren. Lassen Sie uns zunächst die Flexrichtung auf Spalte setzen. Alle unsere Inhalte sind vertikal gestapelt, und dann können wir den rechtfertigen Inhalt verwenden, die Räume in die Mitte. Da dies unsere Hauptachse von oben nach unten ist, rechtfertigen Inhalt wird vertikal zu diesem senden, wir sehen, dass wir einige ungleichmäßige Raum oben und unten haben. Dies liegt an einigen Browser-Standardeinstellungen für die Überschrift der Ebene 1. Wir werden einen Blick darauf werfen, dies sehr bald zu beheben. Nur um diesen Bildbereich zu beenden, lassen Sie uns etwas Padding rundum mit dem Wert von 3rems hinzufügen. Dieser ungleichmäßige Platz oben und unten ist wegen dieser Überschrift nur hier innerhalb unserer Indexseite. Wenn wir zu diesem Abschnitt gerade hier gehen, ist dies innerhalb der Ebene 1 Überschrift. Lassen Sie uns in die Entwickler-Tools gehen und wir können dies genauer sehen. Klicken Sie auf den Pfeil nur hier, und dann, wenn wir den Mauszeiger über unsere Ebene 1 Überschrift bewegen, können wir durch den orangefarbenen Abschnitt sehen wir einen Standardrand, der sowohl auf den oberen als auch auf den unteren Rand unserer Überschrift angewendet wurde. Nun ist der Rand ganz unten in dieser Überschrift in Ordnung weil dies einige Abstände zu unseren Texturen unten liefern. Um die Dinge jedoch zentraler in unserem Container zu halten, werden wir den Standardmarge von ganz oben entfernen. Gehen wir zu unseren Stylesheets und wir können jetzt die Browser-Standardeinstellungen entfernen. Zunächst einmal unsere Level-1-Rubrik. Wir können dies tun, indem wir den Rand auf die obere 0 zurücksetzen, und lassen Sie uns auch eine neue Schriftgröße von 2.4rems geben. Wir können immer noch sehen, dass oben mehr Abstand als unten ist. Nun, wenn wir zurück zu unserer Indexseite gehen, liegt dies daran, dass wir immer noch in diesem Bildbereich eine Überschrift der Ebene 3 mit der ID der Nachricht haben. Dies wird später verwendet, um eine Nachricht an den Benutzer anzuwenden , sobald das Spiel beendet ist. Aber im Moment nimmt das noch etwas Platz in der Kuppel ein. Wir können genau das Gleiche tun. Wir können den Browser-Standardrand oben entfernen, dies zurücksetzen, und nur für später können wir auch die Schriftgröße auf einen Wert von 2rems setzen. Dies lässt unseren Raum jetzt konsistenter. Dieser Abschnitt ist ziemlich vollständig, wir können jetzt bis zu diesem Querschnitt bewegen. Wir haben bereits die Rubrik der Stufe 3 angegriffen. Gehen wir hoch. Die Punktzahl ist auch innerhalb der Ebene 3 Überschrift, die Sie gerade gekümmert haben. Nun gehen wir zu unseren P-Elementen mit der Klasse der Elemente. Dies wird den Benutzer wissen, die Nummer, mit der verglichen werden soll. Alles, was wir tun werden, ist, dies ein wenig mehr hervorzuheben, indem Sie die Schriftgröße auf 2rems setzen. Die Items Klasse und da gehen wir. wir nach unten bewegen, haben wir auch diese beiden Tasten hier, und auch die Taste an der Unterseite zu. Zunächst einmal wollen wir unseren Button Selektor Ziel, und wir können einige Basisstile hinzufügen, beginnend mit der Breite der Schaltfläche und einem Wert von 8rems. Wir können alle Standard-Rahmen entfernen, die vom Browser angewendet wurden. Aber wir wollen immer noch, dass dies einige abgerundete Ecken hat. Wir können dies mit einem Border-Radius tun, einige Abstände, um den Knopf ein wenig gepolsterter innen zu machen. Also ein Padding Wert von 1 rem. Dann müssen wir auch diese andere Farbe machen und auch die Hintergrundfarbe entfernen. Wenn wir einen Blick auf den Moment haben wir diese hellgraue Farbe Taste eins zwei machen diese Tasten nur im Grunde eine Umriss, wie wir auf der endgültigen Version sehen. Wir können dies tun, indem Sie den Hintergrund entfernen, indem Sie dies auf eine Farbe von transparent setzen. Für diesen Bildabschnitt wird dadurch die blaue Hintergrundfarbe durchscheinen, und auch das gleiche für den Statistikabschnitt Oval auf der linken Seite. Wir können dann diese Rahmenfarbe oder diesen Umriss auf jede unserer Schaltflächen anwenden . Innerhalb des Schaltflächenselektors können wir den Hintergrund entfernen, indem wir diesen als transparent festlegen. Dann unsere Grenze. Dies wird zwei Pixel breit sein, eine durchgezogene Linie, und dann wird die Farbe, die ich verwenden werde, a1e0e4 sein. Schließlich können wir den Mauszeiger ändern, um einen Zeiger zu sein , wenn wir den Mauszeiger über eine dieser Schaltflächen bewegen. Alles, was wir tun müssen, ist, den Cursor als Zeiger zu setzen, und dies wird die Maus ändern, wenn Sie den Mauszeiger über. Nur um diese Tasten zu beenden, werden wir sicherstellen, dass der Kreuzknopf die rote Hintergrundfarbe hat. Genau wie wir hier sehen, haben wir eine andere Farbe für die Zecke und auch für das Kreuz. Eine Möglichkeit, dies zu tun, ist, indem wir die zweite Schaltfläche anvisieren. Innerhalb unserer Indexseite, hier, haben wir zwei Schaltflächen, die nebeneinander gruppiert sind, und da diese nebeneinander sind, können wir entweder das erste oder das zweite Kind auswählen. Weiter unten haben wir auch unseren Button, der im Bildbereich gerade hier ist. Da sich dies in einem anderen Abschnitt und nicht nebeneinander befindet, wirkt sich das n-te Kind dies nicht aus. Wir werden das klarer sehen, wenn wir zu unseren Stylesheets gehen, können wir unseren Knopf und dann einen Doppelpunkt anvisieren. Wir können dann das n-te Kind anvisieren. Lassen Sie uns einen Wert von zwei hinzufügen, da wir auf die zweite Schaltfläche ausgerichtet sind. Gehen wir weiter und ändern die Grenze. Wir wollen immer noch, dass dies zwei Pixel und eine durchgezogene Linie ist. Aber dieses Mal wollen wir eine andere Farbe verwenden, und ich werde für einen RGB-Wert gehen. Zunächst einmal rot, ein Wert von 241, 152 für das Grün und 152 für das Blau. Da diese Schaltflächen jetzt nebeneinander im DOM sind, wird dies auf die zweite Schaltfläche ausgerichtet. Wenn wir dies in eins ändern, wird dies auf die erste, Nummer 3, und dies hat keinen Einfluss auf unsere dritte Schaltfläche, da diese Schaltfläche völlig unabhängig ist und sie nicht Seite an Seite mit diesen beiden hier ist. Lassen Sie uns das wieder einsetzen, wir wollen, dass dies der zweite Knopf ist. Jetzt werden wir zu unseren Statistiken übergehen, die der Wrapper für diesen oberen Abschnitt war. Das ist die Gegend gerade hier. Wir werden die Hintergrundfarbe festlegen und auch einen Rahmen um sowohl die obere linke als auch die obere rechte Ecke anwenden , und dann auch den gesamten Inhalt in der Mitte dieses Abschnitts zentrieren. Kurz bevor wir diesem Abschnitt etwas CSS-Styling hinzufügen, möchten wir den gesamten Inhalt in den Statistiken ausschneiden und ein zweites div hinzufügen, das innen verschachtelt ist. Dieses div wird eine ID von Statistik-Inhalten haben. Dann können wir den gesamten Inhalt nur innerhalb einfügen. Es gibt ein paar Gründe, warum wir das getan haben. Zuallererst, was wir tun werden, ist, diesen stat-Abschnitt zu einem Flex-Container zu setzen. Das heißt, wir können all diese Statistik-Inhalte in die Mitte schieben. Zweitens, wenn wir später JavaScript verwenden, werden wir diese Inhalte auch verstecken, wenn das Spiel nicht läuft. Zurück zu unseren Stylesheets können wir den Stat-Abschnitt anvisieren und dann den gesamten Inhalt unter der Schaltfläche zentrieren. Zunächst einmal eine Hintergrundfarbe, und wir werden für einen Wert von weißem Rauch gehen. Der Rahmen, dies wird zwei Pixel, eine einfarbige Farbe und ein Wert von 859ede sein. Dieser Rand sollte auch oben links und oben rechts abgerundet sein. Wir können das mit dem Grenzradius tun. Zunächst einmal der obere linke Wert von drei rems, die obere rechte von drei rems zu. Dann wollen wir Null auf der Unterseite. Als nächstes können wir den Anzeigetyp von Flex einstellen. Dies wird es uns nun ermöglichen, unser neues div in der Mitte dieses Abschnitts zu zentrieren. Wenn Sie die Flexbox verwenden, wird die Standard-Flexrichtung Zeile sein, die sich über die Seite befindet, und wir können über diese Achse zentrieren, indem Sie den Inhalt ausrichten und den Wert auf zentriert setzen. Als nächstes kümmern wir uns um die Ausrichtung auf der Querachse oder dem vertikalen Abschnitt, können wir dies tun, indem wir ausrichten Elemente tun. Als Nächstes, die Polsterung. Drei Rems oben und unten und Null links und rechts. Dann können wir die Textzeile in der Mitte unseres Abschnitts zu sein. Wir sind fast fertig für dieses Handy für Styling. Das nächste, was ich tun werde, ist, zurück zu unserer Indexseite zu gehen. Wenn Sie sich erinnern, wenn wir all diesen Inhalt setzen, haben wir auch eine Klasse von space-y hinzugefügt. Wir haben dies zu jeder unserer Textzeilen innerhalb des stat-Bildschirms hinzugefügt. Wir haben dies getan, damit wir etwas Platz auf dieser Y-Achse hinzufügen können. Wir können dies tun, indem wir einen gewissen Rand oben und unten setzen. Leertaste y, wird der Rand zwei Werte hinzufügen. Die erste ist drei Rems oben und unten und Null auf der linken und rechten. Gut. Das sieht jetzt so aus, wie wir es wollen. Wenn wir nun zu unserer Indexseite zurückkehren, können wir mit diesem Bildabschnitt beginnen. Um dies zu tun, müssen wir unser Bild von früher auskommentieren, und wir können auch unseren statischen Bildschirm auskommentieren. Dies wird simulieren, wie unser Spiel aussehen wird, sobald das Spiel begonnen hat. Lassen Sie uns das Bildelement anvisieren, also IMG. Zunächst einmal die Breite von 100 Prozent, und auch, lassen Sie uns die Ecken mit dem Randradius runden. Unser Spiel sieht jetzt aus, wie wir es auf der mobilen Ansicht wollen, aber jetzt, wenn wir den Browser auf einen breiteren Bildschirm dehnen, wollen wir um unsere beiden Abschnitte wechseln, genau wie wir hier auf der endgültigen Version sehen. Um dies zu tun, werden wir eine Medienabfrage innerhalb unseres Stylesheets hinzufügen. Bei Medien, alle Bildschirme, und auch die minimale Breite von 600 Pixel. Alle diese Styling von oben werden standardmäßig verwendet und von Anfang an angewendet, und dann werden alle diese Stilregeln innerhalb dieser Medienabfrage nur angewendet, wenn der Bildschirm 600 Pixel und höher erreicht. Wir werden dies tun, indem Sie diese Flexbox verwenden und die Flexrichtung dieser beiden Abschnitte in Zeile ändern. Wir können dies innerhalb der übergeordneten Elemente tun, die der Spielbereich ist. Zunächst müssen wir den Anzeigetyp so einstellen, dass er flex ist, und die Standard-Flex-Richtung ist Zeile, so dass wir dies nicht hinzufügen müssen. Als nächstes der Bildbereich und auch die Statistiken. Für diese beiden Bereiche direkt darüber legen wir die minimale Höhe auf 30 Prozent der Höhe des Ansichtsfensters fest. Da wir mehr Platz auf dem Bildschirm zur Verfügung haben, werde ich das auf 50 Prozent ändern. Innerhalb dieses Bildbereichs, der sich auf der rechten Seite befindet, soll dies den Statistikteil überlappen, der sich auf der linken Seite befindet. Genau wie die endgültige Version hier sehen wir, dass sich der richtige Abschnitt nur ein wenig überlappt. Nun, die Art, wie wir dies tun können, ist die Verwendung einer CSS-Transformation namens translate. Translate wird unseren Abschnitt über die x- oder die y-Achse bewegen. Werfen wir einen Blick darauf, wie das in unserem CSS funktioniert, indem wir zuerst den Bildbereich anvisieren. Zunächst einmal der Grenzradius von drei Rems. Sie können abgerundete Ecken auf allen vier Seiten sehen, und dann können wir die CSS-Transformation setzen. Wir sehen, dass es viele verschiedene Arten von Transformationen gibt, die wir verwenden können. Es gibt Dinge wie Skalierung, um die Größe unserer Elemente nach oben oder nach unten zu skalieren. Wir können auch unsere Elemente drehen. Aber der, an dem wir interessiert sind, ist übersetzen. Im Inneren von hier können wir Alpha setzen, wir wollen unsere Elemente auf der X- und der Y-Achse bewegen. Die erste ist die X-Achse, die sich über die Seite von links nach rechts befindet, also 50 Pixel. Dann die Y-Achse, die von oben nach unten ist, 500 Pixel. Dies wird nun unsere Elemente um 50 Pixel und auch um 500 Pixel nach unten verschoben. Wir sind nur daran interessiert, unser Element nach links zu bewegen, deshalb interessieren wir uns nur für die x-Achse. Verwenden wir einfach einen dieser Werte, und stattdessen können wir einen negativen Wert verwenden. Das wären drei Rems. Dies zieht nun unseren Bildbereich um drei Rems nach links , so dass er den Stat-Bereich leicht überlappt. Lasst uns nun den Stat-Abschnitt anvisieren. Zuallererst machen wir einige Abstände, wir können die Flex-Eigenschaft und einen Wert von eins verwenden. Wenn wir dann den Wert innerhalb des Bildbereichs auf zwei setzen, wird unser Bildbereich dann versuchen, den doppelten verfügbaren Platz als unsere stat Sektion zu übernehmen. Für diesen Bereich müssen wir auch den Grenzradius anpassen, also haben wir diesen nur oben links und unten links. Der Randradius, drei Rems oben links, Null, Null und drei Rems unten links. Das letzte, was wir innerhalb dieser Medienabfrage tun werden, ist, diese Übersetzung zu berücksichtigen. Wir haben diesen Bildbereich um drei Rems nach links bewegt. Das heißt, wir haben jetzt einige ungleichmäßige Abstände auf der linken und auch auf der rechten Seite. Um dies zu kompensieren, fügen wir drei Rems der Marge auf der linken Seite hinzu. Dies sollte sich um unseren Abstand auf der Außenseite des Spiels kümmern, aber wir müssen uns auch um den Abstand innerhalb des Stat-Abschnitts kümmern. Wir können dies tun, indem wir drei Rems der Polsterung auf der rechten Seite hinzufügen. Dies ist es jetzt für das Styling für dieses Projekt. Als nächstes werden wir einige JavaScript einführen, indem wir einige zufällige Bilder generieren. 5. Zufallsgenerierte Bilder: Ein einzelnes Bild auf unserem Bildschirm, wie wir hier sehen, wird nicht gut für unser Projekt sein. Was wir stattdessen tun werden, ist ein zufälliges Bild aus einem Array auszuwählen, und die Art und Weise, wie wir dies tun werden, ist mit JavaScript, also können wir in unseren Projektordner gehen, eine neue Datei erstellen, und das wird die script.js sein, , die wir dann in unserem Index verlinken müssen. Direkt über dem schließenden body-Tag erstellen Sie das Skript mit der Quelle, und das ist einfach script.js. Lasst uns testen. Dies ist die Verknüpfung innerhalb des Skripts mit einer einfachen Warnung, und wir werden einfach sagen, jede Nachricht im Inneren hier so hoch. Wenn wir den Browser neu laden, sollten wir die Nachricht sehen, wenn diese erfolgreich verknüpft ist. Jetzt werden wir das bewegen. Nun ist das nächste, was wir tun müssen, ein Array zu erstellen, das den Bildnamen und auch die Anzahl der Elemente enthält. Dies muss auch mit allen Bildern in diesem Ordner übereinstimmen. Um ein wenig Zeit zu sparen, wenn wir zu GitHub gehen und den gleichen Link verwenden, den wir früher verwendet haben. Innerhalb des Zahlenübereinstimmungsspiels, werfen Sie einen Blick auf die Datei namens array.js. Dann innerhalb von hier müssen wir den Inhalt dieses Arrays kopieren. Ich werde all diese Elemente greifen und sicherstellen, dass Sie die eckigen Klammern oben und unten greifen, fügen Sie dies in unsere Skripte ein, und diese Namen entsprechen alle den gleichen Bildern, die sich innerhalb des Ordners befinden. Seien Sie sich also bewusst, wenn Sie Ihre eigenen Bilder verwendet haben, müssen Sie den Bildnamen so ändern, dass er jedem entspricht. Sie müssen auch die Anzahl der Elemente ändern. Zum Beispiel verwenden wir bananas.jpg als sechs Bananen, und dies ist in den folgenden Zeilen festgelegt. Da dies ein Array ist, können wir jedes dieser Objekte im Inneren hier durch die Indexnummer auswählen. Die Indexnummer ist die Position innerhalb des Arrays, daher ist das erste Element Position 0. Dies ist Position 1, Position 2, und so werden wir ein Bild auswählen, das in unserem Projekt angezeigt werden soll. Also unten ganz unten und kurz nach unserem Array, können wir jedes dieser Bilder zufällig auswählen. Wir müssen eine Zufallszahl generieren. Beginnen wir dies innerhalb einer Konstante nennen es Zufallszahl, und wir können eine JavaScript-mathematische Funktion verwenden, nennen Sie es zufällig. Also math.random. Dadurch wird eine Zufallszahl zwischen 0 und eins generiert. Null ist enthalten, aber Nummer 1 ist nicht. Dies wird zum Beispiel bis zu 0.999 gehen. Wir können dies in der Konsole protokollieren, um unsere Ausgabe zu überprüfen. Melden Sie sich unsere Konstante in unser Projekt, und wir können neu laden, mit der rechten Maustaste klicken und überprüfen. Jedes Mal, wenn wir neu laden, erhalten wir eine andere Zufallszahl. Innerhalb dieses Arrays haben wir 20 separate Bilder. Die Art und Weise, wie wir überprüfen können, wie viele Elemente innerhalb eines Arrays ist, indem Sie den Array-Namen auswählen , der Bilder ist, und dann sagen Sie Eigenschaft, die Länge ist. Wenn wir dies neu laden, sehen wir jetzt, dass wir die 20 Elemente innerhalb unseres Arrays haben, so können wir dies jetzt verwenden, um unsere Zufallszahl zu multiplizieren. Lassen Sie uns dies in der Konsole versuchen und aktualisieren. Dies wird uns nun 20 verschiedene Optionen geben. Also beginnt unsere Zahl entweder mit einem 0 rechts auf 19. Wir können dies auch ausführen, wenn wir diesen Abschnitt ausschneiden, können wir eine andere JavaScript-Funktion namens math.floor verwenden, und dies wird auf die nächste ganze Zahl runden. Lassen Sie uns das in der Konsole ausprobieren. Wir haben jetzt eine Zufallszahl zwischen 0 und 19, was uns 20 verschiedene Optionen gibt. Die Art und Weise, wie wir jetzt diese Zufallszahl verwenden können, wenn wir das Konsolenprotokoll entfernen, ist, indem wir unsere Bilder Array auswählen, und wir können jedes dieser Bilder durch die Indexnummer auswählen. Nummer 2, wie wir bereits erwähnt, sollte es 0,1 und 2 sein. Dies würde die Blöcke auswählen. Aber anstatt diesen Wert hart zu codieren, können wir die Zufallszahl eingeben. Danach können wir die Punktnotation verwenden, um entweder den Bildnamen oder die Anzahl der Elemente auszuwählen . Wir wollen den Bildnamen und wir können diese auch innerhalb einer Konstante speichern , die zufällige Bildname genannt wird. Lassen Sie uns versuchen, dies an der Konsole zu protokollieren. Schnappen Sie sich das und fügen Sie es ein, indem Sie zufällig einen unserer Bildnamen auswählen. Also, jetzt wissen wir, dass dies funktioniert, können wir dies jetzt verwenden, um unsere Bildquelle zu setzen. Lassen Sie uns zunächst ein Bildelement erstellen, speichern Sie dieses innerhalb der Bildkonstante, und wir können ein Element mit document.createElements erstellen. Der Elementtyp, den wir erstellen möchten, ist ein Bild, das IMG ist. Dann können wir unsere Bildvariable greifen und die Quellattribute festlegen, und diese Bildquelle muss auf unseren Bilderordner zeigen. So können wir dies als Vorlagenzeichenfolge mit den hinteren Ticks setzen. Dies ermöglicht es uns, unseren zufälligen Bildnamen als Variable einzufügen. Unsere Bilder Ordner, Schrägstrich. Genau wie früher haben wir das $ -Symbol und die geschweiften Klammern verwendet, um unsere Variable einzufügen. Dies lässt uns jetzt mit einem Bildelement erstellt, und das nächste, was wir tun müssen, wenn wir zur Indexseite gehen, ist es, dies innerhalb unseres Image-Containers hinzuzufügen. Also gerade oben lassen Sie uns eine Konstante namens Image-Container erstellen, und wir werden dies mit document.getElementById, der ID des Image-Containers, auswählen . Jetzt haben wir diese Referenz können wir unsere Image-Container und dann appendChild auswählen. Die untergeordneten Elemente, die wir anhängen möchten, ist dieses Bild von knapp oben. Wir sollten jetzt in der Lage sein, dies zu speichern und dies in unserem Projekt zu sehen. Jedes Mal, wenn wir jetzt laden, sehen wir ein Bild, das im Browser angezeigt wird, und dies wird zufällig aus unserem Array ausgewählt. Wir sehen immer noch dieses Bild gerade oben, weil dies in unserer index.html zu ersetzen ist. Wir können jetzt dieses Element entfernen und jetzt, wenn wir den Browser aktualisieren , sehen wir nur ein einzelnes zufälliges Bild. Dies ist ein wichtiger Schritt, aber wir möchten den Browser nicht aktualisieren, um jedes Mal ein neues Bild zu erhalten. Im nächsten Video werfen wir einen Blick darauf, wie wir das mit einem Timer machen können. 6. Arbeiten mit Stoppuhren: Unser Projekt befindet sich jetzt in einer Phase, in der es jedes Mal, wenn wir den Browser neu laden, ein anderes zufälliges Bild erzeugen wird . Natürlich ist dies nicht die Art, wie wir wollen, dass unsere App funktioniert. Wir wollen ein zufälliges Bild nach einer gewissen Zeitverzögerung aufrufen. Die Art und Weise, wie wir dies tun, ist, indem wir unseren Code packen, der das zufällige Bild erzeugt. Wir werden dies innerhalb einer Funktion platzieren und dann diese Funktion nach einer gewissen Zeitverzögerung aufrufen. Lassen Sie uns eine neue Funktion direkt darüber erstellen. Ich werde diese Funktion mit einer etwas anderen Syntax als das vorherige Projekt erstellen . Wir werden eine ES6-Pfeilfunktion erstellen. Eine Pfeilfunktion ist im Grunde eine andere Syntax als die regulären Funktionen, die wir zuvor verwendet haben. Es gibt auch einige technische Unterschiede zwischen den beiden Funktionssyntaxen. Obwohl wir diese in diesem Kurs nicht behandeln werden, wird diese Funktion die gesamte Syntax nur hier enthalten. So wie wir eine ES6-Pfeilfunktion schreiben, werden wir einen Funktionsnamen namens generieren innerhalb einer Konstante speichern, und dann werden wir dies gleich unserer Funktion setzen. Wir setzen die Pfeilfunktion genau so und dann die geschweiften Klammern. Innerhalb dieser Klammern gerade hier, wie wenn wir uns die unregelmäßigen Funktionen in den vorherigen Projekten anschauen, können wir auch hier Argumente übergeben. Zum Beispiel, wenn wir einen Wert hatten, könnten wir ihn einfach so übergeben und dann auf unseren Wert innerhalb der Funktion zugreifen. Aber alles, was wir tun wollen, ist, diese Codezeilen zu greifen und diese dann einzufügen. Wir haben jetzt diese Funktion, die wir jetzt aufrufen können, und wir wollen diese Funktion nach einer gewissen Zeitverzögerung aufrufen. Lassen Sie uns dies direkt unten tun, können wir eine zweite Funktion erstellen , die ich einen Timer nennen werde. Die Art und Weise, wie wir Code in einem JavaScript ausführen können, besteht darin, SetInterval zu nutzen. SetInterval ist eine Funktion, die in zwei Argumenten nimmt. Der erste ist der Code, den Sie ausführen möchten. Wir haben bereits den Code in dieser Generierungsfunktion zur Verfügung. Wir können generieren als erstes Argument übergeben. Dann ist die zweite eine Zeitverzögerung. Diese Zeitverzögerung ist in Millisekunden, eine Sekunde ist gleich 1.000, zwei Sekunden sind 2.000 und so weiter. Die Art und Weise, wie wir diese Funktion aufrufen können, ist, indem Sie die Play-Taste verwenden. Wenn wir zu unserer Indexseite zurückkehren, haben wir die Play-Taste innerhalb dieses auskommentierten Abschnitts. Lassen Sie uns das wieder einsetzen. Dann können wir das über unseren Play-Button aufrufen. Wir werden dies mit einem Klick tun, also lassen Sie uns das auf Klick gleich unserem Timer einstellen. Zum Browser laden wir das neu und klicken Sie auf die Schaltfläche „Play“. Nach unserer zwei-Sekunden-Verzögerung sehen wir, dass ein neues Bild zufällig generiert und am Ende unseres div platziert wurde. Nur um zusammenzufassen, wenn wir auf „Play“ klicken, rufen wir unsere Timer-Funktion auf. Diese Timer-Funktion wird alle zwei Sekunden laufen und dann unsere Generate-Funktion aufrufen, die ein neues zufälliges Bild erzeugt. Wie wir gerade gesehen haben, ist dies nicht ideal, weil wir das vorhandene Bild ersetzen wollen , anstatt es am Ende unseres Image-Containers hinzuzufügen. Eine der Möglichkeiten, wie wir dies beheben können, besteht darin, eine if-Anweisung hinzuzufügen und zu prüfen ob ein Bild bereits existiert, bevor wir weitergehen und ein neues hinzufügen. Kurz bevor wir dieses Bild hinzufügen, können wir eine if-Anweisung erstellen, dies wird zu überprüfen, ob unser Bild Container. Denken Sie daran, dieser Bildcontainer war der Wrapper gerade hier, der alle unsere Bilder darin enthalten wird. Wenn unser Bild Container und dann können wir sagen.HaschildNodes. Dies ist eine Methode, die überprüfen wird, ob unser Image-Container irgendwelche untergeordneten Elemente enthält. Derzeit ist es nicht, weil es leer ist, es gibt nichts zwischen unserem div. Aber wenn es ein Bild gibt, werden wir einen Code ausführen, der dies entfernt. Zunächst werden wir unseren Image-Container auswählen und dann können wir eine Methode namens removeChild aufrufen. Die Art und Weise, wie wir wählen können, welches untergeordnete Element wir entfernen möchten, ist Verwendung einer Methode namens FirstElementChild. Wir rufen dies auf unserem Container, also unsere ImageContainer, und wählen Sie dann das FirstElementChild. Wir haben hier gesehen, dass, wenn unser ImageContainer etwas verschachtelt hat, wir dies dann entfernen werden, und das Element, das wir entfernen möchten, ist das allererste Element darin. Das erste Element wird immer unser Bild sein , da es nichts anderes in unserem div gibt. Lassen Sie uns das speichern und versuchen Sie es, klicken Sie auf „Play“. Jetzt sehen wir nur ein Bild nach dem anderen. Die nächste Ausgabe, die wir behandeln müssen, wenn Sie bemerken, wenn wir auf „Play“ klicken, gibt es eine Zeitverzögerung, bevor unser erstes Bild erscheint. Diese Zeitverzögerung ist die zwei Sekunden, die wir gerade hier eingestellt haben. Dies wird als kleines Problem verursachen, weil wir das Spiel starten möchten , sobald der Benutzer auf „Play“ geklickt hat. Die Art und Weise, wie wir dies beheben können, ist, indem wir unsere Generate-Funktion aufrufen, sobald das Spiel startet , und dann können wir uns darauf verlassen, dass unser Timer mit den restlichen Bildern fortfährt. Lassen Sie uns eine neue Konstante direkt darunter erstellen, die damit umgehen wird. Dies wird eine Funktion namens Play sein. Wieder einmal richten wir unsere Pfeilfunktion ein. Wir werden dann diese Spielfunktion aufrufen, sobald das Spiel beginnt. Statt unseren Timer ändern wir das, um zu spielen. Sobald das Spiel beginnt, rufen wir unsere generierte Funktion auf. Dies wird einmal aufgerufen, wir rufen dann unsere Timer-Funktion. Probieren wir das aus. Sobald wir auf „Play“ im Browser klicken, sollten wir unser erstes Bild sehen, das wir tun. Dann beginnt nach unserer Zeitverzögerung der Rest der Bilder zu erzeugen. Die nächste Sache, um die wir kümmern müssen, ist, unser Spiel tatsächlich zu beenden. Wenn wir unseren Timer auf eine wirklich kleine Zahl reduzieren, sagen wir 300 Millisekunden, dann klicken Sie auf „Play“, dies wird dann durch alle unsere 20 Bilder, aber es wird weitergehen und nicht wissen, wann es aufhören soll. Wir sehen hier, dass wir über 20 Bilder gegangen sind, aber das Spiel läuft immer noch weiter. Eine der Möglichkeiten, wie wir dies beheben können, besteht darin, die Anzahl der Bilder zu reduzieren oder ein Bild zu entfernen, nachdem eines erstellt wurde. Derzeit generieren wir eine Zufallszahl. Das bedeutet, dass unsere Zufallszahl 20 verschiedene Bilder erzeugen kann, sobald diese Funktion ausgeführt wurde. Wenn wir dann ein Bild aus unserem Array entfernen würden, wird dies uns dann mit 19 Optionen belassen , 18, 17 und so weiter. Die Art und Weise, wie wir ein Bild entfernen können, ist, indem wir unsere Bilder Array auswählen. Wir können eine JavaScript-Spleißmethode verwenden, die einen Wert aus unserem Array entfernen wird. Der Spleiß wird zwei getrennte Werte annehmen. Das erste, das Sie übergeben wird, wird das Bild sein, das wir entfernen möchten. Wenn wir das erste Bild entfernen möchten, wäre dies Position 0, Position 1 usw. Wir wissen bereits, mit welchem Bild wir es derzeit zu tun haben, weil wir dieses innerhalb der Zufallszahl gespeichert haben. Lassen Sie uns das hier vorbeigehen. Dann ist der zweite Wert die Anzahl der Elemente, die Sie entfernen möchten. Wir werden nur einen Wert entfernen. Lasst uns das als eins belassen. Nur um zusammenzufassen, wählen wir zufällig eines unserer Bilder aus dem Array aus. Wir schieben dies dann an das DOM und zeigen dies innerhalb unseres Projekts an, und dann werden wir dieses Bild schließlich aus unserem Array entfernen, damit es mehr als einmal ausgewählt werden kann. Dies bedeutet jetzt, wenn wir zurück zum Browser gehen und unser Spiel starten, sollten wir jetzt nur 20 Bilder im Browser erscheinen sehen. Lasst uns das versuchen. Da gehen wir. Das Spiel hört jetzt auf, weil wir keine Bilder mehr durchlaufen müssen. Dies bedeutet jetzt, dass unser Bild-Array jetzt auf Null reduziert wird, und wir haben jetzt eine Möglichkeit, das Spiel zu beenden. Aber eine Sache, die wir tun müssen, ist auch, unsere Zeit um zwei zu stoppen. Im Moment hat diese eingestellte Intervallzeit keine Möglichkeit zu wissen, wann sie aufhören soll. Daher müssen wir ein festgelegtes Intervall anweisen, manuell zu stoppen , damit es nicht weiterhin die Ressourcen des Browsers verwendet. Wir hatten hier ein Intervall gesetzt. Wir können dies stoppen, indem wir ein klares Intervall aufrufen. Ich werde dies auch innerhalb einer Funktion namens STOptimer speichern. All diese Funktion wird tun, ist unsere klare Intervallfunktion aufzurufen. Dann geht es in einem Verweis auf unseren Timer innerhalb des klaren Intervalls. Wir können dies tun, indem wir es festgelegtes Intervall an eine Variable übergeben. Lassen Sie uns diese Variable TimerRef nennen. Dann können wir TimerRef auf unser eingestelltes Intervall setzen. Jetzt haben wir diese Referenz. Wir können dies jetzt passieren, um das Intervall zu löschen, so dass es weiß, welche Zeit wir löschen müssen. Der Grund, warum wir diese Variable außerhalb einer Funktion und nicht innerhalb deklariert haben, ist, dass wir dann in jeder der Funktionen darauf zugreifen können. Wenn wir unsere Variable innerhalb dieser Funktion deklarieren, könnten wir nur innerhalb dieses Timers darauf zugreifen was dann einen Fehler verursacht, wenn wir versuchen, sie in unserem klaren Intervall zu referenzieren. Lassen Sie uns das wieder nach draußen bringen. Jetzt müssen wir unsere STOptimer-Funktion am Ende unseres Spiels aufrufen. Unser Spiel ist beendet, sobald wir keine Bilder mehr im Array haben, weil wir sie bei jeder Generation entfernen. Innerhalb unserer Generierungsfunktion können wir überprüfen, ob unsere Bilder Punktlänge gleich Null ist. Wir können dann unsere STOptimer-Funktion aufrufen und auch das Rückgabe-Schlüsselwort verwenden, was bedeutet, dass dies dann zu unserer Funktion ausbricht und der folgende Code wird nicht mehr ausgeführt. Lassen Sie uns dies speichern und testen Sie dies im Browser, wir können auf „Play“ klicken, und sollten jetzt durch 20 unserer Bilder Zyklus, und dann den Timer stoppen. Gut. Mit diesem jetzt an Ort und Stelle, gehen wir zum nächsten Video, wo wir kümmern eine Nummer zu generieren, die dem Benutzer angezeigt werden soll. 7. Eine Vergleichszahl generieren: Lassen Sie uns jetzt unsere Zufallszahl erstellen, die dem Spieler angezeigt wird, so dass sie die Anzahl der Elemente im Bild vergleichen können. Diese Nummer wird eines von drei Dingen sein. Es wird sein, wenn die richtige Menge an Gegenständen, die im Bild angezeigt wird , eins höher oder eins niedriger sind, was so ist das Spiel ist ein wenig schwieriger, und wir werden dies über in unserer Generierungsfunktion tun. Im Moment beginnt unsere Generierungsfunktion ziemlich überfüllt zu werden. Wir können den gesamten Code auslagern, der für die Einstellung unseres Bildes verantwortlich ist. Dies greift unseren Image-Container bis hin zu AppendChild. Lassen Sie uns das klarstellen und in unserem Spleiß bleiben. Ich werde dies durch eine Funktion ersetzen. Die Funktion, die ich diesem einen Namen von SetimageSRC geben werde, und dann erstellen Sie dies etwas über der Spitze. Im Inneren können wir den Inhalt eines Zitats aus unserer generierten Funktion einfügen, aber damit diese Funktion funktioniert, müssen wir auch den zufälligen Bildnamen erhalten. Zurück zu unserer Generierfunktion haben wir hier unseren zufälligen Bildnamen. Wir können dies als diese in unsere Funktion kopieren und dann, wenn wir dies als Argument erhalten, ist dies jetzt innerhalb dieser Funktion verfügbar zu verwenden. Bevor wir weiter gehen, speichern wir unseren Code und versuchen dies im Browser, und alles funktioniert immer noch wie erwartet. Wir können nun zur Generierung dieser Zufallszahl übergehen. Lassen Sie uns zu unserer Generierungsfunktion gehen. Direkt unter dem Punkt, wo wir die Bildquelle setzen, können wir auch eine neue Funktion erstellen, die für die Erstellung dieser Nummer verantwortlich sein wird . Lassen Sie uns dies generieren plus oder minus nennen. All diese Funktion wird tun, ist entweder einen Wert von positivem oder negativem zurückzugeben . Wir können diese Zahl dann verwenden, um sie zu einer reellen Zahl hinzuzufügen, um sie schwieriger zu machen. Lassen Sie uns dies direkt über innerhalb einer Funktion erstellen, also generieren Sie plus oder minus. Das braucht nur ein Gleiches, kurz danach hier. Damit diese Funktion entweder einen positiven oder einen negativen Wert zurückgibt, müssen wir zwei zufällige Optionen generieren. Die Art und Weise, wie wir dies tun können, wie wir früher ausgesehen haben, ist math.random zu verwenden. Um uns zwei separate Optionen oder zwei Werte zu geben, können wir dies mit zwei multiplizieren und dann in math.floor wickeln. Denken Sie daran, dass math.floor unsere Zufallszahl herunterlaufen wird. Dies gibt einen Wert von null oder eins zurück. Wir haben das in einer Konstante gesehen, die ich Nummer Null zu eins nennen werde. Wir möchten nun einen Wert von dieser Funktion zurückgeben. Wie wir gerade erwähnt haben, wird die Zahl Null zu eins entweder eine Null oder eine Eins sein. Die Art und Weise, wie wir dies in einen positiven oder negativen konvertieren können , besteht darin, den ternären JavaScript-Operator zu verwenden. Wir können unsere Konstante von Zahlen Null zu eins auswählen, und wir können sagen, wenn dies gleich Null ist, wollen wir jetzt eine Option zur Verfügung stellen. Der ternäre JavaScript-Operator ermöglicht es uns, zwei Optionen bereitzustellen, ob der Wert wahr oder falsch ist. Es funktioniert wie eine if else - Anweisung. Wenn dieser Ausdruck hier wahr ist, also wenn dies gleich Null nach dem Fragezeichen ist, werden wir einen Wert von negativem zurückgeben. Wir fügen dann einen Doppelpunkt hinzu und bieten Option, wenn dies falsch sein wird. Wenn dies falsch ist, fügen wir plus eins und geben dies von unserer Funktion zurück. Da dies zufällig generiert wird, haben wir eine 50/50-Chance, aber diese Funktion gibt entweder eine negative oder positive zurück. Wir können nun nach unten scrollen und diesen Rückgabewert innerhalb einer Konstante speichern. Sagen wir Plus oder Minus und setzen Sie dies auf den Rückgabewert. Jetzt haben wir entweder diese positive oder negative Zahl. Wir müssen jetzt auch den tatsächlichen Wert der Elemente erfassen, die jedes Bild enthält. Die Art und Weise, wie wir dies tun können, wenn wir nach oben scrollen, ist die Eigenschaft namens Anzahl der Elemente auszuwählen. Wir machen etwas sehr Ähnliches in dieser Funktion, wo wir den zufälligen Bildnamen greifen. Werfen wir einen Blick auf das. Gerade hier greifen wir unseren Bildnamen von einem zufälligen Bild. Lassen Sie uns diese Zeile hier kopieren, fügen Sie sie ein und anstatt unseren zufälligen Bildnamen zu greifen, können wir nun die Anzahl der Elemente erfassen, und auch diesen konstanten Namen ändern, um dies zu widerspiegeln, also Anzahl der Elemente. Dies hinterlässt uns jetzt alle Informationen, die wir brauchen, um unsere Displaynummer zu generieren, genau wie wir hier sehen. Wir haben einen Wert von negativem oder positivem, und wir haben auch die richtige Nummer zwei. Wir werden nun diese beiden Werte verwenden, um an unsere Funktion zu übergeben , die diese Anzeigenummer generieren wird, unsere Funktion anzeigen, wo wirunsere zwei Konstanten oder unsere zwei Werte von oben übergeben unsere zwei Konstanten oder unsere zwei Werte von werden, die ist plus oder minus und die Anzahl der Elemente. Scrollen Sie nach oben und erstellen Sie unsere Funktion namens Anzeigennummer generieren. Dieses Mal erhalten wir in zwei Werten und der erste ist die Anzahl der Elemente und der zweite ist plus oder minus. Innerhalb unserer Funktion wollen wir eines von zwei Dingen tun. Wir wollen entweder die reelle Zahl anzeigen, oder alternativ möchten wir eine Zahl anzeigen, die entweder eine höhere oder eine niedrigere ist. Um zu wählen, welche dieser Optionen diese Funktion ergreifen wird, müssen wir eine Zufallszahl generieren. Genau wie unten hier werden wir zwei Zufallszahlen erzeugen, also zwischen Null oder eins. In einer Konstante werde ich diese Spaltung nennen. Diese Zufallszahl ermöglicht es uns nun, eine if-Anweisung zu erstellen , um zu überprüfen, ob dies Null oder eins ist. Wir werden sagen, wenn die Teilung gleich Null ist, wird dies unsere reelle Zahl anzeigen. Die Art und Weise, wie wir dies innerhalb unserer Indexseite tun können, besteht darin, unsere Elemente zu finden , je nachdem, welcher Wert darin gespeichert ist. Wir sehen diesen Wert nur hier, so dass wir dies entfernen können, und dann können wir unser Element mit der ID der Zahl anvisieren. Wir tun dies mit document.getelementbyid. Ich werde auswählen, es gab Nummer und dann das InnerHTML setzen und dies auf unsere Anzahl von Elementen setzen, die an unsere Funktion direkt oben übergeben wird. Dies ist unsere korrekte Nummer, so dass wir jetzt eine falsche Zahl erstellen können. Wir können etwas anderes sagen. Dies wird sein, wenn die Teilung gleich eins ist. Genau wie oben, werden wir auch die document.getelementbyid setzen, wählen Sie unsere Nummer und dies ist gleich unserer reellen Zahl, die Anzahl der Elemente ist. Dann möchten wir entweder ein positives oder ein negatives hinzufügen, das in einem Wert namens plus oder minus gespeichert ist. Lassen Sie uns dies im Browser versuchen. Wenn ich klarer sein muss, wenn wir dieses Spiel nur verlangsamen, also drei Sekunden und neu laden, sehen wir den Wert von eins. Wir scheinen irgendwo ein Problem zu haben, also gehen wir zurück zu unserer Funktion. Wir haben eine Zufallszahl zwischen Null und Eins. Wenn es Null ist, setzen wir den Zahlenwert auf unsere Anzahl von Artikeln. Wenn nicht, setzen wir dies auf unsere Anzahl von Artikeln, entweder positiv oder negativ. Das scheint in Ordnung zu sein, also lasst uns runter gehen, um die Anzeigennummer zu generieren. Ich denke, wir müssen das nur in einer richtigen Reihenfolge weitergeben. Versuchen wir es jetzt. Klicken Sie auf „Play“. Hier sind sechs Leute drin und wir bekommen den Wert von sieben, das ist eins höher. Dies ist die richtige Zahl von acht. Das ist eins höher. Wir müssen nur auf eine niedrigere, sieben warten , die hier ist. Jetzt sehen wir die richtige Anzahl von Elementen. Wir sehen einen Wert höher und auch einen Wert niedriger. Das funktioniert jetzt, wir gehen jetzt zum nächsten Video und wir werden den Bildnamen ersetzen. 8. Den Bildnamen einsetzen: Wenn der Benutzer auf dem Spiel spielt, haben wir jetzt einen Pfad dieses Anzeigeabschnitts behandelt. Wir haben das Bild jetzt mit der Anzahl der Elemente verknüpft. Das nächste, was ich tun möchte, ist, auch den Namen des Bildes anzuzeigen, also sagen Sie zum Beispiel acht Eier, und was sich für jedes Bild ändert. Wenn wir in der script.js zu unserem Code zurückkehren, innerhalb unserer generierten Funktion, haben wir bereits Zugriff auf unseren zufälligen Bildnamen, und wir speichern auf diesem innerhalb dieser Konstante. Hier steht, beschneiden Sie in unserem Bilderfeld, wie in unserer Zufallszahl, und wählen Sie dann die neue Eigenschaft des Bildnamens aus, wie wir gerade hier sehen können. Was ich jetzt tun werde, könnten wir, wenn es zufällige Bildnamen verwendet, um die Funktionalität zu dieser Generierungsfunktion hinzuzufügen, aber stattdessen, um die Dinge separater zu halten, werde ich eine neue Funktion erstellen. Fügen wir dies in unsere Generate-Funktion hinzu und lassen Sie uns diesen einen Satz Image-Namen nennen. Diese Funktion wird in unserem zufälligen Bildnamen nehmen, also lasst uns das greifen und diese einfügen und wir können dies außerhalb unserer generierten Funktion verwenden. Sagen wir Säulen. Der Funktionsname von Sätzen, Bildname und dies nimmt in unserer Variablen von zufälligen Bildnamen. Dies ist eine Pfeilfunktion. Bevor wir unseren Code in diese Funktion schreiben, lassen Sie uns ein Konsolenprotokoll machen und überprüfen, dass wir den zufälligen Bildnamen erhalten. Öffnen Sie die Konsole, und wir „Klicken Sie auf Spiel“, um die Eier dot jpg zu sehen, weil dot jpg. Was wir jetzt tun wollen, ist, diesen Namen zu nehmen und diesen innerhalb unserer Benutzeroberfläche anzuzeigen. Bevor wir dies tun, müssen wir jedoch die Punkt-jpg-Erweiterung des Endes dieses Bildes trimmen . Die Art und Weise, wie wir dies tun können, ist mit einer JavaScript-Methode, die Slice genannt wird. Slice wird eine Textzeichenfolge nehmen und wir haben bereits einen zufälligen Bildnamen für unsere Zeichenfolge, und dann werden wir diese Slice-Methode aufrufen, und dies wird eine neue Zeichenfolge mit einem bestimmten Teil zurückgeben entfernt. Also lassen Sie uns unser Konsolenprotokoll entfernen. Wir können auf unseren zufälligen Bildnamen zugreifen, der als Slice-Methode bezeichnet wird. Slice wird in zwei Werte zu nehmen, die der Anfang auf die Auferlegung der Zeichen, die Sie entfernen möchten. Wenn wir Eier dot jpg hatten, wollen wir das Wort entfernen, das Eier ist, also werden wir beim allerersten Zeichen beginnen, das die Position von Null ist, und dann der zweite Wert, der optional ist. Wenn wir dies auslassen würden, würde dies bis zum Ende unserer Saite gehen, aber stattdessen wollen wir vier Orte zurückgehen. Die Art und Weise, wie wir dies tun können, ist, indem wir die volle Länge unserer Saite erhalten und dann vier Orte zurückgehen. Zuallererst können wir die volle Länge der Zeichenfolge erhalten, indem wir den zufälligen Bildnamen, Punktlänge verwenden. Derzeit geht dies vom Anfang des Buchstabens E bis zum Ende unserer Zeichenfolge, die der Buchstabe G ist. Wir wollen vier Stellen zurückgehen, also lassen Sie uns negative vier verwenden. Wir können überprüfen, dass dies Arbeit in einer Umgehungsliste innerhalb einer Konstante ist. Lassen Sie uns dies den Bildnamen nennen, so dass dies gleich dem neuen Wert, der von unserer Spleißmethode zurückgegeben wird, und dann können wir ein Konsolenprotokoll mit unserem neuen Image-Namen zu tun. Zurück zur Konsole und inspizieren. Klicken Sie auf „Play“. Wir sehen jetzt dot jpg wurde von jedem unserer Namen entfernt. Das ist gut, und das ist alles, was jetzt funktioniert. Das nächste, was wir tun müssen, ist, die Benutzeroberfläche innerhalb unseres Index zu erhalten. Gehen wir zu unserem Platzhalter und entfernen Sie dies. Dann können wir die Spanne mit der ID des Elementnamens Ziel, also document.getElementById. Die ID, die Elementname war, und dann können wir auf die innere HTML sagen, die gleich unserer Variable des Bild-Namens ist. Kurz danach werde ich auch am Ende einer Zeichenfolge hinzufügen, die ein Fragezeichen ist. Lassen Sie den Benutzer einfach wissen, dass dies eine Frage ist, also werden sieben Enten und dann ein Fragezeichen angezeigt, damit der Benutzer weiß, dass dies eine Antwort einer Frage ist. Lassen Sie uns das im Browser ausprobieren. Klicken Sie auf Spiel, sehen Sie zwei Autos, das ist gut, Bananen, Enten. Das funktioniert jetzt alles gut. Mit diesem jetzt erledigt, gehen wir nun zum nächsten Video über, wo wir die Vermutung des Benutzers behandeln werden. 9. Treffer überprüfen: Der nächste Schritt innerhalb unseres Spiels besteht darin, die Funktionalität zu handhaben , wenn der Benutzer auf das Häkchen oder das Kreuz klickt. Wir werden zwei Funktionen zur Verfügung stellen, die überprüfen, ob die Vermutung des Benutzers korrekt oder falsch ist und die Punktzahl aktualisieren wird. Um dies innerhalb unserer index.html zu tun, müssen wir einen Klick-Handler zu unseren Schaltflächen hinzufügen. Dies sind unsere zwei Knöpfe innerhalb des Spielbereichs. Für die richtige Schaltfläche richten wir eine Funktion ein, die mit einem onclick Ereignishandler namens match ausgelöst wird. Dann direkt darunter werden wir auch dasselbe tun, aber dieses Mal wird die Funktion NoMatch genannt, und wir werden behandeln, was zu tun ist, wenn der Benutzer denkt, dass seine Wahl falsch ist. Ich gehe zu unserem Transkript, speichere diese Datei, und bevor wir mit dem Hinzufügen dieser beiden Funktionen arbeiten, werde ich einige Variablen ganz oben erstellen. Wir müssen sowohl die richtige Anzahl der Elemente im Bild als auch die Anzahl speichern , die angezeigt wird. Dies ist also, dass wir beide Werte vergleichen , um zu sehen, ob die Wahl des Benutzers korrekt war. Die erste Variable wird CurrentImageValue genannt. Wir können dies auf einen Anfangswert von Null setzen und diese dann aktualisieren, sobald ein neues Bild generiert wurde. Getrennt durch Komma können wir eine zweite Variable namens DisplayNumber erstellen und dies erneut als Wert von Null initialisieren. Genau wie eine kurze Randnotiz hier verwenden wir nicht das let-Schlüsselwort in beiden Vorkommen hier, weil wir diese durch ein Komma getrennt haben, also ist dies in Ordnung, dies zu tun. Fügen Sie ein neues Komma direkt nach unserer Anzeigenummer hinzu, und wir setzen eine Variable, um die aktuelle Punktzahl zu setzen, die als Null initialisiert werden soll. Jetzt haben wir diese Werte, die wir tatsächlich brauchen, um diese mit den richtigen Zahlen zu aktualisieren. Beginnen wir mit unserem aktuellen Bildwert. Die Art und Weise, wie wir dies ergreifen können, wenn wir zu unserer Funktion gehen, die Anzeigenummer generiert wird, innerhalb von hier haben wir die Variable NumberOfItems genannt. Daher können wir diese Nummer erfassen und unseren aktuellen Bildwert einstellen. Lassen Sie uns dies am Ende unserer Funktion tun. Wir können unseren aktuellen Bildwert so einstellen, dass er unserer Anzahl an Artikeln entspricht. Jetzt haben wir unseren aktuellen Bildwert gesetzt, der die richtige Anzahl von Elementen im Bild ist, aber jetzt müssen wir auch unsere Anzeigenummer aktualisieren, die die gleiche Nummer ist, die der Benutzer im Spiel sieht. Denken Sie daran, dies ist entweder die richtige Zahl, die wir innerhalb des if -Abschnitts festgelegt haben, oder ein falscher Wert, der entweder eins höher oder niedriger ist, und wir werden dies im Abschnitt else festlegen. Zunächst einmal, innerhalb, wenn Abschnitt, der die richtige Nummer war. Damit ist unsere Anzeigenummer gleich der Anzahl der Artikel. Genau wie oben, wo wir dies auf die Benutzeroberfläche setzen. Unmittelbar unterhalb dieser innerhalb des else Abschnitts zeigen wir die Anzahl der Elemente an, die entweder eins höher oder eins niedriger ist. Innerhalb dieses Abschnitts können wir auch unsere Anzeigenummer so einstellen , dass es sich um die Anzahl der Elemente handelt, und dann entweder um eine höhere oder eine niedrigere. Kurz bevor wir unsere Funktionen erstellen, die mit unseren Buttons verknüpft sind, lassen Sie uns überprüfen, ob unsere Variablen aktuell funktionieren. Innerhalb der Generierungsfunktion können wir zwei Konsolenprotokolle ausführen. Der erste ist der aktuelle Bildwert, der die richtige Anzahl von Elementen ist, dann der zweite ist die Anzeigenummer, die die Nummer ist, mit der der Benutzer vergleichen wird. in der Konsole mit der rechten Maustaste auf „Inspect“, und klicken Sie dann auf „Play“. Um zu beginnen, sehen wir den Wert von Null, Null, da wir noch kein Bild erzeugt haben, haben daher eine korrekte Übereinstimmung, eine korrekte Übereinstimmung, neun und 10 ist falsch, falsch, falsch, und so weiter. Jetzt haben wir diese beiden Werte, mit denen wir vergleichen können. Wir werden unsere beiden Funktionen erstellen, um zu überprüfen, ob der Benutzer richtig oder falsch ist. Lassen Sie uns das entfernen, und wir können unsere beiden Funktionen erstellen. Die erste Taste löst eine Funktion namens match aus. Die Match-Funktion wird dafür verantwortlich sein, zu prüfen, ob der aktuelle Bildwert gleich unserer Anzeigenummer ist. Wenn dies der Fall ist, ist der Benutzer korrekt und wir werden unsere Punktzahl aktualisieren. Wir können die Punktzahl mit einem ternären JavaScript-Operator aktualisieren, damit wir überprüfen können ob der aktuelle Bildwert gleich der Anzeigenummer ist. Nach dem Fragezeichen bedeutet dies, dass der Abschnitt wahr ist. Wir möchten die Punktzahl mit Score plus plus aktualisieren. Wenn nicht, fügen wir einen Doppelpunkt und die zweite Bedingung hinzu. Wir wollen die Punktzahl um den Wert eins abziehen. Wenn der Benutzer dies richtig gemacht hat, erhöht sich die Punktzahl. Wenn nicht, wird die Punktzahl um eins, zwei sinken. Dann können wir auch das DOM mit document.getElementById aktualisieren, und dies ist der Abschnitt gerade hier, den wir aktualisieren möchten. Über zu unserer index.html können wir diese Spanne mit der ID der aktuellen Punktzahl aktualisieren, also lasst uns das greifen. Wir können auch den Standardwert an diesem Ende entfernen, und dann können wir die innerHTML auf unsere Partiturvariable gleich setzen. Als nächstes haben wir die zweite Schaltfläche, die den Funktionsnamen NoMatch hat. Dies wird ziemlich ähnlich sein, also lassen Sie uns das kopieren, fügen Sie es direkt unten ein. Dies wird NoMatch heißen, und wir wollen so ziemlich das Gegenteil dessen tun, was wir hier getan haben. Wir wollen überprüfen, ob der Benutzer glaubt, dass der aktuelle Bildwert nicht gleich der Zahl ist, die angezeigt wird. Wir können das tun, anstatt die dreifachen Gleichen. Wir werden das Ausrufezeichen verwenden, und dies wird überprüfen, ob der aktuelle Bildwert nicht gleich unserer Anzeigenummer ist. Wenn dies korrekt ist, bedeutet dies, dass der Benutzer dieses Recht hat und die Punktzahl aktualisiert. Wenn sie falsch sind, wird ein Punkt abgezogen und dann das DOM aktualisiert. Versuchen wir es mal. Wir können auf „Play“ klicken. In der Tat werden wir einfach unseren Timer aktualisieren, um uns etwas mehr Zeit zu geben, damit sie fünf Sekunden spielen können. Es gibt sechs Dokumente, also lasst uns auf das Häkchen klicken. Das ist richtig, und wir bekommen eine Punktzahl. Zwölf Bleistifte, das ist in Ordnung. Es gibt sieben Kuchen, aber wenn Sie auf das x klicken, sollten wir sehen, dass eine Punktzahl abgezogen wurde. Gut. Jetzt ist das unsere Arbeit und wir können die Partitur aktualisieren. Im nächsten Video werden wir zur Punktzahl zurückkehren und sie dem Benutzer am Ende des Spiels anzeigen. 10. So baust du das Spielende: Hey, willkommen zurück. Wir werden jetzt genau das behandeln, was der Benutzer sieht, wenn das Spiel vorbei ist. Derzeit, wenn wir durch alle unsere Bilder radeln und wir zum allerletzten kommen, stoppen wir derzeit unseren Timer und auch, wir generieren keine Bilder mehr. Während des Spiels gestartet und Spiel beendet Zustand, müssen wir auch verschiedene Elemente auf dem Bildschirm zeigen und verstecken, und auch am Ende, müssen wir eine Nachricht an den Benutzer mit ihrer Gesamtpunktzahl anzeigen. Zunächst einmal werden wir innerhalb dieser Spielfunktion arbeiten und wir werden damit beginnen, einige Elemente zu verstecken, die wir nicht sehen wollen, wenn das Spiel läuft. Zum Beispiel, wenn wir auf „Play“ klicken, wollen wir nicht alle dieser Willkommensbereich sehen. Wir müssen die Schaltfläche „Abspielen“ nicht sehen. Wir müssen nur den Statistikbereich und auch das Bild sehen. Dies liegt daran, dass wir innerhalb unserer index.html diesen Bildbereich haben, und sobald das Spiel im Spiel ist, wollen wir nur diesen Bildcontainer anzeigen. Wir werden unseren Nachrichtenbereich verstecken. Wir werden unseren Startbildschirm verstecken. Wir werden auch den Play-Button ausblenden, da das Spiel bereits im Spiel ist. Wir werden all das in unserer Spielfunktion rausnehmen. Diese Funktion wird aufgerufen, sobald unser Spiel beginnt, also ist dies ein guter Ort, um alle unsere Inhalte zu verstecken. Zunächst werden wir den Nachrichtenbereich mit GetElementById auswählen. Ich werde JavaScript verwenden, um den Stil festzulegen und die Anzeigeeigenschaft so einzustellen, dass sie gleich keiner ist. Dies ist genau das gleiche wie das Hinzufügen des Anzeigetyps in unseren Stylesheets, aber dies wird dynamisch mit JavaScript hinzugefügt. Wir werden das auch kopieren und es in zwei weiteren Malen einfügen. Wir können diese zweite innerhalb unserer Index-Seite verwenden , um unseren Startbildschirm Abschnitt zu greifen, der den gesamten Text enthält. Nummer 2 ist der Startbildschirm. Schließlich müssen wir auch die Schaltfläche „Play“ entfernen, sobald das Spiel gestartet wurde. Dies ist die ID der Wiedergabe-Schaltfläche. Es sieht so aus, als ob das alles funktioniert. Sobald wir auf „Play“ klicken, sehen wir nicht mehr den gesamten Text oben. Wir sehen den Startbildschirm nicht mehr. Die Wiedergabe-Schaltfläche wird nicht mehr angezeigt. Wir haben auch den Nachrichtenbereich für später ausgeblendet. Dies ist die Handhabung der Bedingung, wenn das Spiel gestartet wird, und wir müssen auch behandeln, was passiert, wenn es das Ende des Spiels ist. Damit werden wir auch eine benutzerdefinierte Funktion erstellen , die wir direkt am Ende aufrufen werden. So konstant, und diese Funktion wird EndofGame genannt werden, und dieser Abschnitt möchte auch einige Bereiche ein- und ausblenden. Sobald wir das Ende des Spiels erreicht haben, möchten wir sicherstellen, dass unsere Nachricht angezeigt wurde , da wir dem Benutzer eine Nachricht mit seiner Punktzahl hinzufügen werden. Lassen Sie uns dies kopieren und in den Nachrichtenbereich einfügen. Um dies auf dem Bildschirm sichtbar zu machen, ändern wir den Anzeigetyp zu blockieren. Der zweite, den wir ändern werden, wird unser Image-Container sein. Dies liegt daran, wenn das Spiel vorbei ist, möchten wir das letzte Bild von unserem Bildschirm entfernen und wir können dies tun, indem wir diesen Anzeigetyp so beibehalten, dass er gleich keiner ist. Sobald wir dieses Bild entfernen, möchten wir dann unsere Nachricht mit der Benutzerbewertung füllen. Wenn wir bis ganz oben gehen, wo wir unsere Variablen erstellt haben, haben wir die Benutzerbewertung innerhalb dieser Variablen. Wir müssen auch eine zweite Variable erstellen, die die Summe der verfügbaren Punkte ist. Dies wird gleich der Anzahl der Bilder innerhalb unseres Arrays sein. Wir können eine Variable direkt unten erstellen, trennen sie durch ein Komma. Ich möchte das als TotalAvailable bezeichnen. Stellen Sie dies gleich der Länge unserer Bilder mit images.length. Wir können nun diese beiden Variablen verwenden, um eine Nachricht an den Benutzer am Ende unseres Spiels anzuzeigen . Zurück zu unserer EndofGame-Funktion, lassen Sie uns unseren Nachrichtenbereich mit document.getElementById, der ID der Nachricht, greifen . Dann können wir die Nachricht mit einem innerHTML setzen und wir werden dies gleich einer Template-Zeichenfolge setzen. Wir sind auf der Rückseite [unhörbar], so dass wir unsere beiden Variablen einbeziehen können. Die Nachricht, die ich anzeigen werde, lautet „Spiel vorbei, deine Punktzahl war.“ Wir können dann das $ Symbol und die geschweiften Klammern verwenden, um unsere Punktevariable/ auszugeben, und dann nutzen wir unsere insgesamt verfügbare Variable, die wir gerade oben erstellt haben. Dies wird unsere Nachricht an den Benutzer anzeigen. Reduzieren wir unseren Timer. Lassen Sie uns für 300 Millisekunden gehen und überprüfen, dass alles funktioniert. Klicken Sie auf „Play“. Die Partitur spielt keine Rolle. Wir kommen bis zum Ende des Spiels und nichts passiert. Dies liegt daran, dass wir unsere End-of-Verstärkungsfunktion geschaffen haben, aber wir haben sie noch nicht genannt. Der Ort, an dem wir diese Funktion aufrufen möchten, ist ein Blick in unsere Generate-Funktion. Dies ist die gleiche Position innerhalb der if-Anweisung, wo wir überprüfen, ob unsere images.length gleich 0 ist, und dann stoppen wir in unserem Timer. Drinnen ist auch der gleiche Ort, den wir unsere EndofGame-Funktion nennen. Fügen wir das hinzu und fahren Sie dann durch unsere Bilder zurück. Unsere EndofGame-Funktion wurde nun aufgerufen. Wir haben den Bild-Container entfernt und dann die Nachricht an den Benutzer mit der Gesamtpunktzahl festgelegt . Das ist also gut. Das funktioniert alles, aber was wollen wir jetzt tun? Nun, wir haben ein paar Möglichkeiten. Wir können unseren Play-Button wieder in den Bildschirm einfügen, der uns zum Spielbeginn zurückführt. Oder wir können einfach etwas tun, wie diese Nachricht auf drei Sekunden einstellen und dann den Browser neu laden. Bringen Sie den Benutzer zurück zum Startbildschirm. Die Art und Weise, wie wir dies tun können, besteht darin, ein Timeout zu verwenden. Hier haben wir das SetInterval verwendet, das eine Funktion nach einer gewissen Zeitverzögerung aufrufen wird. SetInterval wird dies auch weiterhin wiederholen, bis wir es anders sagen. Im Inneren wollen wir jedoch nur einmal einen funktionalen Code ausführen. Um dies zu tun, können wir setTimeout verwenden. Hier drinnen werden wir auch eine Pfeilfunktion übergeben. Hier drinnen wollen wir nur den Browser aktualisieren und die Art und Weise, wie wir dies innerhalb unseres Codes tun können, ist die Verwendung von location.reload. Dies ist genau das gleiche wie das Drücken der Reload-Taste in unserem Browser, aber stattdessen tun wir dies nach einer Zeitverzögerung, die ich als drei Sekunden einstellen werde. Probieren wir das aus. Klicken Sie auf „Play“. Da ist unsere Punktzahl, und nach drei Sekunden sollten wir einen Neuladen sehen. Während wir es auch mit dem Ende der Spielbedingung zu tun haben, können wir auch diesen Statistikbereich auf der linken Seite ausblenden. Wir werden das am Ende des Spiels verstecken und dann wieder einsetzen, sobald das Spiel begonnen hat. Die Art und Weise, wie wir dies tun können, ist genau so, wie wir es oben mit getElementById getan haben, und der ID, die wir greifen möchten. Wenn wir ein wenig zu unserem Startabschnitt scrollen, denken Sie daran, wenn wir diese CSS früh verwenden, haben wir all diese Textinhalte innerhalb eines div mit der ID der Statistik-Inhalte umgeben. Wir können dies nun verwenden, um diesen Bereich im Skript ein- und auszublenden. Lassen Sie uns zuerst diese Zeile kopieren und einfügen. Wir müssen unseren StatsContent auswählen. Dann am Ende des Spiels werden wir dies mit der Anzeige von keiner entfernen. Wir können das packen und dann sehen wir, dass das Spiel gestartet wird. Wir möchten dies wiederherstellen, indem wir dies auf einen Anzeigetyp von Block setzen. Lassen Sie uns durch unsere Bilder blättern und überprüfen, dass dies alles im Browser funktioniert. Wenn das Spiel gestartet wird, sehen wir, dass unser Abschnitt erscheint. Dann verschwindet dies am Ende des Spiels. In der Tat müssen wir dies wahrscheinlich nicht einmal wieder einschalten, wenn das Spiel beginnt, denn denken Sie daran, dass wir den Browser aktualisieren, uns sofort wieder in das DOM bringt. Lasst uns durchfahren. Unsere Statistiken sind alle angezeigt. Sie werden am Ende des Spiels wieder entfernt. Mit diesem jetzt erledigt, im kommenden Video, wir diese beiden Tasten hier behandeln, aber stellen Sie sicher, dass der Benutzer kann nur eine Auswahl jedes Mal, wenn ein Bild angezeigt wird. 11. Vermeiden von Mehrfachauswahlen und UI-Updates: Unser Spiel ist fast fertig und jetzt müssen wir nur noch ein paar letzten Schliff machen. Eines der wichtigsten Dinge, die wir in diesem Video tun werden, ist sicherzustellen, dass der Benutzer nur einmal pro Bild auf eine dieser Auswahlschaltflächen klicken kann. Derzeit, wenn wir ein Spiel starten, können wir auf jede dieser Schaltflächen so oft wie wir für jedes einzelne Bild wollen klicken. Wir wollen auch sicherstellen, dass dieser Punktebereich und die Buttons nicht verfügbar sind, bevor das Spiel überhaupt beginnt. Zunächst einmal werden wir damit beginnen, diesen Startabschnitt in unserer script.js zu verstecken. Ich möchte dies direkt unter unseren Variablen tun, also unter der Summe zur Verfügung. Lassen Sie uns unsere Statistik Inhalt Abschnitt, der der Wrapper ist nur hier, der alle unsere Partituren und Schaltflächen enthält. Document.getElementById, ist der ID-Name statsContent. Wir können dies dann ausblenden, indem Sie die Stileigenschaft der Sichtbarkeit auf ausgeblendet setzen. Da das jetzt weg ist, wollen wir das wieder einschalten, sobald das Spiel beginnt. Lassen Sie uns das kopieren und wenn wir zu unserer Spielfunktion gehen, können wir das hier drinnen hinzufügen, aber dieses Mal wollen wir, dass die Sichtbarkeit gleich sichtbar ist. Schließlich, am Ende des Spiels werden wir dies auch manipulieren, so dass wir dies hinzufügen können. einmal, setzen Sie dies so, dass es ausgeblendet wird, wenn das Spiel vorbei ist. Lassen Sie uns das speichern und versuchen Sie es im Browser, Sie können spielen und jetzt zeigen unsere Statistiken jetzt [unhörbar] das Ende des Spiels. Dies wird jetzt versteckt, bereit für den Start des Spiels. Als nächstes können wir diese beiden Werte auch dynamisch machen. Derzeit haben wir keinen Wert, um mit unserer Punktzahl zu beginnen, und wir werden diesen hartcodierten Wert von 20 innerhalb unserer index.html haben. Lassen Sie uns dies entfernen, und jetzt können wir diese mit der ID der aktuellen Punktzahl aktualisieren, und auch insgesamt verfügbar. Wir haben diese Werte bereits. Wenn wir oben zu unseren Variablen scrollen, haben wir unsere Punktzahl und auch die Summe zur Verfügung, also lassen Sie uns diese hier jetzt hinzufügen. Schnappen Sie sich die Elemente durch unsere ID, die die aktuelle Punktzahl ist. Setzen Sie dann die innerHTML auf unsere Punktevariable gleich. Ich werde das duplizieren, und der nächste von insgesamt hatte die ID der gesamten verfügbaren. Die Variable wird knapp oben gespeichert, und das ist nur eine hier, also ziehen wir das über. Über den Browser, können wir jetzt testen, wenn wir auf Play klicken. Alle Werte jetzt aktualisiert und wir sehen immer noch die dynamische Anzahl der Bilder von 20. Wenn Sie sich von früh an in der HTML erinnern, setzen wir den Abschnitt auch hier. Wir sagen, wie viele Sekunden der Benutzer sich entscheiden muss. Dies wird nur hartcodierten Wert von drei bleiben , der in unserer Indexseite vorbei ist, wir haben diesen Wert auch innerhalb einer Spanne mit der ID von TimeSetting umgeben. Nun lassen Sie uns das entfernen, es ist ein hartcodierter Wert, wir können dies jetzt als Variable setzen. An der Spitze werde ich eine Konstante erstellen, den Namen der Zeitverzögerung, die ich zunächst auf einen Wert von drei Sekunden setzen werde. Wir können diese Zeitverzögerung jetzt an zwei Stellen verwenden. Zunächst einmal werden wir unser DOM nur hier aktualisieren, und wir können dies auch unten verwenden. Innerhalb unserer Timer-Funktion, so können wir unseren hartcodierten Wert durch unsere Variable ersetzen. Wir können dann das DOM aktualisieren. Also lassen Sie uns diese Zeile duplizieren und die ID, die wir anvisieren wollen, ist die Zeiteinstellung. Lassen Sie uns dies speichern und prüfen, ob das funktioniert. Es funktioniert, aber es sieht nicht genau so aus, wie wir es wollen, das ist ein Wert von 3.000. Da dies in Millisekunden ist, müssen wir alles tun, um dies durch 1.000 zu teilen, was uns den Wert von drei Sekunden gibt. Lassen Sie uns auch überprüfen, dass der Timer funktioniert und sehen, dass wir drei Sekunden zwischen jedem Bild haben . Das sieht gut aus. Das nächste, was wir beheben müssen, ist die Tatsache, dass sie einen Klick auf diese Schaltflächen verwenden, mehrmals für jedes Bild. Die Art und Weise, wie wir dies beheben werden, besteht darin, eine Variable namens gewählt zu erstellen, und wir setzen dies auf wahr, sobald ein Benutzer auf die Schaltfläche klickt. Fügen wir kurz danach ein Komma hinzu, und dann können wir eine neue Variable namens gewählt hinzufügen, und wir werden dies auf einen Anfangswert von false setzen. Wenn wir nun nach unten zu den Funktionen scrollen, die aktiviert sind, sobald der Benutzer auf die Tasten klickt, ist dies die Übereinstimmung und keine Übereinstimmungsfunktionen. Wir wollen den Code hier nur ausführen, wenn der gewählte Wert gleich false ist. Also, wir schneiden das, ich schaue, um eine if-Anweisung zu schreiben. Wir können sagen, wenn nicht gewählt, können wir dann unsere geschweiften Klammern hinzufügen und den Code im Inneren ausführen. Würde genau das gleiche für unsere NoMatch-Funktion direkt unten tun, also schneiden Sie dies aus, erstellen Sie unsere if-Anweisung und führen Sie dann diesen Code hinein. Anfangs werden beide Funktionen ausgeführt, wenn Sie auf eine Schaltfläche klicken , da wir unseren gewählten Wert auf false gesetzt haben. Jede dieser Optionen wird also ganz am Anfang funktionieren. Aber sobald der Benutzer auf einen dieser geklickt hat, wollen wir dies dann umkehren und unseren gewählten Wert auf true setzen. Wir werden genau das gleiche in unserer NoMatch-Funktion tun. Sobald ein Benutzer eine Auswahl getroffen hat, wird ausgewählt gleich wahr sein. Dann wollen wir dies wieder falsch machen, damit der Benutzer eine neue Option machen kann, und die Art und Weise, wie wir dies tun können, ist eine Sicherung in unserer Generierfunktion. Nehmen wir an, gewählt sei gleich falsch, so dass der Wert der gewählten wird immer nur gleich falsch sein wenn das Spiel beginnt oder wenn wir ein neues Bild erzeugen. Dies bedeutet, dass der Benutzer dann seine Wahl treffen kann, weil dies falsch ist, und dann setzen wir dies auf wahr, so dass keine weiteren Entscheidungen getroffen werden können. Geben Sie dies weiter speichern und lassen Sie uns dies im Browser testen. Wir können jetzt nur einmal auf einen dieser Buttons für dieses Bild klicken, einmal für dieses Bild und das funktioniert alles gut. Dies ist jetzt die ganze Funktionalität jetzt für unsere Anzahl viel Spiel gekümmert. Als nächstes werden wir dieses Projekt beenden, indem wir unserem Bild einen Fade-Effekt hinzufügen. 12. Überblend-Animationen: Wenn Sie dieses Projekt beenden, werden wir die Übergänge zwischen jedem unserer Bilder ein wenig glatter machen. Derzeit wird jedes unserer Bilder nur innerhalb des DOM platziert. Aber wir werden diese glatter machen, indem wir einen Fade-Effekt hinzufügen. Die Art und Weise, wie wir dies tun können, ist, indem wir eine Klasse zu unserem Bild hinzufügen. Sobald dies generiert wurde. Wir können nun zu unserem CSS übergehen und dies als Animation hinzufügen. Wenn wir über unsere SetimageSource-Funktion gehen, innen hier ist, wo wir ein neues Bildelement erzeugen, das im Browser angezeigt wird. Wir können auf unsere Bildvariable zugreifen und ich werde dies tun, kurz nachdem wir die Quelle gesetzt haben. Wir können dies tun, indem Sie die ClassList Eigenschaft auswählen, die eine Methode namens add hat. Dies ermöglicht es uns, einen neuen Klassennamen zu unseren Bildelementen hinzuzufügen und wir werden für einen Namen von Fade gehen. Wir können das jetzt in unseren Stylesheets verwenden, also gehen Sie zu unserer Styles.css. Wir können dies überall innerhalb unserer Stylesheets hinzufügen, ich werde für knapp über unserer Medienabfrage gehen. Wir könnten anfangen, unser Fade-Element anzuvisieren. Aber kurz bevor wir dies tun, müssen wir unsere Animation erstellen und wir könnten dies mit der Keyframe-Regel tun. Dann geben wir unserer Animation einen Namen und ich werde für Fade gehen. Hier haben wir gesagt, welche CSS-Eigenschaft wir im Laufe dieser Animation ändern wollen. Daraus können wir von und nach verwenden, wo wir angeben, mit welchen CSS-Eigenschaften wir beginnen möchten und mit welchen wir enden möchten. Um also einen Fade-Effekt zu erzeugen, werden wir die CSS-Eigenschaft der Deckkraft auf Null setzen. Dies bedeutet, dass dies völlig transparent ist und wir werden nichts auf dem Bildschirm sehen. In unserem Fall sehen wir das Bild im Browser nicht. Am Ende dieser Fade oder dieser Animation möchten wir, dass die Deckkraft ein Wert von eins ist. Das bedeutet, dass unser Bild vollständig sichtbar oder undurchsichtig ist, sobald unsere Animation fertig ist. Die Art und Weise, wie wir dies verwenden können, ist innerhalb unserer Fade-Klasse. Denken Sie daran, fade ist die Klasse, die wir unserem Bildelement hinzugefügt haben , und wir können unsere Keyframes mit dem Animationsnamen hinzufügen. Der Animationsname ist fade. Dies ist der Name gerade hier und jetzt haben wir eine Animation, die von Null Opazität gehen wird, vollständig undurchsichtig oder vollständig sichtbar auf dem Bildschirm zu sein. Aber im Moment wird dies wahrscheinlich keinen Effekt erzeugen. Lasst uns das einfach überprüfen und neu laden. Wir sehen nichts anderes innerhalb des Browsers. Dies liegt daran, dass dies so ziemlich sofort passiert und es keine Zeitverzögerung zwischen dem Start und dem Ende unserer Animation gibt. Um dies zu tun, können wir die Animationsdauer einstellen und dies ist die Anzahl der Sekunden, die wir wollen, dass dies passieren. Wir wollen diese Animation so einstellen, dass sie über eine Sekunde passiert. Nun, wenn wir es im Browser versuchen und auf Play klicken, sehen wir, dass jedes Bild, das geladen wird, eine Animation hat, die mehr als eine Sekunde ist. Dies macht das Spiel nur ein wenig glatter für den Endbenutzer und natürlich können Sie mit diesen spielen und diese Animationen individueller machen und dieses Projekt zu Ihrem eigenen machen. Dies ist nun das Ende unseres Number Match Spiels, ich hoffe, es hat euch gefallen. Danke, dass Sie zugesehen haben. 13. 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 haben etwas Wissen daraus gewonnen. Wenn Sie diese Klasse genossen haben, stellen Sie sicher, dass Sie den Rest meiner Klassen hier auf Skill-Anteil überprüfen, und folgen Sie mir auch für Updates und auch alle neuen Klassen informiert werden, sobald sie verfügbar werden. Vielen Dank nochmals, viel Glück, und hoffentlich sehe ich Sie in einer zukünftigen Klasse wieder.