Découverte de Svelte: Création d’un Jeu du Pendu Interactif
Svelte, une infrastructure JavaScript innovante, séduit de plus en plus les développeurs. Sa simplicité syntaxique en fait un excellent choix pour ceux qui débutent dans l’univers des frameworks JavaScript. L’apprentissage par la pratique étant primordial, ce guide vous accompagnera dans l’utilisation des fonctionnalités de Svelte pour élaborer un jeu du pendu basique.
Fonctionnement du Jeu du Pendu
Le jeu du pendu est un jeu de mots à deviner, habituellement pratiqué entre deux joueurs. L’un choisit un mot, tandis que l’autre tente de le découvrir lettre par lettre. Le but du devineur est de trouver le mot mystère avant d’épuiser ses tentatives incorrectes.
Au commencement du jeu, l’initiateur sélectionne un mot secret. La longueur de ce mot est généralement indiquée au devineur par des tirets. Pour chaque mauvaise supposition du devineur, des parties d’un bonhomme pendu sont progressivement ajoutées, de la tête aux jambes en passant par le corps et les bras.
Le devineur remporte la partie s’il réussit à identifier toutes les lettres du mot avant que le dessin du bonhomme ne soit achevé. Le pendu constitue un excellent exercice pour améliorer le vocabulaire, le raisonnement et les capacités de déduction.
Mise en Place de l’Environnement de Développement
Le code de ce projet est accessible via un dépôt GitHub et son utilisation est gratuite sous licence MIT. Une version fonctionnelle de ce projet est également consultable ici.
Pour démarrer Svelte sur votre machine, il est recommandé de structurer le projet à l’aide de Vite.js. Assurez-vous que Node Package Manager (NPM) et Node.js sont installés sur votre système. Un gestionnaire de packages alternatif tel que Yarn peut également être utilisé. Dans votre terminal, exécutez la commande suivante :
npm create vite
Cela lancera un nouveau projet avec l’interface de ligne de commande (CLI) Vite. Nommez votre projet, choisissez Svelte comme framework et JavaScript comme variante. Ensuite, naviguez jusqu’au répertoire du projet et exécutez la commande suivante pour installer les dépendances :
npm install
Ouvrez le projet, créez un fichier hangmanArt.js dans le dossier src et supprimez les dossiers assets et lib. Effacez ensuite le contenu des fichiers App.svelte et App.css. Dans le fichier App.css, insérez le code suivant :
:root{
background-color: rgb(0, 0, 0);
color:green;
font-family: monospace;
}
Récupérez le contenu du fichier hangmanArt.js depuis le dépôt GitHub et copiez-le dans votre propre fichier hangmanArt.js. Vous pouvez lancer le serveur de développement avec la commande suivante :
npm run dev
Élaboration de la Logique de l’Application
Ouvrez le fichier App.svelte et créez un bloc de script qui contiendra la majeure partie de la logique de l’application. Créez un tableau de mots pour contenir une sélection de termes.
let words = [
"appetizer",
"roommates",
"shrinking",
"freedom",
"happiness",
"development",
];
Importez ensuite le tableau hangmanArt depuis le fichier hangmanArt.js. Ensuite, créez une variable userInput, une variable randomNumber et une autre variable pour stocker un mot sélectionné au hasard dans le tableau de mots.
Affectez 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 série de tirets, en fonction de la longueur du mot sélectionné. Assignez 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;
Implémentation des Fonctionnalités Essentielles
Lorsqu’un joueur fait une tentative, il est nécessaire d’afficher le résultat. Cette indication permettra au joueur de savoir s’il a fait une bonne ou une mauvaise supposition. Créez une fonction generateOutput pour gérer la tâche de génération de la sortie.
function generateOutput(input1, input2) {
output = "";
for (let i = 0; i < input1.length; i++) {
if (input2[i] === "-") {
output += input1[i];
} else {
output += "-";
}
}
}
Pour chaque proposition soumise par le joueur, le programme devra déterminer si c’est une proposition correcte. Créez une fonction d’évaluation qui fera passer le dessin du pendu à l’étape suivante si le joueur se trompe, ou qui appellera 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 = "";
}
Voilà, la logique de l’application est complète. Vous pouvez maintenant passer à la définition du balisage.
Structuration du Balisage du Projet
Créez un élément principal qui englobera tous les autres éléments du jeu. Dans cet élément principal, définissez un élément h1 avec le texte Hangman.
<h1 class="title">
Hangman
</h1>
Créez un slogan et affichez le dessin 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, mettez en œuvre 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}
Puis, affichez la sortie et un formulaire pour recevoir les entrées de l’utilisateur. La sortie et le formulaire ne doivent s’afficher que si l’élément avec la classe « message » n’est pas visible.
{#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 maintenant ajouter le style approprié à l’application. Créez un bloc de style et insérez-y le code suivant :
* {
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 réussi à créer un jeu du pendu avec Svelte. Félicitations !
Les Atouts de Svelte
Svelte est un framework relativement simple à prendre en main et à maîtriser. Sa syntaxe, proche de Vanilla JavaScript, en fait un choix idéal pour ceux qui souhaitent un framework capable de gérer des éléments complexes tels que la réactivité, tout en offrant la flexibilité de travailler avec Vanilla JavaScript. Pour des projets plus sophistiqués, vous pouvez utiliser SvelteKit, un méta-framework conçu comme la réponse de Svelte à Next.js.