Praktisches Kaffeekript: Ein Tic-Tac-Toe-Spiel machen

Coffeescript ist eine winzige kleine Sprache, die JavaScript kompiliert. Es gibt keine Interpretation zur Laufzeit, da Sie Coffeescript schreiben, sie in JavaScript zusammenstellen und die resultierenden JavaScript -Dateien für Ihre App verwenden. Sie können jede JavaScript -Bibliothek (z. B. jQuery) innerhalb von Coffeescript verwenden, indem Sie ihre Funktionen mit der entsprechenden CoffeeScript -Syntax verwenden. Coffeescript kann sowohl zum Schreiben von JavaScript auf dem Front-End als auch zum JavaScript auf dem Back-End verwendet werden.

Key Takeaways

• CoffeeScript -Effizienz: Coffeescript reduziert die erforderliche Menge an Code erheblich, wobei die Zeichen im Vergleich zu JavaScript um 36% gesenkt werden, wodurch die Lesbarkeit und Wartung verbessert wird.
• schnelle Entwicklung: Die prägnante Syntax von CoffeeScript und automatische Ablagerung von Variablen verhindern gemeinsame Fehler und beschleunigen die Entwicklungszeit.
• Integration und Zusammenstellung: Coffeescript integriert sich nahtlos in JavaScript-Bibliotheken wie JQuery und Compiles in JavaScript, sodass die Verwendung in Front-End- und Back-End-Entwicklung verwendet werden kann.
• Details zur Implementierung von Spielen: Das Tic-Tac-Toe-Spiel verwendet eine klare Struktur mit Board-, Spielerstatistik- und Spielstatus-Updates, die alle über die vereinfachte Syntax und JQuery von Coffeescript für DOM Manipulation verwaltet werden.
• Verbesserte Funktionen mit Coffeescript: Verwendet Funktionen wie Schleifen, Bedingungen und lokaler Speicher, um Spielzustände, Spielerbewegungen und Bewertungen zu verwalten, und demonstrieren die praktische Anwendung von Coffeescript in Webprojekten.

Warum Coffeescript?

weniger Code

Nach dem kleinen Buch über Coffeescript reduziert die Syntax von CoffeeScript die Anzahl der Zeichen, die Sie benötigen, um Ihre JS um rund 33% bis 50% zu bearbeiten. Ich werde ein einfaches Tic-Tac-Toe-Spiel präsentieren, das mit Coffeescript erstellt wurde (Sie haben dies wahrscheinlich bereits aus dem Titel erraten), das im Rohes-Coffeescript-Format 4963 Zeichen enthält, während der kompilierte Javascript-Code 7669 Zeichen enthält. Das ist eine Differenz von 2706 Zeichen oder 36%!

schnellere Entwicklungszeit

Weil Sie kürzere, weniger fehleranfällige Schreiben schreiben (z. B. werden Variablen automatisch gescopt, was bedeutet, dass Sie die Globale nicht versehentlich überschreiben können, indem Sie VAR weglassen), können Sie Ihre Projekte schneller beenden. Die knappe Syntax von CoffeeScript sorgt auch für lesbarerer Code und letztendlich Code, der einfacher zu pflegen ist.

Erste Schritte

In diesem Artikel werden wir ein einfaches Tic-Tac-Toe-Spiel mit Coffeescript und JQuery bauen. Wenn Sie sich vor der Untersuchung eines praktischen Falls über die Syntax nachlesen möchten, schlage ich vor, dass ich Ihre JavaScript -Entwicklung mit Coffeescript -Artikel hier bei SitePoint beschleunigen möchte. Dadurch werden auch beschrieben, wie Sie CoffeeScript über NPM (den Knotenpaketmanager) installieren.

Wie immer ist der gesamte Code aus diesem Tutorial auf GitHub verfügbar und eine Demo ist auf Codepen oder am Ende des Tutorials verfügbar.

Die häufigsten CoffeeScript -Befehle, die Sie verwenden, sind:

