Practical CoffeeScript: Faire un jeu tic-tac-toe

CoffeeScript est une petite langue qui compile en JavaScript. Il n'y a pas d'interprétation lors de l'exécution depuis que vous écrivez CoffeeScript, le compile à JavaScript et utilisez les fichiers JavaScript résultants pour votre application. Vous pouvez utiliser n'importe quelle bibliothèque JavaScript (par exemple JQuery) à partir de CoffeeScript, simplement en utilisant ses fonctionnalités avec la syntaxe Coffeescript appropriée. CoffeeScript peut être utilisé à la fois pour écrire JavaScript sur le front-end et JavaScript sur le back-end.

Les plats clés

• COFFEEScript Efficacité: CoffeeScript réduit considérablement la quantité de code nécessaire, avec une réduction de 36% des caractères par rapport au JavaScript, améliorant la lisibilité et la maintenance.
• Développement rapide: la syntaxe concise de Coffeescript et la portée automatique des variables empêchent les erreurs courantes et accélèrent le temps de développement.
• Intégration et compilation: CoffeeScript s'intègre de manière transparente aux bibliothèques JavaScript comme jQuery et Compiles en JavaScript, permettant une utilisation dans le développement frontal et back-end.
• Détails de la mise en œuvre du jeu: Le jeu TIC-TAC-TOE utilise une structure claire avec un tableau, des statistiques des joueurs et des mises à jour de statut de jeu, toutes gérées via la syntaxe et jQuery simplifiées de Coffeescript pour DOM.
• fonctionnalités améliorées avec CoffeeScript: utilise des fonctionnalités telles que des boucles, des conditions et un stockage local pour gérer les états de jeu, les mouvements des joueurs et la notation, démontrant l'application pratique de CoffeeScript dans les projets Web.

Alors pourquoi CoffeeScript?

Moins de code

Selon le petit livre sur CoffeeScript, la syntaxe de Coffeescript réduit la quantité de caractères que vous devez taper pour faire fonctionner votre JS d'environ 33% à 50%. Je présenterai un jeu Tic-Tac-Toe simple créé à l'aide de CoffeeScript (vous avez probablement déjà deviné cela à partir du titre) qui, dans son format Raw CoffeeScript, contient 4963 caractères, tandis que le code JavaScript compilé contient 7669 caractères. C'est une différence de 2706 caractères ou 36%!

temps de développement plus rapide

Parce que vous écrivez plus court, moins sujet aux erreurs (par exemple, les variables sont automatiquement encapées, ce qui signifie que vous ne pouvez pas écraser accidentellement les globaux en omettant VAR), vous pouvez terminer vos projets plus rapidement. La syntaxe laconique de Coffeescript rend également un code plus lisible, et finalement le code qui est plus facile à entretenir.

Pour commencer

Dans cet article, nous construisons un simple jeu Tic-Tac-Toe avec CoffeeScript et JQuery. Si vous voulez lire la syntaxe avant d'examiner un cas pratique, je suggère à mon accélération votre développement JavaScript avec CoffeeScript ici à SitePoint. Cela détaille également comment installer CoffeeScript via NPM (le gestionnaire de package de nœuds).

Comme jamais, tout le code de ce tutoriel est disponible sur github et une démo est disponible sur codepen ou à la fin du tutoriel.

Les commandes CoffeeScript les plus courantes que vous utiliserez sont:

Café -C Le nom de fichier compilera le fichier CoffeeScript dans un fichier avec le même nom mais avec une extension .js (les fichiers Coffeescript ont généralement une extension .Coffee).

Café -CW Le nom de fichier surveillera les modifications d'un fichier (chaque fois que vous enregistrez le fichier) et le compile.

Café -CW Foldername / Va surveiller les modifications de tous les fichiers .Coffee dans le dossier et les compiler dans le même répertoire lorsqu'il y a des modifications.

Enfin, il est pratique de compiler CoffeeScript à partir d'un dossier avec des fichiers .Coffee à un dossier contenant uniquement des fichiers .js.

Coffee -O JS / -CW / Coffee surveillera les modifications dans tous les fichiers .Coffee situés dans le dossier de café et placeront la sortie (JavaScript) dans le dossier JS.

