$ npx degit sveltejs / template tic-tac-toe-svelte [19659018] npx  vous permet d'utiliser la commande  degit  sans l'installer globalement. 
 Avant  npx nous devions suivre les deux étapes suivantes pour obtenir le même résultat: [19659017] $ npm install --global degit
$ degit sveltejs / template tic-tac-toe-svelte 

 $ cd tic-tac-toe-svelte
$ fil 

 import App depuis './App .svelte';

const app = new App ({
    cible: document.body,
    accessoires: {
        nom: 'monde'
    }
});

export default app; 

 



 Bonjour {name}! 
 

 [1965



 

 importation de l'application depuis './App.svelte'

const app = new App ({
  cible: document.body,
})

export default app 

Ici, nous initialisons une variable constante titre avec une chaîne Tic Tac Toe .

Ensuite, dans le balisage ci-dessous, nous utilisons une syntaxe spéciale Svelte, svelte: head pour définir la propriété titre dans la balise head .

semblable à ceci:

Mais l'avantage d'utiliser la syntaxe svelte: head est que le titre peut être modifié à l'exécution.

Nous utilisons ensuite le même titre . propriété dans notre h1 tag. Il devrait maintenant ressembler à ceci:

Créez maintenant deux autres fichiers dans le répertoire src / nommé Board.svelte . et Square.svelte .

Ouvrez Square.svelte et collez ce qui suit:

 



 {valeur}  

Nous créons un bouton et l’appelons.

Ouvrez maintenant Board.svelte et collez le texte suivant:

 




   {# chaque carré comme carré, i}
    
  {/chaque}
 

Nous avons importé ici le composant Square . Nous avons également initialisé le tableau de carrés qui contiendra les données de nos X et 0 qui sont actuellement null .

] Chaque boucle dans Svelte

Dans le balisage HTML, nous avons utilisé une syntaxe Svelte spéciale pour la mise en boucle. Ceci est similaire à la boucle Array.forEach en JavaScript vanillé. La syntaxe est la suivante:

 {# chaque carré est carré, i}
    
{/ each} 

Il boucle plus de neuf fois, puisque carrés.longueur est égal à 9 . La valeur du carré dans la première itération est null puisque le premier élément est null et la valeur de i est 0 car l'indice est 0 la première fois. La valeur du carré reste null à chaque itération, puisque toutes les valeurs du tableau sont null mais la valeur de i continue à augmenter de 0 à 8 en tant que valeur d'indice.

Il passe ensuite la valeur de i à la valeur . ] valeur accessoire pour le composant Square .

Il devrait maintenant ressembler à ceci:

Nous avons maintenant le ajoutons un peu de logique.

Premièrement, nous devons afficher le prochain mouvement, qu’il s’agisse de X ou de 0 . Aussi, assurons-nous que les carrés peuvent être cliqués avec X et 0 .

Pour ce faire, ajoutez le code suivant à Board.svelte : [19659030]

{status}

Le code ci-dessus initialise une variable xIsNext pour qu'elle soit booléenne. Ce booléen continuera à basculer en ce qui concerne le prochain mouvement.

Si X est le prochain mouvement, alors xIsNext sera vrai . Si 0 est le prochain mouvement, alors xIsNext sera faux . Par défaut, il est défini sur true .

Nous avons ensuite la variable status . Il s’agit d’un type spécial de variable appelé affectation réactive. Si vous mettez un signe dollar ($) devant celui-ci, il devient réactif aux changements. Donc, si xIsNext change à nouveau, alors le statut sera mis à jour à sa nouvelle valeur. Quand xIsNext est égal à vrai le statut sera prochain joueur: X et quand xIsNext est égal à . false statut sera Prochain joueur: 0 .

Ensuite, nous passons la valeur de comme carré . Cela affichera X ou 0 en fonction du contenu

Nous avons ensuite une fonction handleClick qui est appelée lorsqu'un clic est fait sur un carré. La fonction handleClick doit être transmise au composant Square sous la forme d’un accessoire, où il est implémenté pour écouter un clic. Donc, sans changer Square.svelte le clic sur la case ne fonctionnera pas.

De toute façon, la fonction handleClick est passée à un index i puisque nous Il faut stocker le contenu du tableau dans notre tableau carré pour comparer si quelqu'un gagne ou perd ou pour vérifier s'il s'agit d'un match nul.

La première ligne, qui est un si est nécessaire pour nous assurer de ne pas modifier le contenu d'un carré s'il est déjà rempli. Si c'est déjà null alors seulement il entrera dans le corps si est soumis à la condition.

La deuxième ligne vérifie la valeur de xIsNext et s'il s'agit de ] true il attribue X à la valeur du carré et, s'il est false il attribue à 0 la valeur du carré. [19659003] Enfin, xIsNext est basculé pour jouer le prochain coup.