Coffee -c -Dateiname kompiliert die Coffeescript -Datei mit demselben Namen in eine Datei, jedoch mit einer .js -Erweiterung (Coffeescript -Dateien haben normalerweise .Coffee -Erweiterung).

Coffee -cw -Dateiname achtet nach Änderungen in einer Datei (wann immer Sie die Datei speichern) und kompilieren Sie sie.

Coffee -cw -Ordnere/ achtet nach Änderungen an allen .coffee -Dateien im Ordner und kompilieren Sie sie im selben Verzeichnis, wenn Änderungen vorliegen.

Schließlich ist es praktisch, Coffeescript aus einem Ordner mit .coffee -Dateien zu einem Ordner mit nur .js -Dateien zu kompilieren.

Kaffee -o JS / -CW / Kaffee wird nach Änderungen in allen .Coffee -Dateien im Kaffeeordner achten und die Ausgabe (JavaScript) im JS -Ordner platzieren.

Wenn Sie sich nicht in Terminals interessieren, können Sie ein Tool mit einer GUI verwenden, um Ihre Coffeescript -Dateien zu verarbeiten. Zum Beispiel können Sie Prepros einer kostenlosen unbegrenzten Testversion probieren (obwohl Sie sie kaufen müssen, wenn Sie es mögen). Das Bild unten zeigt einige der Optionen, die es bietet:

Sie können sehen, dass Prepros alle Arbeiten für Sie erledigt - es richtet Beobachter ein, damit Ihre .coffee -Dateien mit JS zusammengestellt werden. Dadurch können Sie UGLIFY JS verwenden, die Ihren Code minifizieren/komprimieren können. Er kann automatisch Variablen einteilen, und es unterstützt Eced Coffeescript. Präpros können auch für CSS -Präprozessoren wie weniger und Sass- und Vorlagenmotoren wie Jade verwendet werden.

Das Spiel

Beginnen wir mit dem Markup:

<span><span><span><div</span> class<span>="wrapper"</span>></span>
</span>  <span><span><span><header</span> class<span>="text-center"</span>></span>
</span>    <span><span><span><h1</span>></span>Tic Tac Toe<span><span></h1</span>></span>
</span>  <span><span><span></header</span>></span>
</span>
  <span><span><span><div</span> id<span>="board"</span>></span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="alerts welcome"</span>></span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="notifications"</span>></span><span><span></div</span>></span>
</span>
  <span><span><span><form</span> action<span>=""</span> method<span>="POST"</span>></span>
</span>    ...
  <span><span><span></form</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span><script</span> src<span>="jquery.min.js"</span>></span><span><span></script</span>></span>
</span><span><span><span><script</span> src<span>="logic/app.js"</span>></span><span><span></script</span>></span></span>

Die Schnittstelle des Spiels besteht aus folgenden:

• ein Kopfball, der das Spiel kurz beschreibt
• Ein Divelelement mit der ID der Platine, in der die 3 × 3 -Quadrate
lokalisiert werden.
Ein DIV -Element mit einer Klasse von Warnungen, in denen der Spielstatus
• angezeigt wird
Ein DIV -Element mit einer Klasse von Benachrichtigungen, die zeigen, wer X und O zusammen mit den allgemeinen Player -Statistiken spielt.
Ein Formular, das nur angezeigt wird, wenn das Spiel geladen wird und die Spieler auffordern, ihre Namen einzugeben.

In Übereinstimmung mit Best Practice werden sowohl JQuery als auch das Skript, das unsere App tickt, vor dem Schlusskörper -Tag geladen.

Das Styling

Verwenden von CSS können wir die neun beteiligten Quadrate in einem 3 × 3 -Gitter erscheint, indem wir jedes Quadrat schweben und jeden vierten haben.

<span><span>.square:nth-of-type(<span>3n + 1</span>)</span> {
</span>  <span>clear: both;
</span><span>}</span>

Wir können den Quadraten auch eine andere Farbe hinzufügen, je nachdem, ob sie die Klasse X oder O haben (was mit JavaScript hinzugefügt wird).