Si vous n'êtes pas dans les terminaux, vous pouvez utiliser un outil avec une interface graphique pour gérer vos fichiers CoffeeScript. Par exemple, vous pouvez essayer Prepros sur un essai illimité gratuit (bien que vous deviez l'acheter si vous l'aimez). L'image ci-dessous montre certaines des options qu'il propose:

Vous pouvez voir que Prepros fait tout le travail pour vous - il configure les observateurs afin que vos fichiers .Coffee soient compilés en js, il vous permet d'utiliser UGLIFY JS qui divisera / compressera votre code, il peut automatiquement masquer les variables Et il prend en charge le coffrese de CoffeeScrip. Prepros peut également être utilisé pour les préprocesseurs CSS tels que moins et les moteurs Sass et Modèle comme Jade.

le jeu

Commençons par le balisage:

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

L'interface du jeu comprend les éléments suivants:

• un en-tête qui décrit brièvement le jeu
• un élément div avec l'ID de la carte qui est l'endroit où les carrés 3 × 3 seront situés
• un élément div avec une classe d'alertes, c'est là que l'état du jeu sera affiché
• un élément div avec une classe de notifications qui montrera qui joue X et O, ainsi que les statistiques générales des joueurs.
• un formulaire qui ne sera affiché que lorsque le jeu se charge et invite les joueurs à entrer leurs noms.

conformément aux meilleures pratiques, jQuery et le script qui font cocher notre application sont chargés avant la balise du corps de clôture.

le style

En utilisant CSS, nous pouvons faire apparaître les neuf carrés impliqués dans une grille 3 × 3 en flottant chaque carré et en nettoyant chaque 4ème.

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

Nous pouvons également ajouter une couleur différente aux carrés selon qu'ils ont la classe X ou O (qui est ajouté en utilisant JavaScript).

<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 en action

Pour référence, vous pouvez trouver le fichier principal CoffeeScript ici.

Vous pouvez voir notre application tic-tac-TOE commence par $ ->, cela équivaut à la fonction de jQuery qui exécute le code lorsque le dom est prêt: $ (function () {...});.

CoffeeScript ne reposait pas sur les demi-colons et les accolades mais sur l'indentation. -> indique à CoffeeScript que vous définissez une fonction afin que vous puissiez démarrer le corps de la fonction sur la ligne suivante et mettre le corps avec deux espaces.

Ensuite, nous créons un objet appelé tic qui contient lui-même un objet appelé données. Vous pouvez voir que les accolades ou les virgules ne sont pas obligatoires lors de la création d'objets, tant que vous induisez correctement les propriétés.

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

La propriété Turns conservera le nombre total de tours pris dans le jeu. Nous pouvons vérifier s'il contient un nombre uniforme ou inégal et de cette manière déterminez s'il s'agit du tour de X ou O.

Les propriétés X et O sont des objets et contiendront des données relatives au nombre de X ou O sur les trois axes qui sont importants pour le jeu: horizontal, vertical et diagonal. Ils seront mis à jour sur chaque mouvement via la méthode Checkend pour représenter la distribution de X et O sur le tableau. La méthode Checkend appellera ensuite CheckWin pour déterminer s'il y a un gagnant.

Après cela, nous avons une méthode à l'intérieur de l'objet tic qui fera tout fonctionner:

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

Remarquez l'utilisation de @ qui se compile au mot clé JavaScript. Comme illustré dans la première propriété de l'initialisation, vous pouvez sauter le point après le mot-clé @ lors de la définition ou de l'appel d'une propriété ou d'une méthode.

En donnant aux méthodes des noms raisonnables, nous avons une bonne idée de ce qu'ils font:

• SetPlayernames stocke les valeurs saisies par les utilisateurs dans les entrées dans l'objet de données.
• Retriestats récupère les statistiques du joueur de LocalStorage et les définit dans l'objet de données.
• AssignRoles détermine qui joue X et qui joue O.
• Préparer le tableau cache le formulaire, supprime toutes les notifications, vide la planche et la remplit de neuf carrés vides.
• UpdaTenotifications met à jour l'interface utilisateur avec des informations sur qui joue X et qui joue O, ainsi que les statistiques du joueur.
• AddListeners attache les auditeurs d'événements, afin que nous puissions répondre aux joueurs qui font un mouvement.

