Comment créer un jeu du pendu avec Svelte

Svelte est un nouveau framework JavaScript radical qui gagne le cœur des développeurs. Sa syntaxe simple en fait un excellent candidat pour les débutants qui souhaitent se plonger dans le monde des frameworks JavaScript. L'une des meilleures façons d'apprendre est de construire. Dans ce guide, vous apprendrez donc à utiliser les fonctionnalités proposées par Svelte pour créer un jeu de pendu simple.

Comment fonctionne le pendu

Le pendu est un jeu de devinettes de mots généralement joué entre deux personnes, dans lequel un joueur pense à un mot et l'autre joueur essaie de deviner ce mot lettre par lettre. L'objectif du joueur qui devine est de découvrir le mot secret avant de se retrouver à court de suppositions incorrectes.

Lorsque le jeu démarre, l'hôte sélectionne un mot secret. La longueur du mot est généralement indiquée à l'autre joueur (devineur) à l'aide de tirets. Au fur et à mesure que le devineur fait des suppositions incorrectes, des parties supplémentaires du bourreau sont dessinées, progressant de la tête, du corps, des bras et des jambes.

Le devineur gagne la partie s'il parvient à deviner toutes les lettres du mot avant que le dessin de la figure stickman ne soit terminé. Le pendu est un excellent moyen de tester le vocabulaire, le raisonnement et les capacités de déduction.

Configuration de l'environnement de développement

Pour que Svelte soit opérationnel sur votre machine, il est conseillé d'échafauder le projet avec Vite.js. Pour utiliser Vite, assurez-vous d'avoir Gestionnaire de packages de nœuds (NPM) et Node.js installé sur votre machine. Vous pouvez également utiliser un gestionnaire de packages alternatif comme Yarn. Maintenant, ouvrez votre terminal et exécutez la commande suivante :

npm create vite

Cela lancera un nouveau projet avec le Vite Interface de ligne de commande (CLI). Nommez votre projet, sélectionnez Svelte comme cadre et définissez la variante sur Javascript. Maintenant CD dans le répertoire du projet et exécutez la commande suivante pour installer les dépendances :

npm install

Maintenant, ouvrez le projet, et dans le src dossier, créez un penduArt.js fichier et supprimez le actifs et lib dossier. Effacez ensuite le contenu du App.svelte et App.css des dossiers. Dans le App.css fichier, ajoutez ce qui suit :

:root{
background-color: rgb(0, 0, 0);
color:green;
font-family: monospace;
}

Copiez le contenu du penduArt.js fichier de ce projet Dépôt GitHub, puis collez-le dans le vôtre penduArt.js déposer. Vous pouvez démarrer le serveur de développement avec la commande suivante :

npm run dev

Définir la logique de l'application

Ouvrez le App.svelte fichier et créer un scénario balise qui contiendra l’essentiel de la logique de l’application. Créer un mots tableau pour contenir une liste de mots.

let words = [
"appetizer",
"roommates",
"shrinking",
"freedom",
"happiness",
"development",
];

Ensuite, importez le penduArt tableau du penduArt.js déposer. Ensuite, créez une variable entréeutilisateur, une variable nombre aléatoire, et une autre variable pour contenir un mot sélectionné au hasard dans le mots tableau.

Attribuer le mot sélectionné à une autre variable initial. En plus des autres variables, créez les variables suivantes: correspondre, message, penduÉtapes, et sortir. Initialisez la variable de sortie avec une chaîne de tirets, en fonction de la longueur du mot sélectionné. Attribuer le penduArt tableau au bourreauÉtapes variable.

import { hangmanArt } from"./hangmanArt";
let userInput;
let randomNum = Math.floor(Math.random() * (words.length - 1));
let selectedWord = words[randomNum].toUpperCase();
let initial = selectedWord;
let match;
let message;
let hangmanStages = hangmanArt;
let output = "";
[...selectedWord].forEach(() => (output += "-"));
match = output;

Ajouter les fonctionnalités nécessaires