<span><span>.square.x</span> {
</span>  <span>color: crimson;
</span><span>}
</span>
<span><span>.square.o</span> {
</span>  <span>color: #3997ff;
</span><span>}</span>

Coffeescript in Aktion

als Referenz finden Sie hier die Hauptdatei der Coffeescript.

Sie können sehen, dass unsere Tic-Tac-Toe-App mit $-> beginnt. Dies entspricht der Kurzform für die Funktion von JQuery, die Code ausführt, wenn das DOM bereit ist: $ (function () {...});.

CoffeeScript beruht nicht auf Semikolonen und Zahnspangen, sondern auf Einrückung. -> teilt Coffeescript mit, dass Sie eine Funktion definieren, damit Sie den Körper der Funktion in der nächsten Zeile starten und den Körper mit zwei Leerzeichen einbeziehen können.

Als nächstes erstellen wir ein Objekt namens TIC, das selbst ein Objekt namens Daten enthält. Sie können sehen, dass Klammern oder Kommas beim Erstellen von Objekten nicht obligatorisch sind, solange Sie die Eigenschaften richtig einlegen.

<span><span><span><div</span> class<span>="wrapper"</span>></span>
</span>  <span><span><span><header</span> class<span>="text-center"</span>></span>
</span>    <span><span><span><h1</span>></span>Tic Tac Toe<span><span></h1</span>></span>
</span>  <span><span><span></header</span>></span>
</span>
  <span><span><span><div</span> id<span>="board"</span>></span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="alerts welcome"</span>></span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="notifications"</span>></span><span><span></div</span>></span>
</span>
  <span><span><span><form</span> action<span>=""</span> method<span>="POST"</span>></span>
</span>    ...
  <span><span><span></form</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span><script</span> src<span>="jquery.min.js"</span>></span><span><span></script</span>></span>
</span><span><span><span><script</span> src<span>="logic/app.js"</span>></span><span><span></script</span>></span></span>

Die Wending -Eigenschaft hält die Gesamtzahl der im Spiel in Anspruch genommenen Kurven. Wir können überprüfen, ob es eine gleichmäßige oder ungleiche Zahl enthält und auf diese Weise feststellen, ob es sich um die Wende von X oder O.

handelt

Die X- und O -Eigenschaften sind Objekte und enthalten Daten, die sich auf die Anzahl der X oder O von den drei Achsen beziehen, die für das Spiel wichtig sind: horizontal, vertikal und diagonal. Sie werden bei jedem Schritt durch die Checkend -Methode aktualisiert, um die Verteilung von X und O auf der Tafel darzustellen. Die Checkend -Methode ruft Checkwin an, um festzustellen, ob ein Gewinner vorhanden ist.

Danach haben wir eine Methode im TIC -Objekt, die alles in Betrieb genommen wird:

<span><span>.square:nth-of-type(<span>3n + 1</span>)</span> {
</span>  <span>clear: both;
</span><span>}</span>

Beachten Sie die Verwendung von @, die das JavaScript -Schlüsselwort kompiliert. Wie in der ersten Eigenschaft von Initialize dargestellt, können Sie den Punkt nach dem Schlüsselwort @ beim Einstellen oder Aufrufen einer Eigenschaft oder Methode überspringen.

Indem wir den Methoden vernünftige Namen geben, haben wir eine faire Vorstellung davon, was sie tun:

setPlayernames speichert die von den Benutzern in die Eingaben eingegebenen Werte in das Datenobjekt.
Abrufen ruft die Statistiken des Spielers von LocalStorage ab und stellt sie in das Datenobjekt ein.
Zuweisungen bestimmt, wer X spielt und wer O.
• spielt
Vorbereitungsboard verbirgt das Formular, entfernt alle Benachrichtigungen, leert das Board und füllt es mit neun leeren Quadraten.
UpdateNotifications aktualisiert die Benutzeroberfläche mit Informationen darüber, wer X spielt und wer O spielt, sowie die Statistiken des Spielers.
Addistener hängen die Ereignishörer an, damit wir auf Spieler reagieren können, die einen Schritt machen.

Tauchen tiefer