plonger plus profondément

Regardons plus de ces méthodes plus en détail.

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

Ici, nous itons neuf fois et ajoutez neuf divs avec une classe de carré à la planche vide afin de le remplir. Cela montre comment CoffeeScript vous permet d'écrire des boucles à une ligne et de déclarer le corps de la boucle avant d'écrire la condition elle-même.

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

CoffeeScript permet une interpolation de chaîne qui augmente la lisibilité et réduit la complexité et la longueur du code. Vous pouvez ajouter un # {} dans n'importe quelle chaîne et insérer n'importe quelle variable ou une valeur de retour à partir d'un appel de fonction dans les accolades.

<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>

La méthode d'addnotification illustre la façon dont vous définissez les paramètres dans CoffeeScript. Vous les écrivez avant la flèche (->):

Vous pouvez fournir des valeurs par défaut pour les paramètres similaires à PHP:

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

Lorsqu'une fonction avec un paramètre par défaut est compilée, elle est convertie en:

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

Enfin, tournons-nous vers la méthode 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>

Nous voyons ici que CoffeeScript offre des mots clés supplémentaires pour représenter les valeurs de vérité et de fausseté telles que non, oui, hors de temps en temps. De plus,! ==, ===, && ,! Peut être représenté en utilisant IST, IS, et et non en conséquence.

Vous pouvez faire des conditions lisibles à une seule ligne en utilisant si ... alors ... else ... Syntaxe.

La mécanique du jeu

La méthode de Workhorse Checkend vérifie s'il y a un gagnant chaque fois qu'un joueur fait un pas. Il le fait en itérant sur la planche et en comptant les carrés qui appartiennent à X et O. Il vérifie d'abord les axes diagonaux, puis la verticale, puis l'horizontal.

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

Comme vous pouvez le voir, cela utilise une autre fonctionnalité de coffrees à portée de coffre - 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>

Cela bouclera trois fois, réglant la ligne égale à 0, 1 et 2 dans cet ordre. Alternativement, [0 ... 2] (une plage exclusive) entraînerait seulement deux itérations, définissant une ligne égale à 0 et 1.

Dans la vérification horizontale, nous voyons à nouveau comment l'indentation est cruciale pour déterminer ce qui fait partie de la boucle et ce qui est en dehors de la boucle - seulement l'appel de chèque est à l'intérieur de la boucle intérieure.

voici à quoi ressemble Checkfield:

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

<p> Cette méthode démontre l'utilisation du? Mot-clé, qui lorsqu'il est inséré à côté d'une variable dans un conditionnel, compile à: </p>

<pre class="brush:php;toolbar:false"><span>updateNotifications: ->
</span>  <span>$(".notifications").empty().show()
</span>  @<span>.addNotification "#{@data.player1} is playing #{@data.rolep1}"
</span>  <span>...</span>

qui est évidemment assez pratique.

Ce que fait la méthode CheckField, c'est ajouter un à l'axe approprié de la propriété X ou O en fonction du nom de classe du carré qui a été cliqué. Le nom de classe est ajouté lorsqu'un utilisateur clique sur un carré de carte vide dans la méthode AddListeners.

Cela nous amène à la méthode Checkwin, qui est utilisée pour vérifier si l'un des joueurs a gagné le jeu:

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

Dans CoffeeScript, vous pouvez utiliser pour ... dans le tableau pour boucler sur les valeurs du tableau et pour la clé, la valeur de l'objet à boucler sur les propriétés d'un objet. CheckWin utilise ceci pour vérifier toutes les propriétés à l'intérieur des objets X et O. Si l'un d'eux détient un nombre supérieur ou égal à trois, alors nous avons un gagnant et le jeu devrait se terminer. Dans un tel cas, nous appelons la méthode AddToscore qui persiste les résultats des joueurs via LocalStorage.

un mot sur le stockage local

LocalStorage fait partie des spécifications de stockage Web et a une assez bonne prise en charge du navigateur. Il vous permet de stocker des données (similaires aux cookies) sur la machine de l'utilisateur et d'y accéder quand vous le souhaitez.

