JavaScript Fun: Baue ein Memory-Spiel!

1. Willkommen beim Kurs!: Hallo, willkommen in dieser Klasse. Wenn Sie ein Anfänger in der Webentwicklung sind und einfach nur ein paar lustige Projekte erstellen möchten. Dann ist dies der richtige Kurs für dich. Idee hinter dieser Serie ist es , Ihnen zu zeigen, was wir tun können wenn wir sie in HTML, CSS und JavaScript kombinieren. Ich werde keine Vorlagen und in Bibliotheken, Boilerplates oder Frameworks verwenden . Stattdessen werden wir unsere Projekte mit diesen drei Technologien komplett von Grund auf neu aufbauen unsere Projekte mit diesen drei Technologien komplett von . Projekt für diese Klasse ist ein Memory-Spiel. Und die Idee ist, dass wir ein Gitter aus Quadraten haben. Der Play-Link klickt auf ein Paar Quadrate, um die Farben aufzudecken, und versucht, eine Übereinstimmung zu finden. Wenn sie eine falsche Übereinstimmung erhalten, die Quadrate erneut ausgeblendet. Der Spieler muss versuchen, sich daran zu erinnern was jeder volle Gewinn für den nächsten Versuch erhält. Die Farben sind auch zufällig, sodass sie sich für jedes Spiel an einem anderen Ort befinden. Dieses Spiel wird komplett von Grund auf neu erstellt. Wir beginnen mit dem Aufbau der HTML-Struktur. Vorher hatte ich kein Styling und auch das Layout mit CSS, zusammen mit leichteren Hinzufügen von Animationen, wenn es eine Übereinstimmung gibt und auch wenn es nicht viel gibt. Die meiste Zeit wird damit verbracht, JavaScript zu schreiben, einschließlich der Erzeugung der Quadrate mit zufälligen Farben, dem Umgang mit Spielen und Nichtübereinstimmungen dem Packen der Punktzahl unter dem Ende des Spiels. Und noch viel mehr. Wir werden viele der JavaScript-Grundlagen behandeln, die Sie kennen müssen, wie Variablen, Funktionen, Arbeit mit dem DOM, Ereignisse , Bedingungen und vieles mehr. Also danke, dass du dir diesen Kurs angesehen hast und wir sehen uns in der ersten Lektion. 2. Das brauchst du für diesen Kurs: Nun, ich werde jederzeit verschwendet, wenn ich einsteige und unser Projekt einbaue. Kurz bevor wir das tun, gibt es ein paar Dinge, die wir in Gang bringen müssen. Zuallererst benötigen wir einen Webbrowser und Sie können jeden Webbrowser verwenden , den Sie bevorzugen und was Sie Google Chrome verwenden, aber Sie können Firefox Safari oder einen von uns nutzen, ebenso wie diesen, sie benötigen auch einen Texteditor. Ich werde Visual Studio Code verwenden, das von code dot Visual Studio.com verfügbar ist. Sobald Sie dies heruntergeladen und geöffnet haben, sehen Sie links ein Startfenster, genau wie wir, aber Sie können keinen anderen Editor verwenden, wenn Sie möchten. Lassen Sie uns jetzt zur ersten Lektion übergehen. Wir beginnen mit der Erstellung unseres Projekts. 3. 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 ablenken, und du kannst sogar einen Schritt zurücktreten , wenn du den Kurs beendet hast und danach zurückkommen und einige Änderungen vornehmen. Das gibt dir wirklich eine gute Gelegenheit, das Gelernte außerhalb des Unterrichts zu üben . Denken Sie auch daran, Ihr Projekt auch hier auf Skillshare zu teilen. 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. 4. Project und HTML: Dies ist die endgültige Version des Spiels, die wir jetzt in Build einsteigen. Es wird Ihnen helfen, genau zu visualisieren , was wir erstellen werden. Die Idee zu diesem Memory-Spiel ist ziemlich einfach. Wir haben eine Abfolge von Quadraten ohne Hintergrundfarbe. Für jeden von ihnen ist eine versteckte Farbe angebracht. Wenn wir also auf eines dieser Elemente klicken, wird die Farbe angezeigt. Und die Idee ist, ein passendes Paar zu erstellen. Sobald wir das tun, wird unsere Punktzahl erhöht. Kleine Animationseffekte, und diese beiden Farben bleiben auf dem Bildschirm. Dann klicken wir weiter auf die zusätzlichen Felder und versuchen so lange weiterzumachen, bis alle Spiele erstellt wurden. Um dies zu tun, wird wie immer auf den Desktop gesprungen und ein neuer Ordner erstellt. Ich nenne das Memory-Spiel. Lassen Sie uns das in Visual Studio-Code ziehen. Okay, und von hier aus müssen wir unsere üblichen Dateien erstellen , um loszulegen, wir beginnen mit der Indexseite. Also lasst uns in unsere Seitenleiste springen. Klicken Sie auf das Symbol für eine neue Datei oder verwenden Sie Command oder Strg N., um unsere Index-HTML-Seite Wir verwenden den eingebauten Shortcut-Befehl , der HTML Doppelpunkt fünf ist , der alle Boilerplate einrichtet , die wir für unseren Index benötigen Ist das der Titel des Memory-Spiels? Und dafür ist der HTML-Inhalt ziemlich einfach. Alles, was wir hinzufügen werden, wenn wir uns die endgültige Version ansehen, ist ein Titel oben, wir erstellen ein Element, das derzeit nicht sichtbar ist, das die Partitur enthält, wird einen Button hinzufügen, den wir derzeit nicht können sehen. Dies wird wieder gespielt werden. Steuerung mit JavaScript wird erst Die Steuerung mit JavaScript wird erst angezeigt, wenn alle Spiele erstellt wurden, sodass der Benutzer das Spiel neu starten kann. Wir haben auch unseren Rasterbereich , der eine ungeordnete Liste sein wird, und jedes unserer Quadrate wird ein Listenelement sein. So ziemlich einfach in Bezug auf das HTML. Also lasst uns in den Körperbereich springen. Wir beginnen die Dinge mit einer Überschrift der ersten Ebene, die der Text des Memory-Spiels mit p-Elementen sein wird . Und das ist für unsere Punktzahl nicht zu vergessen, und wir setzen dies auf einen Anfangswert von 0 platzieren eine eindeutige ID des Schädels. Und wir werden dies verwenden, um diesen Kursabschnitt in JavaScript aufzunehmen. Wir verwenden es, um diesen Abschnitt ein- und auszublenden , wenn er benötigt wird. Und auch, um die Punktzahl jedes Mal zu erhöhen , wenn der Benutzer eine Übereinstimmung hat. Wie bereits erwähnt, benötigen wir auch einen Button und dieser soll erneut gespielt werden. Wir werden das auch verstecken, bis das Spiel vorbei ist. Und wenn ich dann wäre, erstellen Quadrate eine ungeordnete Liste. Im kommenden Video werden wir diese ungeordnete Liste so erstellen, dass sie wie ein Raster aussieht. Im Moment wird es also leer sein, weil wir jedes unserer Quadrate mit JavaScript erstellen und uns auch eine eindeutige ID von Quadraten geben. Speichern Sie das und öffnen wir es dann im Browser. Unsere Optionen sind also entweder in den Memory-Spielordner zu gehen und auf die Indexseite zu doppelklicken, um diese zu öffnen. Oder mit Visual Studio können wir auch mit der rechten Maustaste auf die Registerkarte klicken, den Pfad kopieren und ihn in den Browser einfügen . Das sieht im Moment natürlich nicht gut aus. Wir müssen unser Styling im kommenden Video erstellen. Und wir bereiten uns darauf vor, indem unsere neue Datei erstellen , um dies zu speichern. Wenn Sie also einreichen, sind dies die Stile dot css. Und natürlich benötigen wir auch eine JavaScript-Datei, um unser Spiel zu steuern. Erstellen Sie also eine neue Datei auch hier. Das sind die Skripte dot js. Wir werden zu einem späteren Zeitpunkt darauf zurückkommen, aber im Moment springen wir einfach in unsere Indexseite, gehen die Seitenleiste hinunter und verlinken auf unsere beiden Dateien. Also erstellen wir zunächst im Kopf unseren Link zu unseren Stylesheets. Und da sich dies in demselben Ordner neben unserem Index befindet, können wir einfach mit dem Titel styles.css verweisen. Und dann unten im Abschnitt body, direkt unter der ungeordneten Liste, erstellen Sie einen Link zu unserem Skript. Die Quelle ist nur der Dateiname von script.js. Lassen Sie uns überprüfen, ob das mit einer Warnung funktioniert. In einem beliebigen Text innerhalb von hier. Speichern Sie unsere Datei und aktualisieren Sie den Browser. Und unsere JavaScript-Datei ist korrekt verknüpft. Wir können das entfernen. Speichern Sie alle unsere Dateien und wir fahren jetzt mit dem nächsten Abschnitt fort, in dem wir unsere Stile erstellen , damit unser Spiel viel besser aussieht. 5. CSS-Styling: Jetzt sind Sie an der Reihe unsere Stylesheets, die im vorherigen Video erstellt wurden. Und die Idee ist, dies eher wie die endgültige Version aussehen zu lassen . Und natürlich kannst du es an deinen eigenen Stil anpassen , was mir zu verrückt wird. Wir werden nur ein paar grundlegende Stile und Farben kreieren , damit es ein bisschen ansprechender aussieht. Zu Beginn springen wir in unser Stylesheet und zielen auf den Körperabschnitt ab. Und wir beginnen mit der Schriftfamilie. Sie können also wieder alle Farben und die Schriftarten und Größen festlegen , die Sie bevorzugen. Wählen Sie also eine der Schriftfamilien , die Sie verwenden möchten. Um zu überprüfen, ob dies innerhalb unseres Index korrekt verlinkt ist. Speichern Sie dies und aktualisieren Sie den Browser, und Sie sollten eine Änderung an unserem Text sehen. Okay, als nächstes werden wir den Körper so einstellen , dass er den Anzeigetyp Flex hat. Auf diese Weise können wir die Flexrichtung als Spalte festlegen . Dadurch werden alle unsere Inhalte vertikal und übereinander gestapelt. Wir haben also den Titel, wir haben den Schädel, derzeit unsichtbar ist , den Button, der derzeit unsichtbar ist, gefolgt von unserer ungeordneten Liste. Das Display. Benutze die Flexbox. Standardmäßig befindet sich die Flexrichtung in einer Reihe, sodass alles von links nach rechts auf der Seite angezeigt wird . Und wir können dies ändern, indem die standardmäßige Flexrichtung als Spalte festlegen. Platzieren Sie alles in der Mitte, z. B. den Text und die Partitur. Wir können die Einzelposten in der Mitte setzen. Bei Verwendung der Biegungsrichtung der Stütze. Dadurch wird alles in die Mitte des Browsers, den Hintergrund, verschoben. Der Hintergrund. Ich werde auswählen, wir verwenden einen linearen Farbverlauf , der drei verschiedene Farben annehmen wird. Mit dem linearen Verlauf können wir den ersten Abschnitt unserer Verläufe auf den Wert eines beliebigen Winkels festlegen , der angezeigt werden soll. So können wir die Farbe von oben links nach unten rechts ändern , von links nach rechts, von oben nach unten oder jedem anderen Winkel, den Sie möchten, ich möchte für 90 Grad gehen und dann durch ein Komma getrennt werden, drei verschiedene Farben platzieren. Also die erste, das ist die Startfarbe links, was einem RGB-Wert von 2015149 entspricht. Das wird also ganz am Anfang beginnen. Also setzen wir das auf 0 Prozent. Lass uns ein bisschen mehr Platz schaffen damit wir das auf der Seite sehen können. Okay? Wir haben also unseren ersten Parameter, ich werde einen zweiten und dann ein weiteres Komma direkt nach den 0 Prozent. Der zweite RGB-Wert. Öffne die Klammern. Dieser ist 118248 zu kostenlos 0. Und danach, kurz nach dieser blauen Klammer, die Platzierung des Prozentsatzes , der 50 ist beginnt die Platzierung des Prozentsatzes , der 50 ist, bei dieser Farbe. 50 Prozent durch die Farbverläufe haben diese Farbe und werden dann durch Komma getrennt, unseren dritten und letzten Wert. Wiederum ein RGB-Wert , der rot sein wird, Wert von 70, Grün und Blau, 249. Das ist die endgültige Farbe. Das wird also ganz rechts sein. Also setzen wir das auf 100%. Aktualisieren Sie die Seite. Wir beginnen bei 0, was unsere dunklere Farbe ist. Wir haben unsere mittlere Farbe. Dann wechseln wir bei 100% zu diesem dritten Wert, direkt nach unserer Hintergrundfarbe , der für den Text gilt. Und das wird wieder sein, ein RGB-Wert wird ihn auf einen Wert von 2073 setzen, dann 63 für das Blau. Außerdem, ganz nach persönlicher Vorliebe, werde ich zwischen jedem dieser Buchstaben etwas Abstand mit einem Wert von zwei Pixeln setzen , nur um den Text etwas breiter zu machen. Okay, danach lasse ich die Überschrift der ersten Ebene so wie sie ist. Und wir können zum Score-Bereich und auch zum Button von unserer Indexseite gehen . Wir haben unsere Punktzahl, die die Idee von Score hat. Dann haben wir unseren Button direkt darunter. Stylesheets. Wenn Sie die Punktzahl mithilfe des Hashs abrufen , wird die Schriftgröße auf zwei Rems erhöht, da dies eine ID ist . Die Schriftstärke sollte etwas dunkler sein. Das kann also mutig sein. Dann etwas Rand oben und unten. Also ein Rem oben und unten. Und wir lassen links und rechts einen Rand von 0. Als nächstes haben wir den Button , der standardmäßig nie gut aussieht. Also zielen wir mit der Tastenauswahl darauf ab. Und Schaltflächen erben nicht automatisch die Schriftfamilie , die vom Body festgelegt wurde. So können wir dieselbe Schriftfamilie kopieren. Orte in. Dadurch wird der Text der Schaltfläche geändert. Okay, also was ich hier tun möchte, ist den Standardrand zu entfernen. Wir fügen einige abgerundete Ecken hinzu. Und wir werden auch etwas Padding einstellen , um es ein bisschen größer zu machen. Und es ist auch schön, seinen Cursor in einen Zeiger zu ändern. Wir beginnen also mit den abgerundeten Ecken und verwenden den Randradius von fünf Pixeln. Entfernen Sie diesen schwarzen Standardrand. Indem Sie dies auf „none“ setzen. Okay, es braucht ein bisschen mehr Abstand, was wir auffüllen können. Denken Sie daran, dass die Polsterung den Raum in das Innere des Elements einfügt . Wenn ich also zwei Werte hinzufüge, den Padding, den ersten Wert von 0,5 Rems, wenden wir ihn oben und unten an. Und der zweite Wert gilt für links und rechts. Die Schriftgröße, die auf den Text eines RAM angewendet werden soll. Etwas Buchstabenabstand von einem Pixel, und ändern Sie den Cursor in einen Zeiger. Diese letzten beiden Eigenschaften verteilen also den Text und geben uns jedes Mal, wenn der Benutzer den Mauszeiger über diese Schaltfläche bewegt, diesen Handzeiger. Also zurück zu unserer Indexseite. Das nächste, was wir haben, der Stil ist unsere ungeordnete Liste. Wie wir sehen können, haben wir in der ungeordneten Liste keines unserer Quadrate, mit denen wir arbeiten können. Wir werden also damit beginnen, einige leere Listenelemente hinzuzufügen , um zu simulieren, wie das aussehen wird wenn wir diese mit JavaScript hinzufügen. also ein Listenelement platzieren können Sie es so oft duplizieren, wie Sie möchten. Derzeit sehen wir immer, dass diese Punkte in unsere Stylesheets gelangen und wir beginnen mit unserer ungeordneten Liste zu arbeiten. Zunächst einmal wird plötzlich der Anzeigetyp als Raster angezeigt. Das Raster wird es uns ermöglichen, unsere Quadrate so darzustellen , wie wir es in dieser endgültigen Version sehen. Also legen wir fest, wie viele Zeilen und wie viele Spalten wir wollen, und auch die Größe für jedes dieser Quadrate. Wir tun dies, indem wir zuerst die Spalten der Rastervorlage festlegen und wir können hier so viele Werte festlegen, wie wir möchten. Wenn wir zum Beispiel 100 Pixel und 200 Pixel hinzufügen, erhalten wir zwei Spalten, die erste oder 100 Pixel und dann die zweite mit 200 Pixeln. Aber da wir vier verschiedene Quadrate erstellen werden , die gleich groß sind, können wir die Wiederholungsfunktion verwenden. Die Wiederholungsfunktion nimmt zwei Dinge auf. Die erste ist die Anzahl der durch ein Komma getrennten Spalten. Der zweite Wert ist die Größe jedes einzelnen. Also 100 Pixel. Und wenn wir das kopieren und einfügen, können wir dies in Rastervorlagenzeilen ändern. Das zum Schließen. Wir wollen auch vier Reihen oder 200 Pixel hoch. Dies gibt uns effektiv ein Vier-mal-Vier-Raster, sodass wir 16 einzelne Räume haben. Und wir werden das sehr bald deutlicher sehen wenn wir zum Listenelement kommen, der Lücke um jedes einzelne von zehn Pixeln. Ich werde auch den Standard-Füllwert entfernen indem ich diesen auf 0 setze. Und dann gehe nach unten zum Listenelement, Listenelement. Wir müssen diese Punkte bewegen. Sind diese Aufzählungszeichen, indem den Listenstil auf null setzen. Das wird die los. Wir setzen eine Grenze. Und die Dicke des Randes wird dies ziemlich dünn machen. Also 0,5 Pixel, eine durchgehende Linienfarbe. Die Farbe der Linie. Wir verwenden einen RGB-Wert von 2036, was uns unsere erste Zeile ergibt. Und da wir nur vier Listenelemente haben, belegt es nur die ersten vier Felder. Lassen Sie uns diese vier Elemente duplizieren. Mache acht. Wir haben jetzt Platz für acht verschiedene Gegenstände und diese werden jetzt auf der zweiten Rolle erscheinen. Gut, also um die Ecken jedes dieser Quadrate zu durchbrechen , können wir in einem Grenzradius von zehn Pixeln platzieren. Und setze den Cursor auch als Zeiger. Da wir möchten, dass der Benutzer auf jeden dieser Elemente klicken kann . Gut. Das ist also vorerst unser grundlegendes Styling. Wir werden später darauf zurückkommen und einige Animationen hinzufügen. Richtet zwei verschiedene Animationen ein. Und der erste ist, wenn der Benutzer die richtige Vermutung bekommt, ich bin einer, wenn er es auch falsch versteht. 6. Auswahl von zufälligen Farben: Okay, wir haben jetzt unsere Index-Seite mit unserem Markup, wir haben unser Stylesheet und so sieht unser Spiel derzeit aus. Wir haben auch unser Skript, das derzeit leer ist und wir sind unten auf unserer Indexseite verlinkt . Das Ziel dieses Videos ist es also ein Array zu erstellen, das alle Farben enthält , die Sie für alle unsere 16 Quadrate verwenden möchten, um 16 Quadrate zu ergeben. Wir benötigen also acht Farbpaare, um eine Charge zu erstellen. So haben wir zum Beispiel ein Array mit zwei Rottönen, zwei Gelben, zwei Blautönen usw. Das zweite Ziel besteht darin, eine Funktion zu erstellen , die zufällig eine dieser Farben auswählt, diese Farbe einem bestimmten Quadrat zuweist diese Farbe dann aus dem Array entfernt wird. Wir haben also keine Duplikate. Der erste Schritt besteht also darin, ein Array namens Farben zu erstellen und acht Farbpaare darin zu beginnen. Springen Sie also in unsere Skripte und erstellen Sie unser Array namens Farben. Und jeder von diesen wird eine Schnur sein. Sie können diese Farben also in eine andere Farbe ändern , die Sie möchten, Sie können sie auch in eine RGB-Farbe ändern, aber ich möchte eine Sechseckfarbe als Zeichenfolge verwenden. Es gibt also alles nur CSS-Werte, also beginnen die mit dem Hash. Und der erste Wert, den ich gewählt habe, ist 3333. Durch ein Komma getrennt wird dieses dupliziert. Wir haben also ein Paar, weil wir 16 Farben daraus machen wollen, aber es gibt acht verschiedene Farben, um Paare zu bilden. Danach wird die zweite Farbe, wieder eine Hex-Farbe, doppelt F9 für D sein Und dann dupliziere diese. Die dritte Farbe, das ist ein 0, C-C-Doppel-F ein Komma, und dupliziere diese. Der nächste. Doppel-F, doppelte Sechs. Dupliziert das nächste doppelte F4, D zum Duplizieren. Als nächstes verdoppeln Sie F auf a, auf einem Komma kopieren und einfügen. Ups, vergiss nicht die Asche am Anfang jedes einzelnen davon. Und der nächste werden alle Ds sein. Also 60 Tage. Danach haben wir 000099. Duplikate. Sollte alles sein, was wir brauchen. Wir haben unser erstes Paar, 2345678 Paare dort. Das gibt uns also 16 verschiedene Farben für jedes unserer Quadrate. Als nächstes erstellen wir gleich danach eine Funktion. Die Aufgabe dieser Funktion besteht darin, eine zufällige Farbe aus diesem Array auszuwählen, und dann entfernen wir sie. Also fängt es an, wir erstellen einfach unseren Funktionskörper namens Select Color. Und um zufällig einen unserer 16 Werte aus dem Array auszuwählen , können wir eine Zufallszahl mit 16 Auswahlmöglichkeiten erstellen. Wir verwenden also die Map-Funktion, eine Zufallszahl generiert. Und wir könnten, wenn wir das mit 16 multiplizieren wollen , oder stattdessen einfach das colors-Array verwenden und die Längeneigenschaft auswählen. Also Farben, das Land. Und wenn wir uns dazu entschließen, dies in Zukunft zu ändern, wird dies automatisch aufgegriffen. Denken Sie daran, dass Math.random uns eine Zufallszahl zwischen 010 gibt , aber der Wert eins nicht. Sie steigt zum Beispiel auf 0,999. Und was wir tun müssen, ist ein paar ganze Zahlen zu ermitteln, damit wir das abrunden können. Lassen Sie uns all diesen Zugriff Math.floor in unsere Zufallszahl einfügen. Das wird das abrunden. Das gibt uns also eine Zahl zwischen 015, was zu 16 Optionen führt. Speichern Sie dies in einer Variablen oder Konstanten namens random. Ich werde nur einen Kommentar abgeben. Das ist also 0 bis 15. Und wir können jetzt diese Zufallszahl verwenden, um eine unserer Farben im Farbfeld auszuwählen . Wählen Sie also Farben aus. Und genau wie bei jedem anderen Array können wir eine Indexnummer übergeben , um eine bestimmte Farbe auszuwählen. Aber wir geben unseren Zufallswert weiter , um uns eine zufällige Auswahl zu ermöglichen. Dies innerhalb einer Konstante namens selected. Nachdem jeder dieser Zufallswerte ausgewählt wurde, können wir ihn aus unserem Farbfeld von Farbpunktspleißen entfernen . Spleißmethode entfernt einen unserer Werte. Also zunächst die Indexnummer , mit der wir beginnen werden. Wenn wir also von hier aus beginnen, können wir sogar den einzelnen Wert entfernen oder wir können jeden Wert direkt danach verschieben. Die Startposition ist also unsere Zufallszahl für unsere Indexposition. Und da wir zum Zeitpunkt o nur einen einzelnen Wert entfernen möchten , Platzieren eines Werts von eins nur dieser einzelne Wert entfernt. Danach geben Sie unseren ausgewählten Wert zurück. Dann können wir das testen, indem wir unsere Funktion direkt darunter aufrufen. Also habe ich es beim Namen genannt. Wir werden dies zweimal aufrufen, damit wir sehen können, wie viele dieser Werte entfernt wurden. Wird auch in ein Konsolenprotokoll für unser Farben-Array eingefügt. Gehen Sie zum Browser und öffnen Sie die Entwicklertools mit der rechten Maustaste und überprüfen Sie sie. Springt in die Konsole. Erfrischen. Und wir können sehen, dass wir ein Array mit 14 Werten haben. Denken Sie daran, dass unser ursprüngliches Array diese 16 Werte enthält. Wir führen unsere Funktion dann zweimal aus. Und bei jedem Funktionsaufruf wurde ein einzelner Wert aus einer zufälligen Position entfernt . Daher wurden bis zum Konsolenprotokoll zwei Positionen entfernt. Lass uns kopieren und einfügen. Dies sollte jetzt zu 13 Werten führen. Und jedes Mal, wenn wir es ausgewählt haben, eine entfernen. Das bedeutet, dass wir eindeutige Werte haben werden . Wird auch noch einen Test machen, wird fehl am Platz schneiden. Einer unserer Funktionsaufrufe innerhalb des Konsolenprotokolls platziert. Entferne einfach das Semikolon. Und jedes Mal, wenn wir uns jetzt aktualisieren, sollten wir einen unserer zufällig ausgewählten Array-Werte sehen. Gute Seele mit unserem Zufallswert aus unserem Array jetzt ausgewählt. Als Nächstes können wir diese zufällige Farbe innerhalb einer Schleife verwenden, um die 16 Quadrate zu erstellen, die wir für unser Spiel anzeigen müssen . 7. Das Raster Von Quadraten erstellen: Willkommen zum nächsten Teil. Das Ziel dieses Videos ist es, eine Schleife zu erstellen, die 16 Mal läuft. Dies wird in Kombination mit dem CSS , das Sie bereits in unserem Stylesheet haben, verwendet, um unser Quadratraster zu erstellen, das wir 16 Quadrate benötigen, was vier Reihen von Foursquare sind. Darüber hinaus benötigt jedes unserer Quadrate ein benutzerdefiniertes Attribut, um die Farbe zu speichern, die es haben soll. Denken Sie daran, wir haben alle unsere Hexagon-Werte hier. Wir möchten nicht, dass diese auf die Hintergrundfarbe unserer Quadrate angewendet werden, da dies das Spiel offensichtlich sinnlos machen würde da dies das Spiel offensichtlich sinnlos machen würde, da der Benutzer auf die Farben klicken kann , die er sehen kann. Diese wollen wir verstecken können . Dazu entfernen wir die Hintergrundfarbe und speichern diese auch als Attribute, damit wir wissen , welches unserer Quadrate wir zuordnen können. Ups, während wir hier sind, fügen wir auch einfach den Hashtag hinzu, beide Farben. Wenn Sie dies also noch nicht getan haben, gehen wir zunächst zu unserer index.html über und können alle leeren Listenelemente, die wir erstellt haben, verschieben leeren Listenelemente, die wir erstellt haben, nur um zu sehen, wie sie mit dem Styling aussehen würden. Entfernen Sie also alle Listenelemente und kehren Sie dann zu unserem Skript zurück. Wir beginnen mit der Auswahl unserer ungeordneten Liste auf unserer Indexseite, die die ID der Quadrate enthält. Die Spitze. Erstellen Sie eine Konstante, um diese in einem sogenannten Quadratcontainer aufzunehmen. Wir verwenden QuerySelector. Also Dokument Punktabfrage-Selektor. Übergeben wie string, was der Hash ist, da dies eine ID und der Name von Quadraten ist. Ich schaffe nur ein bisschen mehr Platz, damit wir das alles in einer Zeile sehen können. Und dann erstellen wir eine Variable, die in einer Konstante namens Anzahl von Quadraten gespeichert ist. Wir wollen 16 Quadrate. Und dann noch eine Variable namens I, die einem Anfangswert von 0 entspricht. Und wir werden das für die while Schleife verwenden, die wir gerade einrichten werden. Okay, also runter nach unten und blase einfach unsere Select-Color-Funktion, die wir in Kombination mit unserer Schleife verwenden werden. Wir verwenden eine while Schleife. Dies wird ausgeführt, solange ich kleiner als die Variable Anzahl der Quadrate ist . Denken Sie also daran, dass I derzeit gleich 0 ist und die Anzahl der Quadrate 16 ist. Das wird also effektiv mit dem Laufen beginnen und wir sagen, während die Zahl 0 kleiner als 16 ist, führen Sie den Code darin aus. Und bevor ich es vergesse, führen wir I plus plus aus. Dadurch wird der Wert von I in jeder Schleife erhöht. Zu Beginn ist 0 weniger als 16. So wird der Code im Inneren ausgeführt, wird dann erhöht I auf gleich 11 ist immer noch kleiner als 16. Der Code wird es also 16 Mal weiter ausführen. Aber welchen Code müssen wir hier drinnen ausführen? Nun, da wir in unserer Indexseite und ungeordneten Liste sind, und es scheint, dass wir unsere ungeordnete Liste ausgewählt haben. Ganz oben. Wir werden eine Liste mit Elementen erstellen, die darin platziert werden sollen. Und diese sind genau wie die Listenelemente , die wir hier hinzugefügt haben. Also erstellen Sie diese mit JavaScript. Wir verwenden document dot create elements, übergeben den Tag-Namen von LI, um ein Listenelement zu erstellen, und speichern dieses dann in einer Konstante namens square. Okay, jetzt haben wir den Behälter und wir brauchen auch eine zufällige Farbe. Dafür haben wir oben unsere Funktion namens Select Color. Und das wird einen ausgewählten Wert aus unserem Array zurückgeben . Speichern Sie dies in einer Konstante namens color, die dem Rückgabewert unserer Funktion select color entspricht . Wir können diesen Code auch von unten entfernen oder auskommentieren. Und wir überprüfen, ob das alles funktioniert, indem diese Farben zu unseren Quadraten hinzufügen. Greifen Sie also auf r squared zu, was das Listenelement ist. Wir können den Stilhintergrund so einstellen , dass er einer zufälligen Farbe entspricht. Okay, jetzt haben wir unseren Listenpunkt , den wir erstellen. Wir können dies jetzt zu unserem Squares-Container hinzufügen. Dies kann durch Zugriff auf einen untergeordneten Stift erfolgen. Greifen Sie also auf den Container oder den Behälter mit goldenen Quadraten der Eltern zu Die untergeordnete Methode append , um unseren neuen Listeneintrag hinzuzufügen, bei dem es sich um die Variable Square handelt. Erfrischen. Dadurch werden nun 16 Listenelemente erstellt und wir haben die Hintergrundfarbe so eingestellt , dass sie o zufälligen Werten entspricht. Ich erinnere mich daran, da wir jeden dieser zufälligen Werte im Nachhinein entfernen , sehen wir immer nur zwei von jeder dieser Farben. Gut. Wir haben also diese Quadrate, die wir wollen, aber wir wollen die Hintergrundfarbe nicht wirklich so sehen . Wir kommentieren dies aus und greifen stattdessen jedes unserer Quadrate zu. Setzt das Attribut, das einem benutzerdefinierten Attribut namens Datenstrichfarbe entspricht . Der Wert wird unserer Farbe entsprechen. Diese zusätzliche Information oder dieses Attribut wird zu jedem unserer Quadrate hinzugefügt . Wir können das also sehen, wenn wir in die Entwicklertools gehen, mit der rechten Maustaste klicken und Elemente untersuchen, in den Körperabschnitt springen die ungeordnete Liste öffnen. Und wir werden sehen, dass jedes unserer Listenelemente, das wir erstellt haben, diese benutzerdefinierten Attribute mit der Sechseckfarbe hat . 8. Klicks hören: Wie wäre es nun mit 16 Quadraten auf dem Bildschirm? Wir werden jetzt jedem dieser Felder einen Event-Listener hinzufügen , der eine Funktion auslöst , wenn darauf geklickt wird Das Spiel wird paarweise gespielt. Wenn wir also auf zwei Quadrate klicken, vergleichen wir die Farben der einzelnen Quadrate. Dazu müssen wir die Farbe der beiden angeklickten Quadrate speichern und dann verfolgen, ob es das erste oder das zweite ausgewählte Quadrat ist. Telefone vergleichen beide nur, wenn es der zweite Klick ist. Wenn wir also zwei ausgewählte Quadrate haben, werden wir die Farben von beiden vergleichen. Zu Beginn springen wir bis knapp unter unsere while Schleife. Wir wählen alle unsere Quadrate aus , die in den Listenelementen gespeichert sind. Also schnappen Sie sich all diese, würden Sie den Selektor abfragen den Selektor und dann einen Ereignis-Listener hinzufügen. Also sah, dass diese innerhalb einer Konstante namens Quadrate dann den Dokumentpunkt, Abfrageselektor, verwenden. Alle wählen alle unsere Listenelemente aus. Dies wird einen Verweis auf unsere 16-Listenelement-Quadrate enthalten . Darunter wird dann eine for, of -Schleife verwendet, um über jedes unserer Quadrate zu schleifen und einen Event-Listener hinzuzufügen. Eine for, of -Schleife beginnt also genau wie eine for-Schleife. Im Inneren von hier wirst du sagen konst Quadrat von Quadraten. Das bedeutet, dass wir alle unsere Quadrate durchlaufen, was unsere 16 Listenelemente sind. Und dann können wir mit dieser quadratischen Variablen auf jeden einzelnen einzeln zugreifen . Greifen Sie also auf unsere quadratischen Punkte zu. Der Add-Event-Listener möchte auf jeden einzelnen klicken, wodurch eine benutzerdefinierte Funktion namens square click ausgeführt wird. Okay, also kurz bevor wir diese Funktion mit quadratischem Klick erstellen, gehen wir ganz nach oben und fügen ein paar weitere Variablen hinzu, um die Informationen zu speichern , die wir benötigen. Die Information, die wir brauchen, sind die beiden auf Quadrate gekickten. Also wird es anfangen zu spielen. Wir klicken auf den ersten und dann auf den zweiten. Ich installiere diese innerhalb von zwei Variablen. Also lasst uns eins quadrieren. Durch Komma getrennt wird auch eine Variable namens square to erstellt. Diese benötigen keinen Anfangswert. Und da wir nur auf zwei Quadrate gleichzeitig klicken wollen , werden wir dies mit einer Variablen namens click count verfolgen , die gleich 0 ist. Entspricht 0. Wir klicken auf das erste Quadrat. Dies wird dann zum Aufwärmen erhöht. Klicken Sie auf den zweiten, dieser wird auf zwei erhöht. Wir werden prüfen, ob das so ist. Und dann setzen wir das wieder auf 0 zurück und verhindern, dass der Benutzer auf ein drittes Quadrat klickt. Okay, also zurück zu unserer Funktion, die wir erstellen müssen, die als Quadrat geklickt wird. Lass uns das einrichten, aber direkt darunter. Wie bereits erwähnt, müssen wir für jeden dieser Klicks unsere Klickzählvariable erhöhen. Wir würden plus plus. Dieser Klick auf eine Variable wird also sehr nützlich sein , da wir wissen müssen, ob es das erste oder das zweite Quadrat ist, mit dem wir es zu tun haben. Der erste Klick setzt unsere quadratische Eins Variable. Und beim zweiten Klick setzen wir unser Quadrat zwei. es alle Informationen aus unserem Listenelement, die erstellt wurden, einschließlich des Attributs, das die Farbe enthält. Aber wie finden wir kurz bevor wir das tun heraus, auf welches Quadrat geklickt wurde? Eine Möglichkeit, dies zu tun, die Sie vielleicht in der Vergangenheit gesehen haben, besteht darin, die Ereignisinformationen an die Funktion zu übergeben. Und darauf können wir mit E-Punkt-Zielen zugreifen. Oder eine andere Möglichkeit besteht darin, auf etwas namens This zuzugreifen. Werde den Wert davon sehen. Wenn wir das an eine Konsole übergeben, protokollieren, speichern und aktualisieren Sie es. Wechseln Sie in die Entwicklertools in der Konsole. Okay, also klicke auf eines unserer Quadrate. Wir können ein Listenelement sehen oder auf ein zweites Quadrat klicken, unseren zweiten Listenpunkt. Beide weisen auf unterschiedliche Datenattribute hin. Also das this Schlüsselwort, es kann eine komplexe Sache in JavaScript sein, verschiedene Dinge in verschiedenen Kontexten bedeuten. Aber für unseren Anwendungsfall können wir sehen, dass es den Wert des Listenelements protokolliert , auf das wir geklickt haben. Wir können dies also verwenden, um unsere Variablen festzulegen. Wir können dies mit einem JavaScript-bedingten Operator tun. Der bedingte Operator, der oft als ternär bezeichnet wird, stellt eine Frage. Sagen wir, ist die Anzahl der Klicks gleich eins? Stellen Sie eine Frage, ob es gleich eins ist oder ob Sie die quadratische Eins-Variable so setzen möchten, dass sie gleich dieser ist. Oder wenn nicht, wenn dies gleich zwei ist, setzen wir das Quadrat auf gleich diesem setzen unsere beiden Variablen. Und keine Sorge, wenn Sie Visual Studio speichern , fügt Code automatisch in diese Klammern ein. Das ist völlig in Ordnung. Okay, um das zu testen, können wir in ein Konsolenprotokoll den Wert von Quadrat eins setzen und dann square, um die Konsole zu aktualisieren und zu öffnen. Klicke auf den ersten. Wir können sehen, dass, da wir nur auf eine geklickt haben, die erste quadratische Variable gesetzt ist und die zweite noch undefiniert ist. Klicken Sie auf eines der Quadrate, um den Wert von zwei verschiedenen Listenelementen zu erhalten. Wie wir wissen, sind alle unsere Quadrate derzeit nur eine Gliederung. Ich muss die Hintergrundfarbe wenn auf jede davon geklickt wird, und den Benutzer wissen lassen, welche Farbe es tatsächlich hatte, damit er sich beim nächsten Mal nicht mehr daran erinnern kann. Dazu übergeben wir eine if-Anweisung und entfernen das Konsolenprotokoll. Und wir sagen, wenn die Anzahl der Klicks gleich eins ist, wurde das erste Quadrat ausgewählt. Wir werden uns unsere erste quadratische Variable schnappen. Wir legen den Stil Punkthintergrund fest. Denken Sie daran, dass wir dies nur als vorübergehende Maßnahme innerhalb unserer while-Schleife getan haben als vorübergehende Maßnahme innerhalb unserer , um die Farben festzulegen. Wir setzen das gleich Quadrat eins. Wir greifen nach unseren Attributen, die wir hier festlegen, wo sie Attribute erhalten. Attribute, die Sie auswählen möchten diese benutzerdefinierte Datenfarbe. Gib das als Zeichenfolge ein. Wenn nicht, entspricht dies unseren zweiten Klicks oder übergeben Sie es in L-Anweisungen. Kopieren Sie diese Codezeile. Ich möchte hier nicht tun, um dies zu ändern , um Quadratwurzel zwei zu entsprechen. Also nur als Zusammenfassung oder erstes Klicken auf eines unserer Quadrate, wir ausführen, wird unsere Funktion den Klickzähler auf eins erhöhen. Wenn das gleich eins ist. Oder setzen Sie das erste Quadrat so, dass es dem angeklickten Listenelement entspricht . Wenn nicht, ist es der zweite Klick , auf den wir das Quadrat setzen. Überprüfen Sie erneut, ob die Anzahl gleich eins ist. Das erste Quadrat wird angeklickt. Wir ändern die Hintergrundfarbe so, dass sie dem Datenfarbattribut entspricht, das im Listenelement gespeichert ist. Wenn es der zweite Klick ist, setzen wir dies gleich der quadratischen Zweifarbe. Beide werden also in unserem Spiel enthüllt. Lass uns das versuchen. Erfrischen. Klicke auf die Farbe. Und Platz eins hat seinen Hintergrund eingestellt, dass er unseren Attributen entspricht. Die zweite, beide Farben sind jetzt richtig eingestellt. Sie werden feststellen, dass wir weitermachen und auf die restlichen Farben klicken können , obwohl wir uns nur zwei gleichzeitig damit befassen wollen. Aber damit werden wir uns in Zukunft befassen. Als Nächstes werden wir uns darum kümmern, was zu tun ist, wenn die Farben stark sind oder wenn sie unterschiedlich sind. 9. Treffer überprüfen: Wie der Titel dieses Videos schon sagt, besteht das Ziel nun darin, zu warten bis zwei Quadrate ausgewählt wurden. Und dann können wir überprüfen, ob sie übereinstimmen I, II, sie haben beide die gleichen Farbattribute. Dies wird auf die angeklickte Funktion r im Quadrat reduziert. Und innerhalb dieser Funktion wird der L-Abschnitt ausgeführt, wenn zwei Quadrate ausgewählt sind. Also klicke ich auf count ist gleich zwei, dann wird der sonst Code ausgeführt. Hier können Sie also überprüfen, ob es eine Übereinstimmung gibt, und wir können den Code direkt hier hinzufügen. Stattdessen werde ich eine separate Funktion erstellen. Diese Funktion wird also Scheckübereinstimmung genannt, die jetzt erstellt wird. Gehen Sie also direkt unter unsere Quadratklick-Funktion und erstellen Sie diese Funktion. Überprüfen Sie die Übereinstimmung. Wie können wir also überprüfen ob beide übereinstimmen? Nun, die Art und Weise, dies zu tun, besteht darin, auf Platz eins und Quadrat zuzugreifen , genau wie wir es oben getan haben. Wir verwenden die Methode get attribute , um den Wert jeder einzelnen Farbe abzudecken. Wir können dann überprüfen, ob diese gleich sind , und sie in einer Variablen speichern. So wie wir es hier gemacht haben. X ist unsere Variable, die bei Quadrat eins genannt wird, erhält die Attribute, die Datenfarbe genannt werden. Und wir werden überprüfen, ob das gleich ist , indem wir Quadrat zwei verwenden. Das wird also beide für Attribute vergleichen und es wird ein boolescher Wert von true oder false zurückgegeben , den wir in einer Variablen namens match speichern können. Dann bestimmt der Wert von match , welche der nächsten Funktionen wir ausführen werden. Wir werden also zwei neue Funktionen erstellen. Der erste, wenn es nicht viel gibt, dann wird dieser sein, wenn es eine Übereinstimmung gibt. Um festzustellen, welche ausgeführt werden soll, können wir eine if-Anweisung einfügen. Hier drinnen werden wir prüfen, ob es nicht viel gibt, was läuft, wenn das gleich falsch ist, dann führen wir unsere Matching-Funktion aus und wir könnten wissen, dass viel anderes unsere zweite Funktion ausführen wird. Und in der Tat nennen wir das viel nur Veränderungen. Eins ist viel. wird also nur eine dieser Funktionen gleichzeitig ausgeführt. Und wir werden in den kommenden Videos auf den Großteil dieser Inhalte zurückkommen . Im Moment müssen diese beiden jedoch auf die Anzahl der Klicks zurückgesetzt werden. Da beide nur ausgeführt werden , wenn wir beim zweiten Klick sind. Das bedeutet also, dass wir zwei Quadrate ausgewählt haben. Also müssen wir den Klickzähler zurücksetzen, zurück auf 0 sein. Also lass uns das zuerst machen. Die Anzahl der Klicks ist gleich 0 und das Gleiche ist eine Übereinstimmung. Alles, was wir innerhalb dieser beiden Funktionen tun werden , ist, in ein Konsolenprotokoll zu schreiben, um zu überprüfen, ob dies funktioniert. Der erste ohne Übereinstimmung. Der zweite ist ein Match. Okay, testen wir das mal aus. Aktualisieren Sie die Seite in der Konsole. Zunächst klicken wir auf zwei beliebige Quadrate. Wir können deutlich an der Farbe dieser erkennen und nicht an einer Übereinstimmung. Und die richtige Funktion ist gelaufen. Also werden wir versuchen, eine Übereinstimmung zu erstellen. Dieser ist immer noch nicht viel. Aber wenn Sie auf unsere beiden Grüns klicken, wird dieses ein Match sein. 10. Umgang mit einem Spiel: Im Moment können wir auf eine beliebige Anzahl von Quadraten klicken und die Farben werden dann aufgedeckt. Wir müssen dies darauf beschränken, nur mit zwei Quadraten gleichzeitig zu arbeiten . Wir sehen also nicht, was wir derzeit haben. Zuvor haben wir zwei Funktionen erstellt, nämlich die Übereinstimmung und die Bedingungen für die Übereinstimmung mit der Notiz zu behandeln . Wir erhöhen lediglich den Klickzähler jeden einzelnen und erstellen zu Testzwecken ein Konsolenprotokoll. Jetzt müssen Sie nur noch diese Funktionen erweitern , um mit diesen Ergebnissen umzugehen, beginnend mit der Funktion „ Notenübereinstimmung“. Wenn es also zum Beispiel nicht viel zu tun gibt, wollen wir nur zwei unserer Quadrate auswählen und wenn sie nicht viel sind, müssen wir sie dann wieder umdrehen , um die hintergrundfarben. Um dies zu tun, greifen wir direkt über unseren Klickzahlen auf unsere beiden Quadrate zu. Löschen Sie die Eigenschaft style, in der wir den Hintergrund so festlegen, dass einer leeren Zeichenfolge entspricht. Wir werden dasselbe für die Quadratzahl tun um dies zu speichern, und probieren wir es aus. Wir wussten nicht viel. Klicken Sie also auf eine dieser Optionen. Und wir können sehen, sobald du kein Match hast, ist das hier also in Ordnung. Wir haben kein Spiel wie dieses. Die zweite verschwindet so schnell, dass wir nicht sehen können, welche Farbe sie hatte. Das ist nicht gut für unser Spiel, denn die Idee ist, dass die Benutzer auf diese Farben klicken können. Ich kann mich nicht erinnern , welcher welcher war. Um die Dinge zu verlangsamen, können wir kurz vor dem Aufruf keine Übereinstimmungsfunktion tun . Wir können diesen Funktionsaufruf mit einem Timeout umschließen. Lass uns das rausschneiden. Platzieren Sie ein JavaScript-setTimeout, das eine Funktion ausführt. Diese durch Komma getrennte Funktion wird nach einer bestimmten Zeit ausgeführt. Das ist also in Millisekunden. 500 Millisekunden sind also eine halbe Sekunde. Sie dann innerhalb des Funktionskörpers Fügen Sie dann innerhalb des Funktionskörpers wieder in unseren Funktionsaufruf ein. Laden Sie den Browser neu und probieren wir das aus. Entscheiden wir uns für den Zahler , der nicht passt. Wir können sehen, dass beide Farben aufgedeckt werden, und dann warten sie 2,5, bevor sie entfernt werden. Dadurch kann sich der Spieler merken , welche Farbe ausgewählt wurde, damit er sie in Zukunft verwenden kann. So können wir dann anfangen, unser nächstes Quadratpaar zu vergleichen. Was wir dann direkt über dem Klickzähler tun werden, ist auch das erste Quadrat zurückzusetzen. Setzt die Variable auf einen String oder eher einen leeren String zurück. Und wir machen dasselbe für Platz zwei. Wir haben eine leere Leinwand gegeben, mit der wir für unseren nächsten Versuch arbeiten können. Das ist also alles, was wir für unsere No Match-Funktion benötigen. Also runter zu der viel Funktion, die ausgeführt wird, wenn zwei Farben gleich sind. Was machen wir also, wenn es eine Übereinstimmung gibt wir bereits in der Hintergrundfarbe festgelegt haben. Wir werden also diesen Rahmen entfernen , den wir bereits haben, und auch den Event-Listener entfernen, damit er den Rest des Spiels nicht beeinträchtigt. Knapp über der Klickzahl. Schnapp dir den quadratischen. Die Stil-Eigenschaft. Nun, wir setzen die Grenze so, dass sie gleich „non“ ist. Kopiere das und füge es ein. Mach das gleiche Quadrat mit. Als Nächstes entfernen wir den Event-Listener, sodass wir nicht mehr mit der rechten Maustaste auf diese Felder klicken können, was den Rest des Spiels beeinträchtigt. Quadrat eins. Dieses Mal rufen wir remove event listener auf. Und dies muss dieselben Parameter annehmen wie eines der ersten Setups, dieser Event-Listener. Wenn wir also zum Event-Listener-Abschnitt gehen , der sich gerade hier befindet, müssen wir ihn in genau denselben Parametern übergeben. Dazu gehört also der Typ des Ereignis-Listeners, auf den gerade geklickt wird, und auch die Funktion, die aufgerufen werden soll. Ich füge das ein. Kopiere Quadrat zwei und füge es ein. Versuchen wir nun, das Problem zu lösen, indem wir ein viel dunkelblaues Orange finden . Wir haben zwei Orangen. Also klicken wir auf dieses, dieses Formular, wir haben eine Übereinstimmung. Diese bleiben im Spiel und wir können sehen, dass wir, wenn wir genau hinschauen, nicht diese Grenze um jeden einzelnen herum haben. Klicken wir auf eines dieser aufgedeckten Quadrate. Klicken Sie nun auf eine zweite. Da der Event-Listener aus dem ersten entfernt wurde , müssen wir immer noch auf ein anderes Quadrat klicken um ein Paar zu bilden. Die Dinge beginnen jetzt so zu funktionieren, wie sie sollten, aber es gibt einige kleine Probleme, die wir lösen müssen. Eine davon hat es mit zweimaligem Klicken auf dasselbe Quadrat zu tun . Wenn wir das machen und zweimal auf dasselbe Quadrat klicken würden , genau wie wir es hier getan haben. Wir können sehen, dass das Board entfernt wurde und dies wird als Übereinstimmung angesehen da offensichtlich beide das gleiche Datenfarbattribut haben . Um das zu beheben, gehen wir rauf zu unserem Platz. Das wird also jedes Mal ausgeführt, wenn ich auf eines unserer Quadrate im Raster klicke eines unserer Quadrate im Raster Wir können in unsere Funktion springen und eine if-Anweisung hinzufügen. Und diese if-Anweisung wird zuerst prüfen, ob die quadratische Eins gleich dieser ist. Das bedeutet also, wenn wir bereits auf ein Quadrat geklickt haben, entspricht dies Quadrat eins. Und wenn wir dann wieder auf ein zweites Quadrat klicken, entspricht dies dem Alpha-Quadrat, wenn ich auf dasselbe klicke. Wenn das der Fall ist. Wir werden dann aus dieser Funktion zurückkehren bevor wir weiteren Code ausführen. Ein weiteres Problem ist, dass wir auch schnell auf Mehr als zwei Quadrate klicken können. Also springen klicken Sie auf 123. Und bevor die 2,5. Verzögerung abgeschlossen ist, klicken Sie auf Mehr als zwei Quadrate. Dafür werden wir also etwas sehr Ähnliches tun, das aus dieser Funktion zurückkehrt, wenn etwas wahr ist. Aber dieses Mal machen wir es knapp unter unserer Klickzahl. Wir tun das, denn wenn wir derzeit zwei Quadrate angeklickt haben, entspricht die angeklickte Karte zwei. Daher können wir eine if-Anweisung einfügen, die überprüft, ob die Anzahl der Klicks größer als der Wert von zwei ist, dann werden wir erneut zurückkehren und die Funktionsstörung ändern. Lass uns das testen. Aktualisieren Sie, wenn Sie mehrmals auf dasselbe Quadrat klicken mehrmals auf dasselbe Quadrat und es hat keine Wirkung. Wir können schnell auf Mehr als zwei Quadrate klicken. Mehr als zwei Klicks werden ignoriert. 11. Die Punktzahl & Ende Des Spiels: Das Ziel dieses Videos ist es nun, den Überblick über die Partitur zu behalten und diese p-Elemente zu verwenden , die wir in einem früheren Video erstellt haben. Wir werden dies jedes Mal aktualisieren, wenn wir ein Spiel haben, es auch ausblenden, wenn wir keinen aktuellen Spielstand haben. Sobald das Spiel beendet ist und alle Felder mit einem Handle abgeglichen sind , kann der Benutzer das Spiel zurücksetzen, um von vorne zu beginnen. Um in unserem Skript von vorne zu beginnen, müssen wir eine neue Variable erstellen, um den Spielstand im Auge zu behalten. Werde Lektionen benutzen. Wir können dies aktualisieren und setzen den Punktestand zunächst auf 0. Wie bereits erwähnt, möchten wir nicht, dass dies vor Spielbeginn als 0 angezeigt wird. Wir können dies also verbergen, indem wir auf das Dokument zugreifen. Selektor abfragen. Denken Sie daran, das sind p-Elemente , die die Partitur anzeigen, diese Vorstellung von Punktzahl haben. Also können wir uns das als Schnur schnappen. Stellen Sie den Stil Punktsichtbarkeit auf ausgeblendet ein. Der Grund, warum wir die Sichtbarkeit und nicht den Anzeigetyp umschalten die Sichtbarkeit und nicht den , ist , dass wir diesen Raum auch in unserem Code behalten möchten . Wenn wir die Anzeige auf none setzen, wird dieses Element aus dem Browser entfernt und alle Spiele, die ganz oben stehen, hochgefahren. Und wenn wir dies wieder einsetzen , um die Punktzahl anzuzeigen, würde dies das gesamte Spiel nach unten drücken und es sehr nervös aussehen lassen. Ok, jetzt müssen wir die Score-Variable aktualisieren und diese auch wieder einsetzen. Wir haben unser erstes Spiel. Also geh runter zur Match-Funktion, die gerade hier ist. Stefan soll score plus plus plus erhöht sich um den Wert eins nennen . Wir verwenden die Punktabfrage-Auswahl für Dokumente, um unsere Scott-Elemente zu erfassen , und wir setzen den inneren Text so, dass er unserer Punktzahl entspricht. Das ist auch Kopieren und Einfügen dieser Zeile. Schnapp dir noch einmal alle p-Elemente. Dieses Mal setzen wir den Stil Punktsichtbarkeit auf sichtbar. Dadurch wird die Eigenschaft hidden überschrieben , die wir oben gesetzt haben. Also speichern wir das und probieren es aus. Wenn wir das Spiel zum ersten Mal neu laden, wurde der Spielstand zunächst entfernt, da wir die Sichtbarkeit auf versteckt festgelegt haben . Wenn wir uns jetzt aktualisieren, versuchen wir, viel zu bekommen. Ich habe zwei Nelken. Ich werde punkten ist jetzt aktualisiert. Als Nächstes erstellen wir eine neue Funktion , die überprüft, ob das Spiel beendet ist. Und das bedeutet, dass alle Paare abgeglichen wurden. Also für diese neue Funktion, die check game ended heißt, werden wir diese Funktion jedes Mal ausführen , wenn wir ein passendes Paar haben. Wir müssen also genau wissen, warum unser Spiel vorbei ist. Das wird also unsere Anzahl von Quadraten sein, die auf 16 gesetzt ist. Und dann teile das durch zwei. Da wir diese Beeinträchtigungen abgleichen. Speichern Sie dies in einer Variablen oder Konstanten namens target. Dieses Ergebnis ist also effektiv acht. Wir müssen dann eine zweite Konstante erstellen, die ein boolescher Wert namens GameOver sein wird. Wir können den JavaScript-Bedingungsoperator verwenden. Wir prüfen also, ob die Punktzahl gleich oder über dem Ziel liegt. Stell die Frage. Wenn dies zutrifft, ist GameOver gleich true. Also, wenn die Punktzahl gleich acht ist, wird im Grunde true zurückgegeben. Wenn nicht, speichern wir den Wert false. Wir können dann eine if-Anweisung ausführen , um zu überprüfen, ob game over gleich true ist , und dann Code darin ausführen. In dieser if-Anweisung wird also ein Spiel zurückgesetzt, das diese Wiederspielen-Schaltfläche anzeigt. Aktuell haben wir es noch nicht versteckt. Wir werden also gleich darauf zurückkommen. Jetzt führen wir unsere Funktion innerhalb der Scheckübereinstimmungsfunktion aus. Also überprüfe viel. Dies wird jedes Mal ausgeführt, wenn wir ein Quadratpaar ausgewählt haben. Und wir wollen das nur überprüfen , wenn wir eine Übereinstimmung haben. Nachdem wir überprüft haben, ob es eine Übereinstimmung gibt, wird diese Funktion ausgeführt. Wie bereits erwähnt, wird dies, wenn dies zutrifft, unsere Wiedergabe-Schaltfläche auslösen. Also müssen wir das zuerst vor Ende des Spiels verstecken. Lass uns ganz nach oben springen. Schnapp dir das, installiere es innerhalb einer Konstante namens „ Play Again“ -Taste. Ich werde das mit Dokumenten Punkt Query Selector, String, packen. Wenn wir auf unsere Indexseite gehen, können wir sehen, dass diese keine Klassen oder IDs hat. Wir können dies also einfach anhand des Tag-Namens von button erfassen. Wird auf diese Variable zugreifen, wird der Stil Punktsichtbarkeit gleich a1 setzen. Das bedeutet, dass wir die Schaltfläche nicht sehen, sobald wir die Seite aktualisieren . Sobald das Spiel vorbei ist, müssen wir das Gegenteil davon tun , indem wir die Sichtbarkeit auf sichtbar setzen. Aber kurz bevor wir das tun, greifen wir auch auf unsere Wiedergabe-Schaltfläche zu. Wir fügen einen Event-Listener hinzu , der jetzt für einen Klick auflistet , und führen eine Funktion namens play erneut aus. Okay, um die Dinge abzurunden, werden wir unseren Button so einstellen, dass er sichtbar ist , sobald das Spiel vorbei ist. Und wird auch diese Wiedergabefunktion erstellen. Fangen wir mit der Sichtbarkeit an. Kehren Sie zu unserer Funktion „ Spiel beendet überprüfen“ zurück. Wenn das Spiel also vorbei ist, wenn dies gleich true ist, wird auf die Schaltfläche „Alle Wiedergeben“ zugegriffen und das Gegenteil bewirkt, indem Sie die Stilpunktsichtbarkeit auf sichtbar setzen. Schließlich verschieben wir diesen auskommentierten Code und erstellen unsere Funktion die jedes Mal ausgeführt wird, wenn ich auf die Schaltfläche klicke. Wir haben den Event-Listener dafür hinzugefügt und nennen dieses Spiel erneut. Der Code dafür wird ziemlich einfach sein. Alles, was wir tun werden, ist die Seite neu zu laden, indem wir die Position des Fensterpunkts auswählen die Position des Fensterpunkts und dann die Methode zum erneuten Laden aufrufen. Speichern Sie dies und aktualisieren Sie die Seite. Was wir jetzt tun müssen, ist das Spiel zu beenden indem wir all diese Quadrate zusammenbringen. Das Grau, Grün, Hellblau . Da haben wir's. Sobald das Spiel mit der NCD-Wiedergabe-Schaltfläche endet , klicken Sie darauf. Dies ruft die Reload-Methode auf und startet dann das Spiel neu. 12. Animationen: Um das Projekt abzuschließen, können wir jetzt einige Animationseffekte hinzufügen. Es wird eine Shake-Animation geben wenn das Spiel falsch ist. Und für eine korrekte Übereinstimmung fügen wir einen Pop-Effekt hinzu. Gehen wir dazu zu unserem Stylesheet über und wir können unsere Animationen dort hinzufügen. Ganz unten werden wir also zuerst zwei verschiedene Klassen einrichten , die wir mit JavaScript einfügen können. Die erste ist, wenn die Übereinstimmung falsch ist, möchten Sie beide Quadrate ein wenig schütteln. Dafür fügen wir einen Animationseffekt hinzu. Wir nennen es einen Shake. Und wir werden das in nur einer Sekunde einrichten. Ich werde das über 0,1 Sekunden erreichen. Es wird also sehr schnell geschüttelt, und dann werden die Quadrate wieder normal. Wenn die Übereinstimmung stimmt. Wir machen einen Pop-Effekt. Genau wie oben. Wir werden unsere Animation erstellen , die POP heißen wird, wird dies ein bisschen länger machen. Dies wird über 2,5 sein. Also müssen wir sowohl für die Form als auch für diesen Pop die Keyframes einrichten. Also machen wir das mit „Keyframes hinzufügen“. Ich gebe den Namen Shake weiter. In diesen Schlüsselbildern wollen wir also die verschiedenen Stufen der Animation einrichten . Wir können dies also von Anfang bis Ende einrichten, oder wir können im Laufe der Zeit auch verschiedene Stufen hinzufügen. So kann die Animation beispielsweise bei 0% ein bestimmter Zustand sein, dann fünfundzwanzig Prozent, fünfzig 75% Prozent und schließlich 100 Prozent. Wenn Sie diese Schlüsselbilder noch nicht verwendet haben, müssen wir innerhalb dieser geschweiften Klammern nur eine unserer CSS-Eigenschaften hinzufügen. Und wir können ändern, das sind verschiedene Staaten. Also könnten wir zum Beispiel sagen, dass eine Farbe eine Farbe innerhalb von hier ist. Sag einfach Farbe Rot. Und dann könnten wir dies bei fünfundzwanzig Prozent in blau ändern. Und das funktioniert für jede unserer CSS-Eigenschaften. Aber für unseren Fall, um den Shake-Effekt zu erzielen oder zu tun, ist die Rotation zu verwenden , die die Elemente um einen bestimmten Grad dreht . Dazu wird eine Transformation namens Rotate eingerichtet. Und da dies der Anfang ist, setzen wir dies auf 0 Grad. Kopieren wir diesen Abschnitt. Fügen Sie das zu fünfundzwanzig Prozent ein. Bei diesen negativen drei Graden halbe 50 Prozent werden halbe 50 Prozent dies wieder in die Mitte zurückführen. Dies dreht sich negativ und dann zurück in die Mitte. drei Vierteln fügen wir dies als positiven Wert für freie Abschlüsse hinzu. Und ganz am Ende setzen wir den Platz wieder ein. All dies wird also sehr schnell geschehen , da wir dies über eine Dauer von 0,1 Sekunden festgelegt haben . Wir drehen uns also schnell nach links und rechts und platzieren dann ein Quadrat bei 0 Grad wieder in der Mitte. Der nächste, der Pop-Effekt. Wir werden eine ähnliche Sache machen. Wir müssen die Keyframes mit der Keyframe-Regel einrichten. Dieser wurde Pop genannt. Also 0%. Für diesen braucht es nicht so viele Stufen. Wir werden nur die Elemente vergrößern , um sie ein bisschen größer zu machen, und sie dann auf die normale Größe zurückskalieren. Wir brauchen also drei Stufen, den Anfang, die Mitte und auch das Ende. Wenn dies also auch die Transformation verwendet, wird diese Skala verwenden. Wenn wir also scale verwenden, ist der Wert von eins eine unregelmäßige Größe des Elements. Das ist also quasi die Ausgangsposition. Kopieren wir das. Und wir wollen das zu einem ziemlich subtilen Effekt machen. Wir können es doppelt so groß wie dreimal so groß wie alles machen , was Sie möchten. Aber alles, was ich tun werde, ist einen kleinen subtilen Pop zu machen, der das Element ein bisschen größer macht und dann wieder in seine normale Größe zurückversetzt. Der Wert, für den ich mich entscheiden möchte, ist 1,06. Dann, am Ende der Transformation, wieder auf die normale Größe. Dies alles wird über die Dauer von 2.5 geschehen. Also zurück zu unserem Drehbuch. Behandeln Sie zunächst, ob es eine Übereinstimmung gibt Wir fügen die Pop-Klasse der Funktion hinzu. Nur um, ja, und dann müssen wir hier nur noch die Klasse Pop hinzufügen. Also fügen wir das hinzu. Gleich nachdem wir das Sichtbarkeitszugriffsquadrat eine Variable gesetzt haben. Die Klassenliste. Wir verwenden die Funktion add, um unsere Pop-Klasse hinzuzufügen, kopieren und fügen und ändern sie dann in Quadratwurzel zwei. Also werde ich die Pop-Klasse hinzugefügt und wir müssen auch die Shape-Klasse hinzufügen. Um dies zu tun, gehen wir zu unserer Funktion, in der wir die Übereinstimmung überprüfen. Denken Sie daran, dass wir hier unsere beiden Abschnitte haben. Im ersten Fall prüfen wir, ob es keine Übereinstimmung gibt. Wenn es nicht viel gibt. Kurz vor dem Timeout können wir auf unseren Platz eins zugreifen. Punkt-Klassenliste. Punkt hinzufügen fügt den Shake-Effekt hinzu. Dupliziere dieses Quadrat zwei. Also hier fügen wir den Shake-Effekt hinzu. Wir warten dann 2.5 rufen die No Match-Funktion auf. Und dann können wir innerhalb der Match-Funktion diese Shake-Effekte entfernen. Gehen Sie also zur Funktion Keine Übereinstimmung. Okay, das ist in der Figur. Wir entfernen also die Formklasse , da die Quadrate mehrfach falsch sein können. Hinzufügen und Entfernen der Klasse löst also bei jedem Versuch den Shake-Effekt aus. Also lass uns diese seltsame quadratische Ein-Punkt-Klassenliste machen. Aber dieses Mal rufen wir die Funktion remove auf. Jacque wird dasselbe auch für Platz zwei tun. Dies sollte jetzt hinzugefügt und entfernt werden. Wenn diese Klasse also nur hinzugefügt und nie entfernt wurde, wird sie immer nur einmal aufgerufen. Wenn wir zum Beispiel ein falsches Ergebnis wie dieses hätten, würde das nächste Mal, wenn wir versuchen, die falsche Übereinstimmung zu erzielen, nicht den Shake-Effekt erzielen. Okay, stellen Sie also sicher, dass alle Dateien gespeichert sind. Aktualisieren wir die Seite und wir beginnen. Dies ist eine falsche Übereinstimmung. Wir können also sehen, dass wir diesen Shake-Effekt haben , der sehr schnell ist und über 0,1 Sekunden dauert. Lassen Sie uns den Pop-Effekt ausprobieren, indem wir ein Match erstellen. Die Grünen. Wenn wir jetzt eine Übereinstimmung haben, erhalten wir diesen Pop-Effekt, der die Elemente ein bisschen größer macht und dann zur normalen Größe zurückkehrt. 13. Folge mir auf Skillshare!: Herzlichen Glückwunsch von mir zum Ende dieses Kurses. Ich hoffe es hat dir wirklich gefallen und du hast etwas Wissen daraus gewonnen. Wenn Ihnen dieser Kurs gefallen hat, schauen Sie sich den Rest meiner Kurse hier auf Skillshare an und folgen Sie mir auch um Updates zu erhalten und neue Kurse informiert zu werden, sobald sie verfügbar sind. Nochmals vielen Dank, viel Glück und hoffentlich sehen wir uns in einer zukünftigen Klasse wieder.