Introducere în dezvoltarea jocurilor cu Svelte
Svelte, un cadru JavaScript inovator, atrage tot mai mulți dezvoltatori datorită abordării sale unice și eficiente. Simplitatea sintaxei sale îl recomandă ca o opțiune excelentă pentru începătorii care doresc să exploreze universul cadrelor JavaScript. Cea mai bună modalitate de a învăța este prin practică, astfel, în acest tutorial, vei descoperi cum să folosești funcționalitățile Svelte pentru a crea un joc clasic de spânzurătoare.
Mecanica jocului Spânzurătoarea
Spânzurătoarea este un joc de cuvinte, jucat frecvent de doi participanți. Unul dintre ei alege un cuvânt, iar celălalt încearcă să îl ghicească, literă cu literă. Scopul ghicitorului este de a dezvălui cuvântul secret înainte de a epuiza numărul permis de încercări greșite.
La începutul jocului, organizatorul alege un cuvânt secret. Lungimea acestui cuvânt este de obicei indicată ghicitorului folosind liniuțe. Pentru fiecare ghicire incorectă a ghicitorului, se adaugă o nouă parte la desenul spânzurătorii, începând cu capul, continuând cu trunchiul, brațele și picioarele.
Ghicitorul câștigă partida dacă reușește să identifice corect toate literele cuvântului înainte de finalizarea desenului schematic al spânzurătorii. Spânzurătoarea este un mod distractiv de a-ți testa cunoștințele vocabularului, logica și capacitatea de deducție.
Configurarea mediului de lucru
Codul sursă utilizat în acest proiect este disponibil pe GitHub și poate fi utilizat gratuit sub licența MIT. Pentru o demonstrație live a acestui proiect, vizitează acest demo.
Pentru a începe să folosești Svelte, este recomandat să configurezi proiectul utilizând Vite.js. Asigură-te că ai instalate Node Package Manager (NPM) și Node.js. Alternativ, poți utiliza un alt manager de pachete, cum ar fi Yarn. Apoi, deschide linia de comandă și rulează:
npm create vite
Această comandă va iniția un nou proiect prin intermediul interfeței de linie de comandă Vite (CLI). Denumește proiectul, alege Svelte ca framework și optează pentru JavaScript ca variantă. Navighează în directorul proiectului și rulează următoarea comandă pentru a instala dependențele:
npm install
Acum, deschide proiectul și creează un fișier `hangmanArt.js` în directorul `src`. Șterge directorul `assets` și `lib`. Apoi, elimină conținutul fișierelor `App.svelte` și `App.css`. În fișierul `App.css`, adaugă următoarele definiții:
:root{
background-color: rgb(0, 0, 0);
color:green;
font-family: monospace;
}
Copiază conținutul fișierului `hangmanArt.js` din acest depozit GitHub și inserează-l în fișierul tău `hangmanArt.js`. Pentru a porni serverul de dezvoltare, rulează:
npm run dev
Structura logicii aplicației
Deschide fișierul `App.svelte` și adaugă o secțiune de script care va găzdui logica principală a aplicației. Definește o matrice cu cuvinte care va conține o listă de opțiuni.
let words = [
"appetizer",
"roommates",
"shrinking",
"freedom",
"happiness",
"development",
];
Importă matricea `hangmanArt` din fișierul `hangmanArt.js`. Declară variabile precum `userInput`, `randomNumber` și una pentru a memora un cuvânt selectat aleatoriu. Atribuie cuvântul selectat aleatoriu variabilei `selectedWord` și creează o copie a acestuia în `initial`. În plus, declară variabilele `match`, `message`, `hangmanStages` și `output`. Inițializează `output` cu o serie de liniuțe, în funcție de lungimea cuvântului selectat. Atribuie `hangmanArt` variabilei `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;
Implementarea funcționalităților
Pe măsură ce jucătorul introduce o ghicire, trebuie afișat rezultatul acesteia. Această ieșire va ajuta jucătorul să vadă dacă a ghicit corect sau nu. Creează o funcție `generateOutput` pentru a gestiona această sarcină.
function generateOutput(input1, input2) {
output = "";
for (let i = 0; i < input1.length; i++) {
if (input2[i] === "-") {
output += input1[i];
} else {
output += "-";
}
}
}
La fiecare ghicire introdusă, programul trebuie să verifice corectitudinea acesteia. Creează o funcție `evaluate` care, în caz de ghicire incorectă, va trece desenul spânzurătorii la etapa următoare, iar în cazul unei ghiciri corecte, va apela `generateOutput`.
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 = "";
}
Cu aceasta, logica aplicației este completă. Acum putem trece la definirea structurii HTML.
Definirea structurii HTML
Creează un element `main` care va fi containerul tuturor celorlalte elemente din joc. În interiorul lui, adaugă un element `h1` cu textul „Spânzurătoarea”.
<h1 class="title">
Spânzurătoarea
</h1>
Adaugă o descriere și afișează desenul spânzurătorii la prima sa etapă, doar dacă matricea `hangmanStages` nu este goală.
<div class="tagline">
Mă gândesc la un cuvânt. Poți ghici literele din el?
</div>
{#if hangmanStages.length > 0}
<pre class="hangman">
{hangmanStages[0]}</pre>
{/if}
Implementează afișarea unui mesaj care să indice dacă jucătorul a câștigat sau a pierdut:
{#if hangmanStages.length === 1}
<div class="message" bind:this={message}>Ai pierdut...</div>
{/if}
{#if selectedWord === match}
<div class="message" bind:this={message}>Ai câștigat...</div>
{/if}
Apoi, afișează rezultatul și un formular pentru a primi ghicirile de la utilizator. Rezultatul și formularul trebuie afișate doar dacă elementul cu clasa „message” nu este vizibil pe ecran.
{#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="Introdu o literă"
maxlength="1"
bind:value={userInput}
/>
<button type="submit">Confirmă</button>
</form>
{/if}
Adaugă stilul corespunzător aplicației. Creează o secțiune de stil și adaugă următoarele:
* {
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;
}
Felicitări, ai creat un joc de spânzurătoare folosind Svelte! Bravo!
De ce Svelte este remarcabil?
Svelte este un framework care este relativ ușor de învățat și de folosit. Datorită sintaxei sale logice, similară cu Vanilla JavaScript, este o alegere excelentă dacă ai nevoie de un framework care să gestioneze complexități precum reactivitatea, dar care să îți permită totodată să lucrezi cu Vanilla JavaScript. Pentru proiecte mai mari, poți utiliza SvelteKit, un meta-framework dezvoltat ca răspunsul Svelte la Next.js.