Vous pouvez accéder à l'API de plusieurs manières, par exemple comme vous le feriez aux propriétés d'un objet ordinaire:

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

Le stockage local enregistre toujours des chaînes, donc si vous souhaitez stocker un objet ou un tableau, vous auriez à utiliser JSON.Strification lors du stockage du tableau / objet et JSON.Parse lors de la récupération.

Notre méthode AddToscore utilise ce fait:

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

Il montre également comment vous pouvez omettre les parenthèses dans CoffeeScript (JSON.Strifify), bien que cela soit recommandé pour les appels de fonction les plus extérieurs.

Ensuite, nous avons quelques méthodes d'utilité. Nous utilisons videstoragevar pour effacer le contenu d'une ligne ou d'une diagonale horizontale particulière. Ceci est nécessaire car il y a deux diagonales sur le tableau et à l'intérieur de notre méthode Chekend, nous utilisons la même propriété de données pour les deux diagonales. Par conséquent, nous devons effacer la propriété avant de vérifier la deuxième diagonale. Il en va de même pour les rangées horizontales.

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

Obtenir les noms des joueurs

Lorsque le formulaire avec les noms des joueurs est soumis au début d'un jeu, nous pouvons empêcher son action par défaut et gérer la soumission à l'aide de JavaScript. Nous vérifions s'il y a un nom vide ou si les deux noms sont les mêmes et affichent une alerte amicale si c'est le cas. Sinon, nous commençons le jeu en appelant Tic.Initialize ().

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

La ligne finale utilise la délégation d'événements pour avoir n'importe quel élément avec la classe Play-Again répond à un clic. La délégation d'événements est nécessaire, car cet élément n'est ajouté qu'à une page une fois le jeu terminé. Il n'est pas présent lorsque le DOM est rendu pour la première fois.

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

Mettre tout cela ensemble

Et c'est tout. Dans moins de 150 lignes de coffreescript, nous avons un jeu de travail. N'oubliez pas, vous pouvez télécharger le code à partir de ce tutoriel à partir de GitHub.

Voir le stylo-tac-toe par SitePoint (@SitePoint) sur Codepen.

Conclusion

J'espère que ce tutoriel a solidifié vos connaissances sur CoffeeScript et vous a montré comment JQuery et CoffeeScript peuvent fonctionner ensemble. Il y a beaucoup de choses que vous pouvez faire pour améliorer le jeu. Par exemple, vous pouvez ajouter une option pour rendre la carte différente de ses dimensions 3 × 3 standard. Vous pouvez implémenter une IA simple afin que les joueurs puissent jouer contre la machine, ou vous pouvez implémenter des bombes dans le jeu, par exemple En ajoutant un X ou O aléatoire sur un mouvement de jeu aléatoire pendant que les joueurs se battent pour la gloire.

Les questions fréquemment posées (FAQ) sur CoffeeScript et Tic Tac Toe Game

Comment puis-je commencer par CoffeeScript pour avoir créé un jeu Tic Tac Toe?

Pour commencer par CoffeeScript pour créer un jeu Tic Tac Toe, vous devez d'abord avoir une compréhension de base de CoffeeScript. CoffeeScript est un petit langage qui se compile en JavaScript. Il offre une meilleure syntaxe en évitant les parties originales de JavaScript, conservant toujours la flexibilité et la beauté de la langue. Vous pouvez commencer par apprendre les bases de CoffeeScript à partir du site officiel ou d'autres ressources en ligne. Une fois que vous avez une compréhension de base, vous pouvez commencer à coder votre jeu Tic Tac Toe. Vous pouvez utiliser n'importe quel éditeur de texte pour écrire votre code, puis le compiler dans JavaScript à l'aide du compilateur CoffeeScript.

Quels sont les composants de base d'un jeu Tic Tac Toe dans CoffeeScript?