Pendant que le joueur fait une supposition, vous souhaitez lui montrer le résultat. Cette sortie aidera le joueur à savoir s’il a fait la bonne ou la mauvaise supposition. Créer une fonction générer une sortie pour gérer la tâche de génération d’une sortie.

functiongenerateOutput(input1, input2) {
 output = "";
for (let i = 0; i < input1.length; i++) {
if (input2[i] "-") {
 output += input1[i];
 } else {
 output += "-";
 }
 }
}

Pour chaque supposition soumise par le joueur, le programme devra déterminer si c'est la bonne supposition. Créé un évaluer fonction qui déplacera le dessin du pendu à l'étape suivante si le joueur se trompe, ou appellera le générer une sortie fonctionner si le joueur fait une bonne estimation.

functionevaluate() {
let guess = userInput.toUpperCase().trim();
if (!guess) {
return;
 }
if (selectedWord.includes(guess)) {
 selectedWord = selectedWord.replaceAll(guess, "-");
 generateOutput(initial, selectedWord);
 } else {
 hangmanStages.shift();
 hangmanStages = hangmanStages;
 }
 userInput = "";
}

Et avec cela, vous avez complété la logique de l’application. Vous pouvez maintenant passer à la définition du balisage.

Définir le balisage du projet

Créer un principal élément qui hébergera tous les autres éléments du jeu. Dans le principal élément, définissez un h1 élément avec le texte Bourreau.

<h1class="title">
 Hangman
h1>

Créez un slogan et restituez la figure du pendu dans un premier temps uniquement si le nombre d'éléments dans le bourreauÉtapes le tableau est supérieur à 0.

class="tagline">
 I'm thinking of a word. Could you guess the letters in that word?
</div>
{#if hangmanStages.length > 0}
class="hangman">
 {hangmanStages[0]}</pre>
{/if}

Ensuite, implémentez la logique pour afficher un message indiquant si le joueur a gagné ou perdu :

{#if hangmanStages.length 1}

class="message" bind:this={message}>You Lose...</div>
{/if}
{#if selectedWord match}

class="message" bind:this={message}>You Win...</div>
{/if}

Ensuite, affichez la sortie et un formulaire pour accepter les entrées de l'utilisateur. La sortie et le formulaire ne doivent être affichés que si l'élément avec la classe "message" n'est pas à l'écran.

{#if !message}

class="output">
 {#each output as letter}
 {#if letter !== "-"}
class="complete box">{letter}</span>
 {:else}
class="incomplete box" />
 {/if}
 {/each}
 </div>
 evaluate()}>
 type="text"
 placeholder="Enter a letter"
 maxlength="1"
 bind: value={userInput}
 />
"submit">Submit</button>
 </form>
{/if}

Vous pouvez désormais ajouter le style approprié à l'application. Créer un style balise et dedans, ajoutez ce qui suit :

 * {
color: green;
text-align: center;
 }
main {
display: flex;
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
 }
input,
button {
text-transform: uppercase;
background-color: transparent;
border: solid 1.2pxgreen;
height:40px;
font-size: 15px;
 }
.box {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: inherit;
border: dotted 1.2pxgreen;
 }
.output {
display: flex;
font-size: 23px;
font-weight: 600;
height: 45px;
gap: 10px;
justify-content: center;
 }
.hangman {
font-size: 32px;
 }
form {
margin-top: 50px;
 }
.tagline,
.message {
font-size: 20px;
 }

Vous avez créé un jeu du pendu avec Svelte. Bon travail!

Qu'est-ce qui rend Svelte incroyable?

Svelte est un framework relativement facile à maîtriser et à apprendre. La syntaxe logique de Svelte étant similaire à celle de Vanilla JavaScript, cela en fait le choix idéal si vous souhaitez un framework qui peut contenir des choses complexes comme la réactivité, tout en vous donnant la possibilité de travailler avec Vanilla JavaScript. Pour des projets plus complexes, vous pouvez utiliser SvelteKit, un méta-framework développé comme la réponse de Svelte à Next.js.