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

Le code utilisé dans ce projet est disponible dans un Dépôt GitHub et son utilisation est gratuite sous la licence MIT. Si vous souhaitez jeter un œil à une version live de ce projet, vous pouvez consulter cette démo.

Pour que Svelte soit opérationnel sur votre machine, il est conseillé d’échafauder le projet avec Vite.js. Pour utiliser Vite, assurez-vous que Node Package Manager (NPM) et Node.js sont installés 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 démarrera un nouveau projet avec l’interface de ligne de commande (CLI) Vite. Nommez votre projet, sélectionnez Svelte comme framework et définissez la variante sur JavaScript. Maintenant, allez 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 dossier src, créez un fichier hangmanArt.js et supprimez les dossiers assets et lib. Effacez ensuite le contenu des fichiers App.svelte et App.css. Dans le fichier App.css, ajoutez ce qui suit :

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

Copiez le contenu du fichier hangmanArt.js depuis le dossier de ce projet. Dépôt GitHub, puis collez-le dans votre propre fichier hangmanArt.js. 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 fichier App.svelte et créez une balise de script qui contiendra l’essentiel de la logique de l’application. Créez un tableau de mots pour contenir une liste de mots.

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

Ensuite, importez le tableau hangmanArt à partir du fichier hangmanArt.js. Ensuite, créez une variable userInput, une variable randomNumber et une autre variable pour contenir un mot sélectionné aléatoirement dans le tableau de mots.

Attribuez le mot sélectionné à une autre variable initiale. En plus des autres variables, créez les variables suivantes : match, message, hangmanStages et sortie. Initialisez la variable de sortie avec une chaîne de tirets, en fonction de la longueur du mot sélectionné. Attribuez le tableau hangmanArt à la variable hangmanStages.

 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éez une fonction generateOutput pour gérer la tâche de génération d’une sortie.

 function generateOutput(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éez une fonction d’évaluation qui déplacera le dessin du pendu à l’étape suivante si le joueur devine mal, ou appelez la fonction generateOutput si le joueur fait une bonne supposition.

 function evaluate() {
  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éez un élément principal qui hébergera tous les autres éléments du jeu. Dans l’élément principal, définissez un élément h1 avec le texte Hangman.

 <h1 class="title">
    Hangman
</h1>

Créez un slogan et affichez la figure du pendu à la première étape uniquement si le nombre d’éléments dans le tableau hangmanStages est supérieur à 0.

 <div class="tagline">
  I'm thinking of a word. Could you guess the letters in that word?
</div>
{#if hangmanStages.length > 0}
  <pre 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}
  <div class="message" bind:this={message}>You Lose...</div>
{/if}
{#if selectedWord === match}
  <div 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}
  <div class="output">
    {#each output as letter}
      {#if letter !== "-"}
        <span class="complete box">{letter}</span>
      {:else}
        <span class="incomplete box" />
      {/if}
    {/each}
  </div>
  <form on:submit|preventDefault={() => evaluate()}>
    <input
      type="text"
      placeholder="Enter a letter"
      maxlength="1"
      bind:value={userInput}
    />
    <button type="submit">Submit</button>
  </form>
{/if}

Vous pouvez désormais ajouter le style approprié à l’application. Créez une balise de style et ajoutez-y 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.2px green;
    height:40px;
    font-size: 15px;
  }

  .box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: inherit;
    border: dotted 1.2px green;
  }

  .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. Étant donné que la syntaxe logique de Svelte est similaire à Vanilla JavaScript, cela en fait le choix idéal si vous souhaitez un framework capable de contenir des éléments 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.

x