Les composants de base d'un jeu Tic Tac Toe dans CoffeeScript est similaire à tout autre langage de programmation. Ils incluent le plateau de jeu, les joueurs et la logique du jeu. Le plateau de jeu est une grille 3 × 3 où les joueurs placent leurs marques. Les joueurs sont généralement deux et ils se relaient pour placer leurs notes sur le plateau de jeu. La logique du jeu comprend les règles du jeu, comme la façon dont un joueur gagne, que se passe-t-il lorsque le jeu est un tirage, etc.

La création d'un tableau de jeu pour Tic Tac Toe dans CoffeeScript implique de définir une matrice 3 × 3. Cela peut être fait en utilisant un tableau de tableaux. Chaque tableau intérieur représente une ligne sur le plateau de jeu, et chaque élément du tableau intérieur représente une cellule sur le plateau de jeu. Initialement, toutes les cellules sont vides. Lorsqu'un joueur fait un mouvement, la cellule correspondante de la matrice est mise à jour avec la marque du joueur.

Comment puis-je gérer les mouvements des joueurs dans CoffeeScript?

Gestion des mouvements du joueur dans CoffeeScript implique la mise à jour du jeu monter à bord et vérifier si le jeu a été gagné. Lorsqu'un joueur fait un mouvement, vous devez mettre à jour la cellule correspondante dans le plateau de jeu avec la marque du joueur. Ensuite, vous devez vérifier si le joueur a remporté le match. Cela peut être fait en vérifiant toutes les combinaisons gagnantes possibles de cellules.

Comment puis-je vérifier si un joueur a gagné le jeu dans CoffeeScript?

Vérifier si un joueur a gagné le jeu dans CoffeeScript implique Vérifier toutes les combinaisons gagnantes possibles de cellules. Il y a 8 combinaisons gagnantes possibles: 3 rangées, 3 colonnes et 2 diagonales. Vous pouvez vérifier chaque combinaison pour voir si toutes les cellules de la combinaison ont la même marque, qui est la marque du joueur actuel. Si oui, le joueur a gagné le jeu.

Comment puis-je gérer un match nul dans CoffeeScript?

Gérer un tirage dans CoffeeScript implique de vérifier si toutes les cellules du plateau de jeu ont été marquées et non Le joueur a remporté le match. Si toutes les cellules ont été marquées et qu'aucun joueur n'a gagné, le jeu est un match nul. Vous pouvez vérifier cela après le mouvement de chaque joueur.

Comment puis-je compiler mon code CoffeeScript dans JavaScript?

La compilation de votre code CoffeeScript en JavaScript peut être effectuée en utilisant le compilateur CoffeeScript. Vous pouvez installer le compilateur à l'aide de NPM, le gestionnaire de package Node.js. Une fois installé, vous pouvez compiler votre code CoffeeScript dans JavaScript en utilisant la commande de café suivie de l'option -c et du nom de votre fichier CoffeeScript.

Puis-je utiliser jQuery avec CoffeeScript?

Oui, oui, oui, oui, oui, oui, oui, oui, oui, oui, oui, oui, oui, oui, oui, oui, oui, oui Vous pouvez utiliser jQuery avec CoffeeScript. CoffeeScript se compile en JavaScript, vous pouvez donc utiliser n'importe quelle bibliothèque JavaScript avec, y compris jQuery. Vous pouvez utiliser jQuery pour manipuler le DOM, gérer les événements, créer des animations et plus encore.

Comment puis-je déboguer mon code CoffeeScript?

Le débogage de votre code CoffeeScript peut être fait en utilisant les mêmes outils que vous que vous Utiliser pour déboguer JavaScript. La plupart des navigateurs modernes sont livrés avec des outils de développeur intégrés qui incluent un débogueur JavaScript. Vous pouvez utiliser ce débogueur pour parcourir votre code, inspecter les variables, etc. Notez que vous déboguerez le code JavaScript compilé, pas le code CoffeeScript original.

Où puis-je en savoir plus sur CoffeeScript?

Vous pouvez en savoir plus sur CoffeeScript sur le site officiel, qui comprend Un guide détaillé, une référence à la syntaxe linguistique et des exemples. Il existe également de nombreux tutoriels et cours en ligne disponibles sur des sites Web comme CodeCademy, Udemy et Coursera. De plus, vous pouvez trouver de nombreux projets CoffeeScript open source sur GitHub pour apprendre du code du monde réel.