Maintenant, éditez Square.svelte comme suit:

 



 {valeur || ""}  

La seule chose que nous avons ajoutée ici est une exportation nommée handleClick et un sur: cliquez sur [Handler] sur bouton qui pointe à handleClick . Ceci est passé de Board.svelte . Sans le code ci-dessus, le clic ne fonctionnera pas. De plus, nous affichons le contenu à l'intérieur du bouton uniquement si ce n'est pas null - autrement dit, nous affichons uniquement si X et 0 est présent.

Il ressemble maintenant à ceci:

Si vous essayez de cliquer à l'intérieur des carrés, alors X et 0 s'afficheront de manière appropriée. Vous pouvez également voir le statut changer comme suit:

Trouver un gagnant

Maintenant que nous pouvons jouer au jeu, essayons de trouver un gagnant, un perdant ou pour vérifier si c'est un match nul.

Ouvrez Board.svelte et ajoutez ce qui suit:

Dans le code ci-dessus, nous initialisons un gagnant . variable qui garde la trace du gagnant. Au départ, il s’agit de null . Ensuite, après chaque clic, nous appelons la calculateur Gagnant comme vous pouvez le voir dans la fonction handleClick et définissez sa valeur de retour sur gagnant .

CalculateWinner ] est une fonction qui prend dans le tableau squares et décide du vainqueur. winningCombo est un tableau qui détermine la combinaison gagnante. Pour gagner un match X et 0 vous devez disposer d'une ligne droite verticale ou horizontale ou d'une ligne diagonale. Le tableau ci-dessus est une liste possible de combinaisons gagnantes.

Dans la boucle pour nous vérifions si les valeurs figurant dans le tableau carrés sont en ligne droite (horizontale ou verticale). ou ligne diagonale en comparant les indices. S'ils le sont, nous déclarons un gagnant. Si ce n’est pas le cas, nous vérifions si toutes les valeurs sont remplies et si c’est vrai, alors c’est un match nul, car nous n’avons plus de places pour jouer X et 0 . Sinon, nous retournons null si le jeu est toujours lancé.

Enfin, nous ajoutons la syntaxe spécifique à Svelte pour si ... else . Si le vainqueur n'est pas null affichez le vainqueur sinon affichez le statut .

Si quelqu'un gagne, il doit maintenant rechercher comme ceci:

Et si c'est un nul, il devrait maintenant ressembler à ceci:

]

Ajoutons maintenant un moyen de redémarrer le jeu.

Dans le même fichier Board.svelte ajoutez ce qui suit:

 

.
.
.

{#si gagnant}
   Jeu de redémarrage 
{/ if} 

Le code ci-dessus ajoutera un bouton Redémarrer le jeu à l'application, qui appellera la fonction restartGame qui réinitialise toutes les valeurs nécessaires pour un nouveau départ. 19659003] Donc, si vous gagnez un match ou obtenez un match nul, vous devriez voir l'écran suivant avec le bouton Redémarrer le jeu :

[19659003] Le fichier entier Board.svelte devrait maintenant ressembler à ceci:

Vous pouvez maintenant créer le code de production en tapant ce qui suit dans le terminal:

Ceci générera un public / bundle.js fichier contenant le code optimisé prêt pour la production.

Le code complet est disponible sur Github .

Vous pouvez trouver la démonstration de l'application ] ici .

Conclusion

Dans ce tutoriel, nous avons construit un jeu complet en utilisant Svelte. Nous avons appris beaucoup de choses en construisant notre jeu Tic Tac Toe.

Svelte est un tout nouveau compilateur qui peut être utilisé pour créer des applications Web ultra-rapides. Il est très différent des frameworks traditionnels dans le sens où il convertit tout en JavaScript vanille, ce qui le rend super rapide.

Si vous avez utilisé des frameworks tels que React ou Vue, utiliser Svelte devrait s’avérer très facile. Lancez-vous et vous ne serez pas déçu.

Ce n’était que la partie visible de l’iceberg. Consultez le site officiel pour un contenu plus impressionnant et la section d'exemples qui contient une tonne d'exemples avec une REPL.

Akshay est un créateur, artiste en informatique et micropreneur de Mumbai.