schauen wir uns ein paar dieser Methoden genauer an.

<span><span>.square.x</span> {
</span>  <span>color: crimson;
</span><span>}
</span>
<span><span>.square.o</span> {
</span>  <span>color: #3997ff;
</span><span>}</span>

Hier iterieren wir neun Mal und fügen neun Divs mit einer Quadratklasse auf die leere Brett hinzu, um sie zu bevölkern. Auf diese Weise können Sie mit Coffeescript Einzeilen-Schleifen schreiben und den Körper der Schleife deklarieren, bevor Sie den Zustand selbst schreiben.

$ <span>->
</span>  <span>Tic =
</span>    <span>data:
</span>      <span>turns: 0
</span>      <span>x: {}
</span>      <span>o: {}
</span>      <span>gameOver: false</span>

Coffeescript ermöglicht eine String -Interpolation, die die Lesbarkeit erhöht und die Komplexität und die Codelänge verringert. Sie können einen #{} in jeder Zeichenfolge hinzufügen und eine beliebige Variable oder einen Rückgabewert aus einem Funktionsaufruf in den Klammern einfügen.

<span>initialize: ->
</span>  @data<span>.gameOver = false
</span>  @<span>.setPlayerNames()
</span>  @<span>.retrieveStats()
</span>  @<span>.assignRoles()
</span>  @<span>.prepareBoard()
</span>  @<span>.updateNotifications()
</span>  @<span>.addListeners()</span>

Die Addnotification -Methode veranschaulicht, wie Sie Parameter in Coffeescript definieren. Sie schreiben sie vor dem Pfeil (->):

Sie können Standardwerte für Parameter ähnlich wie PHP angeben:

<span><span><span><div</span> class<span>="wrapper"</span>></span>
</span>  <span><span><span><header</span> class<span>="text-center"</span>></span>
</span>    <span><span><span><h1</span>></span>Tic Tac Toe<span><span></h1</span>></span>
</span>  <span><span><span></header</span>></span>
</span>
  <span><span><span><div</span> id<span>="board"</span>></span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="alerts welcome"</span>></span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="notifications"</span>></span><span><span></div</span>></span>
</span>
  <span><span><span><form</span> action<span>=""</span> method<span>="POST"</span>></span>
</span>    ...
  <span><span><span></form</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span><script</span> src<span>="jquery.min.js"</span>></span><span><span></script</span>></span>
</span><span><span><span><script</span> src<span>="logic/app.js"</span>></span><span><span></script</span>></span></span>

Wenn eine Funktion mit einem Standardparameter kompiliert wird, wird sie in:

konvertiert

<span><span>.square:nth-of-type(<span>3n + 1</span>)</span> {
</span>  <span>clear: both;
</span><span>}</span>

Wenden wir uns schließlich an die Methode addlisteners:

<span><span>.square.x</span> {
</span>  <span>color: crimson;
</span><span>}
</span>
<span><span>.square.o</span> {
</span>  <span>color: #3997ff;
</span><span>}</span>

Hier sehen wir, dass CoffeeScript zusätzliche Schlüsselwörter bietet, um Wahrheits- und Falsy -Werte wie Nein, ja, von und weiter darzustellen. Zusätzlich,! ==, ===, &&,! kann verwendet werden, wenn man nicht ist, und und nicht dementsprechend.

Sie können lesbare einzelne Bedingungen mit if ... dann ... sonst ... syntax.

Die Mechanik des Spiels

Die Arbeitspferd -Methode Checkend Checks, wenn jedes Mal, wenn ein Spieler einen Sieger macht, einen Gewinner gibt. Dies geschieht, indem es über die Tafel iteriert und die Quadrate zählt, die zu X und O gehören

$ <span>->
</span>  <span>Tic =
</span>    <span>data:
</span>      <span>turns: 0
</span>      <span>x: {}
</span>      <span>o: {}
</span>      <span>gameOver: false</span>

Wie Sie sehen, verwendet dies eine andere handliche Coffeescript -Funktion - Ranges.

