Tic Tac Toe: eine spielerische Einführung in React

1. Einführung: Hallo, ich bin Hunor, und heute werde ich dir beibringen, wie man ein Tic-Tac-Toe Spiel mit React baut. Wenn du React noch nicht benutzt hast, mach dir keine Sorgen, wir werden alle Grundlagen von React abdecken, während wir dieses Spiel aufbauen. Zuerst werde ich darüber sprechen, wie man dieses Spiel in kleinere Stücke zerlegt, in Komponenten, und wie man diese Komponenten verbindet. Dann werden wir abdecken, wie man dieses Spiel interaktiv macht, was ist der Zustand, und wie man den Gewinner am Ende des Spiels erkennt. Das einzige, was Sie brauchen, ist einige frühere HTML-, CSS- und JavaScript-Kenntnisse, und nach diesem Kurs werden Sie in der Lage sein, ein einfaches Spiel oder eine Website mit React zu erstellen. 2. Aufgliedern: Wir werden unsere Anwendung in React erstellen. React ist als komponentenbasierte Bibliothek. Zunächst müssen wir unsere Anwendung in Komponenten aufschlüsseln. Aber was ist eine Komponente und wie zerlegt man eine App? Eine Komponente ist wie eine Funktion. Wenn Sie darüber nachdenken, schreiben Sie hauptsächlich Funktionen aus zwei Gründen. Eine besteht darin, Ihre Anwendungslogik in kleinere aussagekräftige Bits zu zerlegen. Eine Funktion ist im Grunde ein Stück Code mit einem Namen. Wenn jemand diesen Namen liest, würde er hoffentlich wissen oder zumindest eine gute Vorstellung davon haben, was die Funktion tut. Der zweite Grund, eine Funktion zu schreiben, besteht darin, Wiederholungen zu vermeiden. Wenn Sie die gleichen Zeilen immer und immer wieder schreiben, dann werden Sie wahrscheinlich eine Funktion dafür schreiben und sie an mehreren Stellen aufrufen , anstatt dieselben Zeilen zu wiederholen. Wir werden das Gleiche mit Komponenten machen. Aber bevor wir dorthin gelangen , benötigen wir zuerst eine erste Komponente, die in HTML injiziert wird und die als Wurzel für den Rest der Anwendung dient. In unserem Fall wird dies die TicTacToe-Komponente selbst sein. Technisch gesehen können wir hier wirklich anhalten. Es ist überhaupt nicht erforderlich, mehrere Komponenten zu haben. Aber normalerweise, wenn Sie versuchen, alle Ihre Logik in einer Komponente zusammen mit allen Layoutinformationen zu haben, wird es wahrscheinlich zu lang und nicht wartbar sein. Lassen Sie uns also anfangen, unsere Anwendung zu brechen, indem wir Wiederholungen vermeiden. Es gibt zwei sehr offensichtlich wiederholende Dinge in dieser App, die Kreuze und die Kreise. Es gibt auch eine dritte, die nicht so visuell ist, also ist es leicht zu verpassen. Aber wenn man etwas näher hinschaut, dann sieht man, dass dieses Gitter aus neun Quadraten besteht . Und die Quadrate haben nicht viel zu zeigen, aber Sie werden sehen, dass ihr Verhalten das gleiche ist. Sie werden also auch ein wirklich guter Kandidat für eine Komponente sein. Sobald wir mit Wiederholung fertig sind, können wir nach Teilen der Anwendung suchen, die mehr oder weniger unabhängig vom Rest der Anwendung sind . In unserem Fall, wenn Sie durch dieses Spiel spielen, dann landen Sie auf einem Ergebnisbildschirm. Natürlich ist dieser Ergebnisbildschirm nicht völlig unabhängig vom Rest des Spiels, da er wissen muss, ob das Spiel beendet ist, wer das Spiel gewonnenhat wer das Spiel gewonnen und wie man das Spiel zurücksetzt. Aber abgesehen davon, muss es nicht jedes Detail kennen. Es muss nicht wissen, wie der Status des zweiten Quadrates in der dritten Reihe ist. Auf diese Weise ist es unabhängig. Es könnte als eine Funktion mit Eigenschaften interpretiert werden. Dies werden also unsere Komponenten sein, aber natürlich ist dies nicht der einzige Weg, um eine Anwendung aufzuschlüsseln. Eine Möglichkeit zu überprüfen, ob wir gute Arbeit geleistet haben, besteht darin, die Komponentennamen zu überprüfen. Wenn die Komponentennamen aussagekräftig sind und Sie mehr oder weniger erraten können , was die Komponente tut oder wie sie aussieht, dann besteht eine gute Chance, dass unser Zusammenbruch gut ist. 3. Unsere ersten Komponenten schreiben: Fangen wir an, Dinge zu erschaffen. Für dieses Tutorial werden wir CodePen verwenden, die ein Web-Editor und Social-Media-Plattform ist. Wenn Sie etwas auf CodePen erstellen, wird es öffentlich sein, damit andere Leute es sehen können, es kommentieren können, es mögen können, und wenn es wirklich gut ist und die Redakteure der Websites es sehen, dann markieren sie es vielleicht und Sie können sehen Sie sich auf der Titelseite. Wenn Sie CodePen noch nicht verwendet haben, können Sie sich einfach schnell mit Ihrem Twitter, GitHub oder Facebook Konto anmelden. Sobald du in bist, in der oberen linken Ecke, wirst du „Create Pen“ sehen , und das führt uns zum Webeditor. Dies ist also Ihr Editor hier, Sie können HTML, CSS und JavaScript bearbeiten und das Tolle daran ist, wenn Sie etwas bearbeiten, dann wird das Ergebnis sofort im Ergebnisbildschirm angezeigt. Wenn Sie einige einfache primäre Kopfzeile und Absatz hinzufügen, dann sehen Sie das Ergebnis im Ergebnisfenster. Wir werden React verwenden und React ist nicht Teil des Standard-JavaScript. Es ist eine externe Bibliothek. Zum Glück können Sie in CodePen einfach externe Bibliotheken zu einem Projekt hinzufügen. Gehen Sie zu Einstellungen, wählen Sie das JavaScript-Bedienfeld aus, und suchen Sie nach React. Sobald Sie React hinzugefügt haben, müssen wir auch etwas namens ReactDom hinzufügen und hier müssen Sie darauf achten, dass die Versionsnummer von React und Versionsnummer von ReactDom übereinstimmen müssen. Wenn das aus irgendwelchen Gründen nicht der Fall ist, dann schauen Sie sich den Kommentar unter diesem Video an. Wir müssen hier noch eine Sache setzen. Wir müssen einen JavaScript-Präprozessor setzen und das wird Babel in unserem Fall sein. Was Babel angeht, warum brauchen wir es und was ReactDom ist. Ich werde es nur in ein bisschen erklären, aber im Moment, lassen Sie uns einfach speichern und wir sind bereit zu gehen. Lassen Sie uns etwas JavaScript schreiben und beginnen Sie mit der Erstellung unserer allerersten Komponente. Und das mag überraschend sein, aber eine Komponente ist im Grunde eine Funktion. Als ich zuvor sagte, dass die Art und Weise, wie Sie eine Anwendung auf eine Komponente aufteilen , die gleiche ist wie die Aufschlüsselung einer Anwendungslogik in Funktionen. Nun, Komponenten sind näher an Funktionen, als Sie vielleicht gedacht haben. Eine Komponente ist eine spezielle Funktion, die etwas zurückgibt , das wirklich wie HTML aussieht. Aber das ist immer noch kein HTML, wir sind immer noch in JavaScript und Sie fragen sich vielleicht, wie das funktioniert? Ich meine, das ist kein JavaScript. Sie können HTML-Tags in JavaScript nicht hinzufügen, und die Antwort auf diese Frage ist, dass wir hier tatsächlich kein JavaScript verwenden. Hierbei handelt es sich nicht um JavaScript. Zumindest nicht reines JavaScript. Denken Sie daran, dass wir Babel als Präprozessor für JavaScript gesetzt haben. Babel transpilt diesen Code in korrektes JavaScript. Im Hintergrund haben wir korrektes JavaScript, aber wir bearbeiten eine leicht modifizierte Version von JavaScript, die uns erlaubt, HTML-Tags zu schreiben. Oder zumindest etwas, das wirklich wie HTML-Tags aussieht. Wir haben eine React-Komponente, aber im Ergebnisbildschirm sehen wir sie immer noch nicht. Dies ist wie eine Funktion zu haben, die nie aufgerufen wurde. Wir haben eine Funktion, die ein Stück HTML erzeugt, aber wir sagen nicht, wohin dieser generierte HTML gehören soll und es wird nicht automatisch zur Wurzel von HTML hinzugefügt. Wir müssen einen Einstiegspunkt in HTML definieren. Fügen wir einfach ein einfaches div mit einer ID hinzu, und ich werde „app“ als ID verwenden, aber Sie können einfach einen anderen Namen schreiben, wenn Sie möchten. In JavaScript werden wir ReactDom verwenden. ReactDom ist eine wirklich einfache Utility-Bibliothek und ihr einziger Zweck ist es, den HTML-Code zu suchen, diese ID zu finden und seinen Inhalt durch unsere Komponente zu ersetzen. Wenn Sie alles richtig gemacht haben, dann haben wir endlich eine React-Komponente in unserer Website und das ist ein wirklich toller Start. Bevor wir mit dem nächsten Abschnitt übergehen, lassen Sie uns einfach schnell das Skelett der anderen Komponenten hinzufügen, auf die wir uns geeinigt haben. Fügen wir einfach eine quadratische Komponente, eine Kreuzkomponente und die Circle-Komponente sowie die Ergebnisbildkomponenten hinzu. Diese Komponenten werden vorerst sehr einfache Komponenten sein. Sie geben nur ein Stück Text zurück und sie werden nicht mit unseren Root-Komponenten verbunden sein. Sie bleiben nur im Weltraum und tun überhaupt nichts, aber das ist unser Anwendungsskelett. Wir werden diese Komponenten in unseren nächsten Abschnitten verbinden. 4. Das Raster: In unseren vorangegangenen Lektionen haben wir unsere allerersten React-Komponenten geschrieben. Aber auf unserem Ergebnisbildschirm sehen wir immer noch nur „Hello from React“ in der oberen linken Ecke, und wir verwenden nicht einmal die meisten unserer React-Komponenten. In dieser Lektion werden wir viel über CSS sprechen, wie man Stil diese Komponenten hinzufügen und wie man sie verbindet, wie man die Square Komponente in die TictacToe-Komponente einbetten kann. Lassen Sie uns zunächst alles zentrieren. Im Moment befindet sich standardmäßig alles in der oberen linken Ecke. Und das ist ein Spiel, das ist keine normale Website, wir wollen alles zentrieren. Um alles zu zentrieren, gehen wir zu unserem Tag auf höchster Ebene und definieren einige CSS-Eigenschaften dafür. Die höchste Ebene im Moment ist unser div innerhalb des HTML, das der Einstiegspunkt der Anwendung ist. Es hat bereits eine ID, also lassen Sie uns das einfach innerhalb von CSS verwenden, und für die Zentrierung der Dinge werden wir CSS Flexbox verwenden. Wenn Sie CSS Flexbox noch nicht verwendet haben, ist es wirklich gut, um Dinge zu zentrieren und die Dinge gleichmäßig auszurichten. Im Moment werden wir es nur für die Zentrierung verwenden, und es hat einige wirklich seltsame Eigenschaftsnamen wie Rechtfertigungsinhalt und Align-Elemente. Es ist nicht so intuitiv, dass man Dinge horizontal ausrichten soll und man Dinge vertikal ausrichten kann, aber es funktioniert wirklich gut. Sobald wir es hinzugefügt haben, sollte alles in der Mitte des Bildschirms sein. Nun, alles im Moment ist nur ein Text, der sagt: „Hallo von React“, denn das ist alles, was die TicTacToe-Komponente produziert. Lasst uns das ändern. Ersetzen wir diesen Anfangstext durch neun Instanzen der Quadrat Komponente. Sie fragen sich vielleicht, wie Sie dies tun, weil TicTacToe-Komponente ein Stück HTML produziert, Square Komponente produziert auch ein Stück HTML, aber die Square Komponente selbst ist nur eine Funktion. Also machen wir Funktionsaufrufe, und rufen wir die Square Komponenten als Funktion auf? In React können Sie auf Komponenten verweisen, als ob es sich um benutzerdefinierte HTML-Tags handelte. wirklich praktisch ist, weil die Square-Komponente innerhalb der return-Anweisung einer TicTacToe-Komponente benötigt wird . Jetzt haben wir neun Quadrate in der TicTacToe-Komponente, aber sie erscheinen nicht als Raster. Um das zu beheben, werden wir einige CSS-Klasse für den Hauptcontainer der TicTacToe-Komponente zuweisen . Und das ist etwas, das sich etwas von HTML unterscheidet. Wie ich bereits sagte, ist das eigentlich kein HTML, es sieht einfach so aus. Dies wird JSX, JavaScript XML genannt , und es hat einige kleinere Unterschiede im Vergleich zu HTML. Einer von ihnen ist, dass Sie das Schlüsselwort class nicht verwenden können, da das Schlüsselwort class in JavaScript reserviert ist und einige sehr unterschiedliche Bedeutungen hat. Anstatt Klasse zu schreiben, schreiben wir ClassName. Um den Inhalt in einem Raster auszurichten, werden wir CSS-Raster verwenden. Wenn Sie noch kein CSS-Raster oder CSS Flexbox verwendet haben, gibt es einen Link unter diesem Video, der wirklich gut erklärt, wie sie funktionieren. Mit CSS-Gitter definieren wir, dass wir drei Spalten und drei Zeilen haben wollen, und wir wollen eine Lücke zwischen ihnen haben. Jetzt sieht es ein bisschen besser aus, aber die Quadrate sehen überhaupt nicht wie Quadrate aus. die gleiche Weise, wie wir eine Klasse für die TicTacToe-Komponente angefügt haben, lassen Sie uns eine quadratische Klasse für die Square Komponente anhängen, und lassen Sie uns einige CSS hinzufügen. Hier fixieren wir die Breite, und die Höhe der Komponente, so wird es wie ein Quadrat aussehen, und wir zentrieren auch den Inhalt des Quadrats auf die gleiche Weise wie wir zentriert die gesamte Anwendung, die CSS Flexbox. Jetzt haben wir unsere neun Quadrate in einem Raster, aber wir wollen eine Grenze zwischen ihnen haben. Leider können wir mit CSS-Gitter die Rahmenfarbe nicht festlegen. Wir werden hier einen kleinen Trick verwenden. Anstatt die Rahmenfarbe festzulegen, setzen wir die Hintergrundfarbe des gesamten Rasters setzen dann die Hintergrundfarbe der Quadrat Komponenten auf die Hintergrundfarbe der gesamten Anwendung. Auf diese Weise sieht es so aus, als hätten wir die Rahmenfarbe des Rasters festgelegt, obwohl wir es tatsächlich nicht getan haben. 5. Welcher Square was?: Wir haben unser schön aussehendes Raster, aber alle Quadrate im Inneren sehen gleich aus. Nur um zu klären, welches Quadrat welches ist, lassen Sie uns ihnen eine eindeutige ID geben. In React können Sie Komponenteninstanzen konfigurieren, indem Sie Requisiten an sie weitergeben. Eine Requisite ist so etwas wie ein Attribut zu einer Funktion. Wir werden sagen, dass es genau ein Attribut für unsere Komponentenfunktion ist. Lassen Sie uns ein positionsattribut für jede unserer Komponenteninstanzen festlegen. In React können Sie eine Eigenschaft auf die gleiche Weise übergeben wie Sie ein Attribut für ein HTML-Tag festlegen würden. Wir können Position gleich schreiben und wir geben auf „0". Wir werden hier nullbasierten Index verwenden, denn später, wenn wir einen richtigen Wert für die Quadrate angeben, werden wir auch nullbasierten Index verwenden. Wir können einen Wert auch auf eine etwas andere Art und Weise weitergeben. Anstatt hier doppelte Anführungszeichen zu verwenden, können wir auch geschweifte Klammern verwenden. Mit geschweiften Klammern wird hier Bindung genannt. Es ist eine viel leistungsfähigere Möglichkeit, einige Eigenschaften für untergeordnete Komponenten zu übergeben. Mit geschweiften Klammern öffnen wir im Grunde ein Fenster für JavaScript. Anfangs sind wir in JavaScript Land, aber dann mit JSX fangen wir an, etwas HTML zu schreiben. Aber was ist, wenn Sie in HTML zurück zu JavaScript wechseln möchten? Dann verwenden wir Bindung, mit geschweiften Klammern öffnen wir ein Fenster zu JavaScript, und was auch immer in diesen geschweiften Klammern ist, wird als JavaScript-Ausdruck ausgewertet und das Ergebnis davon wird als Eigenschaft übergeben. Im Moment nutzen wir nicht seine volle Macht, weil wir nur eine Nummer weitergeben. Aber wir könnten hier auch einfach eine mathematische Berechnung verwenden, wir könnten hier eine Funktion aufrufen, einen ternären Ausdruck haben... Alles, was ein gültiger JavaScript-Ausdruck ist, können wir hier verwenden. Es gibt auch einen kleinen Unterschied zwischen der Übergabe eines Wertes zwischen geschweiften Klammern und der Weitergabe eines Wertes zwischen doppelten Anführungszeichen. Wenn Sie eine Zahl zwischen doppelten Anführungszeichen übergeben, wird es ein Text sein, der als String interpretiert wird. Auf der anderen Seite, wenn Sie eine Zahl zwischen geschweiften Klammern übergeben, wird es eine Zahl bleiben. Gehen wir auf die andere Seite der Dinge und lassen Sie uns diese übergebene Eigenschaft in der Square Komponente verwenden . Wie gesagt, werden Eigenschaften in React-Komponenten als Attribut für die Komponentenfunktion weitergegeben. Aber anstatt das erste Attribut dieser Funktion einfach Position wird, das erste Attribut werden wir ein generisches Objekt für alle Eigenschaften der Komponente sein. Dies kann für Komponenten, die nur eine Eigenschaft haben, verwirrend sein. Beachten Sie, dass das erste Attribut immer noch ein Objekt sein wird, das gerade ein Attribut hat, die Position. Hier können wir das gesamte Requisiten Objekt fangen und sich auf das Positionsattribut von Requisiten Objekt beziehen, oder wir können dieses Requisiten Objekt sofort in der Funktionssignatur zerlegen. Wir haben jetzt dieses Positionsattribut, weitergegeben. Wie verwenden wir es? Grundsätzlich wollen wir erreichen, anstatt „Square“ zu zeigen, wollen wir die Positionsnummer innerhalb dieser Komponente zeigen. Was können wir in diesem Fall tun? Wir möchten eine JavaScript-Variable in JSX verwenden. Wir können das Gleiche wieder tun, was wir gerade zuvor mit der Weitergabe einer Variablen als Eigenschaft gemacht haben. Wir können Bindung verwenden. Auch hier verwenden wir geschweifte Klammern und innerhalb von geschweiften Klammern verwenden wir einfach die Positionsvariable. Nachdem wir all dies getan haben, sollten wir eine eindeutige ID in jedem Quadrat in unserem Gitter sehen. 6. Die Changing: In unserer vorherigen Lektion haben wir es geschafft, eine eindeutige ID für jedes Quadrat zu übergeben, aber innerhalb der Quadrate wollen wir eher Kreise auf Kreuzen basierend auf dem Fortschritt des Spiels haben. Das ist etwas, das dynamisch sein wird. Anfangs wird jedes Quadrat leer sein und sobald Sie darauf klicken, sollten sie einen Kreis oder ein Kreuz zeigen. In React alles, was dynamisch ist, sollte alles, was sich im Laufe der Zeit ändert, in einem Zustand definiert werden. Der Staat zusammen mit den Requisiten sind die beiden Hauptfaktoren, die eine Komponente formen, aber während die Requisiten von den Eltern weitergegeben werden , so dass sie außerhalb von der Komponente kommen, ist der Zustand eine interne Sache. Was ändert sich hier? Es gibt zwei wichtige Dinge, die sich im Laufe des Spiels ändern. In jedem Zug erhält ein Quadrat einen neuen Wert. Es bekommt einen Kreis oder ein Kreuz. Der Zustand der Quadrate ist definitiv etwas, das wir im Auge behalten müssen. Die andere Sache, die sich über das Spiel ändert, ist der Spieler. Nach jeder Umdrehung ändert sich von Kreis zu Kreuz oder von Kreuz zu Kreis. Das werden die beiden Hauptteile unseres Staates sein. Jetzt sollten wir besprechen, wo der Staat definiert werden soll. In Bezug auf den Spieler, ist es sinnvoll, es auf der obersten Ebene zu definieren , weil es nichts mit Quadraten oder Kreisen oder Kreuzen zu tun hat. Es ist der Zustand des ganzen Spiels. Aber was den Zustand der Quadrate anbelangt, könnte es logisch klingen, sie an den Quadraten zu definieren. Jedes Quadrat würde für seinen eigenen inneren Zustand verantwortlich sein. Sie würden wissen, ob sie leer sein sollten oder ob sie ein Kreuz oder einen Kreis enthalten sollten. Aber es gibt ein großes architektonisches Problem mit diesem hier. Die Quadrate werden ihren eigenen internen Zustand kennen, aber niemand würde den gesamten Zustand des Gitters kennen. Das liegt daran, wie die Kommunikation zwischen Komponenten in React funktioniert. React funktioniert von oben nach unten. Eine Komponente der obersten Ebene, wie die TicTacToe-Komponente, kann Eigenschaften an die untergeordneten Komponenten wiedie Square Komponente übergeben an die untergeordneten Komponenten wie , funktioniert aber nicht umgekehrt. Bei der Quadrat -Komponente können untergeordnete Elemente keine Eigenschaften an ihre übergeordneten Elemente weitergeben. Aus der untergeordneten Perspektive kann die Square-Komponente Zugriff auf den Status der TicTacToe-Komponente haben, da die TicTacToe-Komponente sie als Eigenschaft übergeben kann , aber sie funktioniert nicht umgekehrt. Die TicTacToe-Komponente kann nicht auf den Status der Square Komponente zugreifen , da sie von der Square Komponente einfach nicht weitergegeben werden kann. Wir werden sehen, dass es hier eine Problemumgehung gibt. Wir können Rückrufe verwenden, um bestimmte Fortschritte vom Kind an den Elternteil zu melden , aber das ist ein bisschen anders. Mit Requisiten übergebst du ein Grundstück. Sie stellen Ihren Kindern einige Ihrer Variablen zur Verfügung. Aber mit Callbacks sind es Funktionsaufrufe. Sie sind eher wie ein Ereignis. Es ist nicht so, als würden Sie Ihre Variablen teilen. Sobald wir herausgefunden haben, wie die Kommunikation zwischen Komponenten funktioniert und wie der Zustand und die Requisiten zusammenarbeiten, können wir wahrscheinlich zustimmen, dass, wenn Sie eine bestimmte Logik benötigen, die erkennt, ob das Spiel beendet ist und Ihnen mitteilt, welcher Spieler gewann das Spiel, dann müssen wir den Zustand jedes Quadrats an einem gemeinsamen Ort haben. Dies wird eine Ebene höher in der TicTacToe-Komponente sein. Jetzt sind wir uns einig, dass wir all unseren Zustand in der Top-Level-Komponente haben werden, und das ist ein ziemlich häufiges Muster. In der Regel sind die Komponenten der obersten Ebene die intelligenten Komponenten. Sie haben normalerweise die Logik und den Zustand, aber sie sind nicht so visuell, während auf der anderen Seite die unteren Komponenten in der Regel alle ihre Werte wahre Requisiten erhalten und sie sind diejenigen, die visuelle Darstellungen der -Anwendung, aber der Zustand im Allgemeinen muss nicht immer auf der obersten Ebene sein. Es muss in der Tat so niedrig wie möglich, aber immer noch so hoch wie nötig sein. Lassen Sie uns ein weiteres Beispiel dafür haben. Sagen wir, Sie sind wirklich gut in der Spieleentwicklung und Sie haben eine Website voller Spiele erstellt. Es enthält eine TicTacToe-Anwendung, es enthält einen Tetris oder Mine Sweeper usw. In diesem Fall, wenn Sie die Top-Level-Komponente haben, die die ganze Seite ist muss sie nicht den internen Zustand der TictacToe Spiel. Wir können immer noch niedrigere Zustände einzeln für jedes Spiel haben und in der obersten Ebene, vielleicht gibt es überhaupt keinen Zustand. 7. Erster Versuch, einen Staat hinzufügen zu: In der vorherigen Lektion hatten wir eine Menge Theorie darüber, wie der Zustand funktioniert und wie die Anwendungskomponenten mit Requisiten verbunden werden können. Fangen wir an, unseren Staat zu definieren. Wie wir uns einig waren. Gehen wir zur Tic Tac Toe Komponente und lassen Sie uns einen Zustand für den Spieler und für die Positionen definieren. Die Positionen für jetzt, es wird ein Array sein, das den Wert jedes Quadrats im Raster enthält. Aber bevor wir die Zustände definieren, lassen Sie uns nur einige Konstanten für die möglichen Werte der Quadrate haben. Definieren wir die Zustände. Moment definieren wir die Zustände als einfache Variablen. Später werden wir sehen, dass die Zustände etwas Besonderes sein müssen, etwas anderes als eine einfache Variable. Aber im Moment, lassen Sie es uns einfach einfach halten. Sobald wir den Positionszustand definieren, der zwei Wert jedes Quadrats enthält, lassen Sie einfach diesen Wert für jedes Quadrat übergeben. Wir tun es einfach auf die gleiche Weise, wie wir auf eine Position Attribute für die Komponente übergeben. Wir fügen hier eine neue Requisite hinzu. Nennen wir es einfach Wert, der leeren Kreis oder Kreuz enthalten kann. Nur um dieses Beispiel ein wenig interessanter zu machen, anstatt ein leeres Gitter als Anfangszustand zu haben, lassen Sie uns nur einige zufällige Kreuze und Kreise in diesem Zustand haben. Okay, jetzt übergeben wir einen Wert für jedes Quadrat, aber natürlich müssen wir auch die Square Komponente ändern, um diese Werte widerzuspiegeln. Die Quadratkomponente sollte je nach diesem Wert einen Kreis oder eine Kreuzkomponente enthalten . Um dies zu erreichen, werden wir einen JavaScript-Ausdruck verwenden. Dies könnte zunächst etwas verwirrend sein, aber dies ist einfach eine boolesche Operation. Wenn der erste Teil vor dem && falsch ist, wird der zweite Teil dieses Ausdrucks nicht ausgewertet. Einfach falsch wird zurückgegeben. Aber wenn der erste Teil wahr ist, dann wird der zweite Teil das Ergebnis dieses Ausdrucks sein. In diesem Fall wäre das Kreis oder Kreuz. Zum Glück für uns, wenn ein Ausdruck falsch ist, dann reagieren Sie mit einfach ignorieren Sie es. In diesem Setup sollte nur ein Kreis oder ein Kreuz angezeigt werden. Nie beides und wenn der Wert anfänglich ist, sollte dieses Quadrat leer bleiben. Jetzt in unserem Raster sollten wir bereits einige Kreise und Kreuze sehen, abhängig von unserem Anfangszustand oder zumindest dem Platzhaltertext dafür. Aber bevor wir den Platzhaltertext in tatsächliche Kreise und Kreuze ändern, lassen Sie uns einfach für eine Sekunde hier anhalten, und lassen Sie uns darüber nachdenken, wie diese Anwendung funktioniert. 8. Ein Zustand, der sich ändern kann.: Bevor wir weitermachen, lassen Sie uns ein wenig aufhören und sehen, wie diese Anwendung funktionieren wird. Bisher haben wir unsere Funktion, die unseren Anfangszustand erzeugt. Nach dem ersten Rendern ändert sich der Zustand des Spiels basierend auf unserer Interaktion. Natürlich möchten wir diese Änderungen im Layout widerspiegeln. Die Art und Weise, wie React damit umgeht, besteht darin, die gesamte Komponente neu zu rendern und die gesamte Komponente erneut zu rendern, indem sie dieselbe Funktion ausführen. Dies ist eine lustige Situation hier, weil wir die gleiche Funktion zweimal ausführen und wir erwarten ein anderes Ergebnis. Ich möchte hier hervorheben, dass dies nur eine normale JavaScript-Funktion ist , abgesehen davon, etwas zurückzugeben, das wie HTML aussieht, hier gibt es nichts Magisches. Wenn Sie sich diese Funktion nur ansehen, ist es ziemlich klar, dass, wenn Sie den Zustand in diesem Format haben, diese Funktion das gleiche Ergebnis erzeugen wird, egal wie oft wir es ausführen. Was können wir tun, um das zu beheben? Wir brauchen einen Zustand, der den letzten Wert zurückgeben kann, den wir ihm zuweisen. Daher müssen wir es außerhalb dieser Komponente speichern. In React, um dieses Problem zu lösen, haben sie React Hooks eingeführt. Einer der Hooks heißt UseState und es ist genau für dieses Problem. Wir die USeState Haken, können wir einen Zustand außerhalb der Komponente speichern und es wird uns immer wieder den neuesten Wert geben. Wenn wir diese Funktion zum ersten Mal ausführen, können wir den Zustand mit einem Wert initialisieren, den wir als Attribut übergeben. Dieses Attribut wird natürlich bei allen anstehenden Aufrufen ignoriert , sobald der Wert bereits gespeichert ist. Der UseState Hook gibt ein Array von zwei Elementen zurück. Das erste Element ist der Zustand selbst. Wenn Sie die Funktion zum ersten Mal ausführen, sie im Grunde unseren Anfangszustand zurück. Wenn Sie jedoch die Funktion aufgrund eines erneuten Renderings ausführen, wird der neueste Wert des Status zurückgegeben. Das zweite Element, das uns der UseState Hook zurückgegeben wird, ist eine Funktion und diese Funktion kann verwendet werden, um den Zustand zu ändern. In Zukunft für jede Interaktion, wenn Sie den Zustand ändern müssen, müssen wir diese Funktion aufrufen und wir rufen diese Funktion nicht nur auf, um den Zustand zu ändern, sondern es löst auch automatisch das erneute Rendering der Komponente aus. Indem wir also den Zustand ändern, rendern wir auch die Komponente neu, was natürlich die Zustandsänderung widerspiegelt, wo wir gerade hatten. 9. Kreise und Kreuzungen: Diese Lektion wird Spaß machen, und es ist ein Osterei, weil es überhaupt nichts tun muss, was reagiert. In diesem werden wir Bilder codieren. Wir werden vektorbasierte Kreise und Kreuze zeichnen. Wenn Sie jemals den Quellcode eines Bildes überprüfen, dann erkennen Sie wahrscheinlich, dass sie super kompliziert sind und Sie einfach nichts daraus bekommen können. Aber wir werden SVGs verwenden, und SVGs sind nicht so kompliziert, besonders wenn Sie es nur für etwas Einfaches verwenden. Das Schöne an SVGs ist, dass sie XML-basiert sind und seit HTML5 Teil der HTML-Syntax sind. Sie können einfach eine SVG innerhalb von HTML inline. Sie müssen kein externes Bild verwenden und es nicht in den HTML-Code laden. Sie können es einfach als Teil Ihres HTML schreiben. Wie sehen sie aus? Zunächst einmal wird jede SVG in einem SVG-Tag umschlossen. Im SVG-Tag können Sie die Breite und die Höhe des SVG zusammen mit der ViewBox definieren . Das ViewBox definiert Ihr Koordinatensystem. In unserem Fall werden wir definieren, dass die SVG inder oberen linken Ecke mit der -50-50-Koordinatebeginnt der oberen linken Ecke mit der -50-50-Koordinate und die Breite und die Höhe des SVG-Canvas jeweils 100 betragen. Die Mitte des Bildes wird also Null, Null sein. Sie können feststellen, dass die Höhe und die Breite, die wir in SVG definiert haben, sowie die Höhe und die Breite, die wir in der ViewBox definiert haben, gleich sind , aber dies ist nicht obligatorisch. Die Höhe und die Breite, die als Attribute im SVG-Tag definiert sind, wird die tatsächliche Größe des SVG sein. Während die ViewBox die Leinwand definiert, auf der wir zeichnen können. Jede Koordinate innerhalb dieser SVG bezieht sich auf diese Leinwand. Die ViewBox definiert eine interne Größe aus der Perspektive der Bildelemente. Wenn die tatsächliche Größe des Bildes und die von der ViewBox definierte Größe nicht übereinstimmen, wird das Bild einfach nach unten oder nach oben skaliert. Jetzt haben wir eine Leinwand. Lassen Sie einfach etwas darauf zeichnen. Beginnen wir mit einer Circle-Komponente, weil das nur ein Kreis ist. Wir können einfach ein Kreis-Tag hinzufügen und sagen, dass die Mitte davon in der Mitte der Leinwand sein wird und der Radius 40 Pixel beträgt. Sie werden feststellen, dass dadurch ein schwarzer Kreis gerendert wird. Das ist nicht genau das, was wir wollen, aber da SVGs Teil von HTML sind, können wir auch CSS verwenden, um es zu stylen. Vor dem Stil lassen Sie uns einfach die Kreuzkomponente definieren. Wir definieren einfach zwei Linien, indem ihre Startkoordinaten und ihre Endkoordinaten festlegen. Nun, wenn Sie sich fragen, was Sie falsch gemacht haben, weil Sie Kreuze sind , die nicht auftauchen, das ist völlig normal. Standardmäßig ist die Zeilenbreite Null. Wir müssen das in CSS ändern. Lassen Sie uns einige Styling für SVGs im Allgemeinen definieren. Hier können wir eine Zeilenbreite festlegen, die Strichbreite genannt wird. Wir können auch die Farbe ändern, indem Sie die Stricheigenschaft festlegen. Lassen Sie uns auch die Füllung entfernen, die im Falle des Kreises automatisch schwarz ist. Sagen Sie einfach füllen: keine. Wenn Sie Lust haben wollen, können wir auch die Strichlinecap Eigenschaft ändern, wodurch unsere Linienenden abgerundet werden. Wenn Sie verschiedene Farben für die Kreise und die Kreuze haben möchten, da wir jetzt in HTML sind, können Sie,da wir jetzt in HTML sind,einfach eine CSS-Klasse für das Kreuz oder den Kreis anhängen dann eine andere Farbe für sie basierend auf der CSS-Klasse festlegen. Jetzt haben wir diese gut aussehenden Kreise und Kreuze. Um dieses Spiel zu beenden, lassen Sie uns mit einem der wichtigsten Teil fortfahren, die Interaktion ist. 10. Interaktion: Okay, gut aussehen, aber bisher ist alles noch statisch und das ist ein Spiel, also möchten Sie etwas Interaktion hinzufügen, also sollten wir einen Event-Handler für die Quadrate anhängen. Aber leider können wir in React keine Ereignishandler auf Komponentenebenen anhängen. Wir müssen Ereignishandler für die eigentlichen HTML-Tags anhängen. In unserem Fall ist das nächste, das wir bekommen können, das Container-Tag innerhalb einer Square Komponente. Aber es gibt ein bisschen ein Problem hier, wir waren uns einig, dass wir den Zustand innerhalb einer TicTacToe-Komponente haben werden, aber dieser Ereignishandler befindet sich jetzt in der Square Komponente. Wir müssen einen schönen Weg finden, dass die Square Komponente, kann den Zustand setzen. Eine Idee könnte sein, dass wir zusammen mit der Weitergabe des Zustands an die Square Komponente auch die SetState Funktion weitergeben könnten, und auf diese Weise könnte die Square Komponente den Zustand selbst ändern. Aber zusammen mit dem Ändern des Zustands des Gitters wollen wir auch den Zustand des Spielers ändern. Natürlich könnten wir auch an den Spieler an die Square Komponente weitergeben und die Square Komponente könnte den ganzen Zustand ändern, weil sie alles wissen wird. Aber das ist gegen die Idee, die Square Komponente so einfach wie möglich zu haben , und wenn Sie darüber nachdenken, hat der Spieler nichts mit der Square Komponente wirklich zu tun. Der Player gehört zur Hauptlogik, die in der TicTacToe-Komponente definiert werden soll. Anstatt alles weiterzugeben, was wir tun werden, ist, dass wir einen Rückruf weiterleiten. Ein Callback ist, wenn Sie eine Funktion übergeben, dann erwarten Sie, dass die Funktion bei bestimmten Ereignissen aufgerufen wird. In unserem Fall wird die TicTacToe-Komponente eine Funktion übergeben und die Square Komponente werden wir diese Funktion aufrufen, sobald sie angeklickt wurde. Das Schöne daran ist, dass die Funktion, die wir übergeben, in der TicTacToe-Komponente definiert ist, so dass sie vollen Zugriff auf alles innerhalb der TicTacToe-Komponente zusammen mit dem Zustand und dem Player und während eine Square Komponente Zugriff auf keine von diesen hat, kann sie die Funktion immer noch aufrufen. In der TicTacToe-Komponente schreiben wir eine Funktion, die empfängt, auf welches Quadrat geklickt wurde, und es ändert den Status, indem das Raster aktualisiert und den Player geändert wird. Dann lassen Sie uns diese Funktion an jedes der Quadrate weitergeben, als Eigenschaft. Es ist wichtig, hier zu beachten, dass wir die Funktion hier nicht aufrufen. Wir übergeben nur einen Verweis auf die Funktion, genau wie wir es mit jeder anderen Variablen tun könnten. Der einzige Ort, an dem wir diese Funktion aufrufen werden, wird innerhalb der Square Komponente sein, die Zugriff darauf haben wird, weil wir sie einfach als Eigenschaft übergeben. Innerhalb der Square Komponente können wir einen Ereignishandler für das Click-Ereignis definieren, und dieser Ereignishandler erfordert eine Funktion. Es wird verlockend sein, die Funktion zu verwenden, die gerade von der TicTacToe-Komponente weitergegeben wurde , aber es ist nicht so einfach. Die Funktion, die von der TicTacToe-Komponente übergeben wird, erfordert ein positionsattribut. Was wir tun können, ist, dass wir einen Zwischen-Ereignishandler in der Square Komponente definieren können, aufgerufen wird, sobald das Quadrat angeklickt wird, dann wird es übertragen, um unseren Callback aufzurufen. In diesem Zwischenklick-Handler können wir das Positionsattribut leicht übergeben , da die Square Komponente die Position kennt. Wir können hier auch einige zusätzliche Logik hinzufügen, zum Beispiel, wenn das Quadrat nicht leer ist, dann werden wir den Klick ignorieren. Wow, also sind wir weit gegangen, ich meine, jetzt kannst du dieses Spiel spielen. Es ist interaktiv, es sieht schön aus. Alles ist an Ort und Stelle, außer einem letzten Bit, der den Gewinner ankündigt. 11. Gewinner erkennen: Wir sind wirklich nahe, dieses Spiel jetzt zu beenden, aber wir wissen immer noch nicht, ob das Spiel beendet ist, ob jemand das Spiel gewonnen hat oder es ein Unentschieden ist. Um dies zu tun, schreiben wir eine Dienstprogrammfunktion, die eine einfache JavaScript-Funktion sein wird, und dann sehen wir, wie diese einfache JavaScript-Funktion in Ihre Anwendungslogik passt. Um diese Berechnung durchzuführen, würde diese Funktion den Zustand des Spiels benötigen, sie würde den Wert jedes Quadrats benötigen. Aber abgesehen davon wäre es eine einfache JavaScript-Funktion, es ist nichts React spezifisch, es ist nur eine Funktion, die ein Array von neun Werten erhält und ein Ergebnis zurückgibt. Wenn man also erkennt, ob jemand das Spiel gewonnen hat, überprüft man, ob es drei Kreise oder drei Kreuze in einer Reihe, in einer Spalte oder in einer diagonalen Weise gibt. Grundsätzlich müssen wir die spezifischen Elemente in diesem Array von neun Elementen überprüfen. Wenn Sie überprüfen möchten, ob die erste Zeile voller Kreise ist, dann werden wir überprüfen, ob das erste, zweite und dritte Element in diesem Array ein Kreis ist. Wenn ich zu diesem die zweite Zeile gehe, die zweite Reihe, dann werden wir überprüfen, ob das vierte, fünfte und sechste Element in diesem Array ein Kreis ist und so weiter. Es ist ein super-einfacher Scheck. Es sind im Grunde einige, wenn Bedingungen, wenn diese Werte alle Kreise sind, dann gibt die Funktion zurück, dass der Gewinner Kreis ist. Wenn diese Werte alle Kreuze sind, dann wird es zurückgegeben, dass der Gewinner ein Kreuz ist. Wenn die Funktion überprüft hat, dass niemand das Spiel gewonnen hat, dann gibt es immer noch zwei Optionen. Das Spiel ist entweder beendet und es ist ein Unentschieden, oder das Spiel ist immer noch los. Erkennen eines Ungleichs an dieser Stelle überprüft einfach, ob alle Quadrate bereits einen Wert haben, sodass keine weitere Bewegung möglich ist. In diesem Fall geben wir zurück, dass „Es ist eine Krawatte“. Die einzige verbleibende Option ist, dass niemand das Spiel gewonnen hat, es ist kein Unentschieden, so dass das Spiel immer noch los ist. In diesem Fall geben wir einfach nichts zurück. OK, also haben wir diese Funktion und das ist eine Utility-Funktion, also können wir sie wahrscheinlich irgendwo außerhalb der React-Komponenten haben, aber wir können es auch in der TicTacToe-Komponente haben, weil TicTacToe-Komponente die Haupt Logik und es ist der einzige Ort, an dem diese Funktion benötigt wird, so dass Sie das entscheiden können. Wie passt das in unsere Anwendung? Der Lebenszyklus dieser Tic-Tac-Toe Anwendungen ist bisher , dass wir das Ganze als Anfangszustand rendern, dann wenn Sie auf eines der Quadrate klicken, dann wird das Ganze neu gerendert. Dies geht in einer Schleife weiter, bis Sie auf Quadrate klicken. Das Erkennen des Gewinners könnte nach jedem Klick kommen, so dass es nach dem Klicken auf ein Quadrat Teil des Ereignishandlers sein könnte. In diesem Fall könnten wir einen zusätzlichen Staat für den Gewinner haben. Wir könnten den Gewinner in einem Zustand speichern, dann basierend darauf, könnten wir einen Ergebnisbildschirm rendern. Die andere Option kommt, indem man erkennt, dass der Gewinner ein abgeleiteter Zustand ist. Es basiert auf den bereits bestehenden Zuständen, so dass wir keinen separaten Teil des Staates haben müssen, um etwas zu speichern, das wir bereits aus dem Rest des Staates herausfinden können. Aber wenn wir es nicht im Staat speichern, wo haben wir es dann? Wir müssen wissen, ob jemand das Spiel beim Rendern gewonnen hat, denn in diesem Fall werden wir die Ergebniskomponente rendern. So können wir einfach eine zusätzliche Logik hinzufügen, zwischen dem Abrufen des Zustands vom React-Hook , der den Wert der Quadrate enthält, und dem Rendern des Rasters basierend auf diesem Zustand. Alles, was Sie in dieser Funktion schreiben, wie wir besprochen haben, werden wir mit jedem Rendering erneut ausgeführt. Wenn Sie diese Komponente erneut rendern, wird es erkennen, ob jemand das Spiel gewonnen hat, und dann kann es eine Entscheidung treffen, den Ergebnisbildschirm basierend darauf zu rendern. Das sind also zwei Optionen und fühlen Sie sich frei, mit dem zu gehen, was auch immer Sie bevorzugen. Am Ende haben beide eine Siegervariable, die enthält, ob der Kreis oder das Kreuz das Spiel gewonnen hat, oder wenn es ein Unentschieden ist oder nichts enthält und das zeigt an, dass das Spiel noch aktiviert ist. 12. Und der Gewinner ist...: In diesem letzten Kapitel werden wir unsere Ergebnisse Bildschirm erstellen. Zuvor haben wir es bereits geschafft, unseren Zustand in eine Siegervariable abzuleiten, die enthält, wenn das Spiel durch den Kreis gewonnen wurde, das Kreuz, oder niemand gewann das Spiel und das Spiel ist noch an. Der Ergebnisbildschirm wird zur TicTacToe-Komponente kommen, da die TicTacToe-Komponente derjenige ist, der die Hauptlogik des Spiels zusammenstellt. Im Layout würde das Ergebnis oben auf dem Gitter angezeigt, aber technisch in HTML wird es daneben sein, weil das Raster bereits ein eindeutiges CSS hat, das für das Raster spezifisch ist, und wir möchten nicht den Ergebnisbildschirm haben innerhalb dessen, weil der Ergebnisbildschirm etwas völlig anderes aussehen würde. Aber jetzt haben wir zwei HTML-Tags innerhalb der TicTacToe-Komponenten Ergebnisse. Und in React können wir das nicht haben. React muss daher immer ein HTML-Tag zurückgeben. Aber wir können dies leicht beheben, da dieses ein Ergebnis-Tag einen Inhalt haben kann und dieser Inhalt mehrere HTML-Tags haben kann. Es ist genau das gleiche wie unser vorheriges Raster enthält neun Quadrate. Ich füge einfach ein Wrapper-Tag als Container für die Tic Tac Toe-Komponente hinzu, die sowohl das Raster als auch den Ergebnisbildschirm hätte. Aber jetzt wird sowohl der Ergebnisbildschirm als auch das Raster immer angezeigt und wir wollen nur den Ergebnisbildschirm haben, falls jemand das Spiel gewonnen hat oder wenn es ein Unentschieden ist. Wir möchten diesen Ergebnisbildschirm bedingt auf der Grundlage des Gewinnerattributs rendern. Wir können den gleichen Trick tun, den wir gerade in der Quadrat Komponente gemacht haben, wenn wir einen Kreis oder ein Kreuz basierend auf dem Wert des Quadrats gerendert haben. Nun, basierend auf dem Wert des Gewinners, werden wir das Ergebnis rendern. Wie wir vereinbart haben, bedeutet das, wenn der Gewinner leer ist, dass das Spiel noch läuft. Dies würde auch bedeuten, dass, wenn Sie diese Bedingung verwenden, dass, wenn das Spiel noch eingeschaltet ist, der Ergebnisbildschirm nicht angezeigt wird. Wir haben es geschafft, den Ergebnisbildschirm während des Spiels zu verstecken. Wir wollen es auch klug genug zu wissen , wer das Spiel gewonnen hat, denn im Moment sagt es einfach Ergebnis, es sagt nicht, was das Ergebnis ist. Um dies zu tun, müssen wir das Siegerattribut genau so an diese Komponente weitergeben , wie wir Attribute an die Quadrate weitergegeben haben. Dann auf der anderen Seite bei der Ergebniskomponente müssen wir diese Variable abfangen und wir können einige bedingte Rendering basierend auf ihrem Wert haben. Standardmäßig wird dies unterhalb des Rasters angezeigt. Aber wenn Sie es oben im Raster haben möchten, dann können wir etwas CSS-Stil hinzufügen und damit können wir es auf absolute Position setzen und einige andere Eigenschaften setzen, um es ein bisschen schöner zu machen. Sobald du das Spiel beendet hast, wurde der Gewinner bekannt gegeben. Was kommt als nächstes? Wenn Sie eine weitere Runde spielen möchten, dann müssen Sie die Seite aktualisieren. Stattdessen können wir auch eine Reset-Funktion definieren, die unseren Zustand zurücksetzen würde. Da wir unseren Zustand zurücksetzen, müssen wir dies in der TicTacToe-Komponente definieren , weil das derjenige ist, der Zugriff auf den Zustand hat. Aber danach können wir diese Reset-Funktion an unsere Ergebnisbildkomponente weitergeben. Dies wird ein weiterer Rückruf sein, genau wie wir einen Rückruf an die Square Komponente übergeben haben, die verwendet wurde, nachdem Sie auf das Quadrat geklickt haben. Dieser wird verwendet, wenn Sie auf den Reset-Button im Ergebnisbildschirm klicken. Ich werde diese Funktion nur als Eigenschaft und innerhalb der Ergebnisbildkomponente weitergeben Wenn Sie eine Schaltfläche zum Zurücksetzen definieren, können wir diese Funktion einfach an den OnClick-Event-Handler dieser Schaltfläche weitergeben, ohne ein Mid-Level-Ereignis Handler dazwischen. Der Unterschied zwischen dieser Komponente und der Komponente Square besteht darin, dass die Komponente Square eine zusätzliche Eigenschaft benötigt, um an die TictacToe-Komponentenfunktion weitergegeben zu werden. Aber diese, die Reset-Funktionen benötigen überhaupt keine Eigenschaft, so kann es einfach aufgerufen werden, es kann einfach an den Ereignishandler dieser Schaltfläche gebunden werden. Und das ist alles, was es ist. Jetzt haben wir ein Spiel, durch das Sie es spielen können, der Ergebnisbildschirm wird angezeigt und sobald Sie fertig sind, können Sie das Spiel zurücksetzen und eine weitere Runde spielen. 13. Schlussbemerkung: Herzlichen Glückwunsch. Jetzt habe ich ein Tic-Tac-Toe Spiel, und hoffentlich wirst du auch ein viel besseres Verständnis davon haben, wie React funktioniert. Aber wenn Sie noch Fragen haben oder einige Teile für Sie immer noch verwirrend sind, dann zögern Sie nicht, mich hier oder auf CodePen zu kontaktieren. Natürlich ist dieses Spiel kaum fertig. Wir hätten viel mehr dazu haben können, aber das hätte ein viel längeres Tutorial gemacht. Stattdessen finden Sie einen Link unter diesem Video, einige weitere Funktionen erklärt, wie Sie Animationen hinzufügen, oder wie Sie eine Computerlogik definieren und gegen den Computer spielen. Fühlen Sie sich frei, mit diesem Projekt weiterzumachen, und wenn Sie fertig sind, vergessen Sie nicht, es zu teilen. Ich kann es kaum erwarten, es zu sehen.