<span>initialize: ->
</span>  @data<span>.gameOver = false
</span>  @<span>.setPlayerNames()
</span>  @<span>.retrieveStats()
</span>  @<span>.assignRoles()
</span>  @<span>.prepareBoard()
</span>  @<span>.updateNotifications()
</span>  @<span>.addListeners()</span>

Dies wird dreimal geschoben und in dieser Reihenfolge die Zeile auf 0, 1 und 2 einstellen. Alternativ würde [0 ... 2] (ein exklusiver Bereich) nur zu zwei Iterationen führen und die Zeile auf 0 und 1.

festlegen

In der horizontalen Überprüfung sehen wir noch einmal, wie entscheid

So sieht Checkfield aus:

Diese Methode zeigt die Verwendung der? Schlüsselwort, das beim Einfügen neben einer Variablen in einer bedingten Kompilierung:

<span>prepareBoard: ->
</span>  <span>...
</span>  <span>$("<div>", {class: "square"}).appendTo("#board") for square in [0..8]</span>

kompiliert:

<span>updateNotifications: ->
</span>  <span>$(".notifications").empty().show()
</span>  @<span>.addNotification "#{@data.player1} is playing #{@data.rolep1}"
</span>  <span>...</span>

was offensichtlich ziemlich praktisch ist.

Was die Schachfeldmethode tut, ist eine zu der entsprechenden Achse der X- oder O -Eigenschaft hinzuzufügen, abhängig vom Klassennamen des Klickens des Quadrats. Der Klassenname wird hinzugefügt, wenn ein Benutzer in der Methode addListeners auf ein leeres Board -Quadrat klickt.

Dies bringt uns zur Checkwin -Methode, mit der wir überprüfen, ob einer der Spieler das Spiel gewonnen hat:

<span>addNotification: (msg) ->
</span>  <span>$(".notifications").append($("<p>", text: msg));</span>

In CoffeeScript können Sie ... in Array verwenden, um die Array -Werte und für den Schlüssel zu schleifen, den Objekt, um die Eigenschaften eines Objekts zu schleifen. Checkwin verwendet dies, um alle Eigenschaften innerhalb der X- und O -Objekte zu überprüfen. Wenn einer von ihnen eine Zahl über drei oder gleich drei hat, haben wir einen Gewinner und das Spiel sollte enden. In einem solchen Fall nennen wir die Addtoscore -Methode, die die Ergebnisse der Spieler über LocalStorage fortsetzt.

Ein Wort über den lokalen Speicher

LocalStorage ist Teil der Webspeicherspezifikation und bietet einen ziemlich guten Browser -Unterstützung. Sie können Daten (ähnlich wie mit Cookies) auf dem Maschine des Benutzers speichern und darauf zugreifen, wann immer Sie möchten.

Sie können auf verschiedene Weise auf die API zugreifen, zum Beispiel genauso wie Sie es zu den Eigenschaften eines regulären Objekts tun würden:

<span>addNotification: (msg = "I am a message") -></span>

Lokaler Speicher speichert immer Saiten. Wenn Sie also ein Objekt oder ein Array speichern möchten, müssten Sie JSON.Stringify verwenden, wenn Sie das Array/Objekt und JSON.PARSE beim Abrufen speichern.

Unsere Addtoscore -Methode verwendet diese Tatsache:

<span><span><span><div</span> class<span>="wrapper"</span>></span>
</span>  <span><span><span><header</span> class<span>="text-center"</span>></span>
</span>    <span><span><span><h1</span>></span>Tic Tac Toe<span><span></h1</span>></span>
</span>  <span><span><span></header</span>></span>
</span>
  <span><span><span><div</span> id<span>="board"</span>></span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="alerts welcome"</span>></span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="notifications"</span>></span><span><span></div</span>></span>
</span>
  <span><span><span><form</span> action<span>=""</span> method<span>="POST"</span>></span>
</span>    ...
  <span><span><span></form</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span><script</span> src<span>="jquery.min.js"</span>></span><span><span></script</span>></span>
</span><span><span><span><script</span> src<span>="logic/app.js"</span>></span><span><span></script</span>></span></span>

zeigt auch, wie Sie Klammern in Coffeescript (JSON.Stringify) weglassen können, obwohl dies nur für die äußersten Funktionsaufrufe empfohlen wird.

Als nächstes haben wir ein paar Versorgungsmethoden. Wir verwenden LeereStorageVar, um den Inhalt einer bestimmten horizontalen Reihen oder Diagonale zu löschen. Dies ist notwendig, da zwei Diagonale auf der Tafel vorhanden sind und in unserer Tschackmethode dieselbe Dateneigenschaft für beide Diagonalen verwenden. Daher müssen wir die Eigenschaft löschen, bevor wir die zweite Diagonale überprüfen. Gleiches gilt für die horizontalen Reihen.

<span><span>.square:nth-of-type(<span>3n + 1</span>)</span> {
</span>  <span>clear: both;
</span><span>}</span>

Erhalten Sie die Spielernamen

Wenn das Formular mit den Namen der Spieler zu Beginn eines Spiels eingereicht wird, können wir die Standardaktion verhindern und die Einreichung mit JavaScript verarbeiten. Wir überprüfen, ob es einen leeren Namen gibt oder ob beide Namen gleich sind, und zeigen eine freundliche Warnung an, wenn ja. Ansonsten starten wir das Spiel, indem wir Tic.initialize ().

nennen.

<span><span>.square.x</span> {
</span>  <span>color: crimson;
</span><span>}
</span>
<span><span>.square.o</span> {
</span>  <span>color: #3997ff;
</span><span>}</span>

Die endgültige Zeile verwendet eine Ereignisdelegation, um ein Element mit dem Klassenspiel zu haben, das auf einen Klick antwortet. Eine Ereignisdelegation ist erforderlich, da dieses Element nur nach Abschluss eines Spiels zu einer Seite hinzugefügt wird. Es ist nicht vorhanden, wenn das DOM zum ersten Mal gerendert wird.

$ <span>->
</span>  <span>Tic =
</span>    <span>data:
</span>      <span>turns: 0
</span>      <span>x: {}
</span>      <span>o: {}
</span>      <span>gameOver: false</span>

alles zusammenfügen

Und das war's. In weniger als 150 Zeilen von Coffeescript haben wir ein Arbeitsspiel. Vergessen Sie nicht, Sie können den Code aus diesem Tutorial aus GitHub herunterladen.

Siehe den Stift Tic-Tac-Toe von sitepoint (@sinepoint) auf CodePen.

Schlussfolgerung

Ich hoffe, dass dieses Tutorial Ihr Wissen über Coffeescript festigte und Ihnen gezeigt hat, wie JQuery und Coffeescript zusammenarbeiten können. Es gibt viele Dinge, die Sie tun können, um das Spiel zu verbessern. Sie können beispielsweise eine Option hinzufügen, um die Platine von ihren Standard -3 × 3 -Abmessungen zu unterscheiden. Sie können eine einfache KI implementieren, damit die Spieler gegen die Maschine spielen können, oder Sie können Bomben im Spiel implementieren, z. Durch Hinzufügen eines zufälligen X oder O bei einem zufälligen Spielzug, während die Spieler um Ruhm kämpfen.

häufig gestellte Fragen (FAQs) zu Coffeescript und TIC TAC Toe Game

Wie kann ich mit Coffeescript beginnen, um ein Tic TAC Toe -Spiel zu erstellen? Coffeescript ist eine kleine Sprache, die in JavaScript kompiliert. Es bietet eine bessere Syntax, die die schrulligen Teile von JavaScript vermeidet und immer noch die Flexibilität und Schönheit der Sprache behält. Sie können zunächst die Grundlagen von Coffeescript von der offiziellen Website oder anderen Online -Ressourcen lernen. Sobald Sie ein grundlegendes Verständnis haben, können Sie Ihr TIC TAC Toe -Spiel codieren. Sie können jeden Texteditor zum Schreiben Ihres Codes verwenden und ihn dann mit dem Coffeescript -Compiler in JavaScript zusammenstellen. eines Tic Tac Toe -Spiels in Coffeescript ähneln jeder anderen Programmiersprache. Dazu gehören das Spielbrett, die Spieler und die Spiellogik. Das Spielbrett ist ein 3 × 3 -Netz, in dem die Spieler ihre Markierungen platzieren. Die Spieler sind normalerweise zwei und wechseln sich ab, um ihre Noten auf das Spielbrett zu platzieren. Die Spiellogik enthält die Spielregeln, z. B. wie ein Spieler gewinnt, was passiert, wenn das Spiel ein Unentschieden ist und so weiter.

Erstellen eines Spielbretts für TIC TAC Toe in Coffeescript beinhaltet die Definition einer 3 × 3 -Matrix. Dies kann mit einem Array von Arrays erfolgen. Jedes innere Array repräsentiert eine Zeile auf dem Spielbrett, und jedes Element im inneren Array repräsentiert eine Zelle auf dem Spielbrett. Anfangs sind alle Zellen leer. Wenn ein Spieler eine Bewegung macht, wird die entsprechende Zelle in der Matrix mit der Marke des Spielers aktualisiert. Board und überprüfen, ob das Spiel gewonnen wurde. Wenn ein Spieler einen Schritt macht, müssen Sie die entsprechende Zelle im Spielbrett mit der Marke des Spielers aktualisieren. Dann müssen Sie überprüfen, ob der Spieler das Spiel gewonnen hat. Dies kann durch Überprüfen aller möglichen Gewinnkombinationen von Zellen erfolgen.

Wie kann ich überprüfen, ob ein Spieler das Spiel in Coffeescript gewonnen hat? Überprüfen Sie alle möglichen Gewinnkombinationen von Zellen. Es gibt 8 mögliche Gewinnkombinationen: 3 Zeilen, 3 Säulen und 2 Diagonalen. Sie können jede Kombination überprüfen, um festzustellen, ob alle Zellen in der Kombination die gleiche Marke haben, was die Marke des aktuellen Players ist. Wenn ja, hat der Spieler das Spiel gewonnen. Der Spieler hat das Spiel gewonnen. Wenn alle Zellen markiert sind und kein Spieler gewonnen hat, ist das Spiel ein Unentschieden. Sie können dies nach dem Umzug jedes Spielers überprüfen.

Wie kann ich meinen Coffeescript -Code in JavaScript zusammenstellen? Sie können den Compiler mit NPM, dem Node.js -Paket -Manager, installieren. Nach der Installation können Sie Ihren Coffeescript -Code mit dem Befehl kaffee in javaScript zusammenstellen, gefolgt von der Option -c und dem Namen Ihrer Coffeescript -Datei.

Kann ich JQuery mit Coffeescript verwenden? Sie können JQuery mit Coffeescript verwenden. CoffeeScript kompiliert in JavaScript, sodass Sie jede JavaScript -Bibliothek damit verwenden können, einschließlich JQuery. Sie können JQuery verwenden, um das DOM zu manipulieren, Ereignisse zu erstellen, Animationen und mehr zu erstellen. Verwendet, um JavaScript zu debuggen. Die meisten modernen Browser sind mit integrierten Entwickler-Tools ausgestattet, die einen JavaScript-Debugger enthalten. Sie können diesen Debugger verwenden, um Ihren Code durchzusetzen, Variablen zu inspizieren und vieles mehr. Beachten Sie, dass Sie den kompilierten JavaScript -Code, nicht den ursprünglichen Coffeescript -Code, debuggen.

Wo kann ich mehr über Coffeescript erfahren? Eine detaillierte Anleitung, ein Verweis auf die Sprachsyntax und Beispiele. Es gibt auch viele Online -Tutorials und Kurse auf Websites wie Codecademy, Udemy und Coursera. Darüber hinaus finden Sie viele Open-Source-CoffeeScript-Projekte auf GitHub, um aus dem realen Code zu lernen.

Das obige ist der detaillierte Inhalt vonPraktisches Kaffeekript: Ein Tic-Tac-Toe-Spiel machen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!