Svelte este un cadru JavaScript radical nou, care câștigă inimile dezvoltatorilor. Sintaxa sa simplă îl face un candidat excelent pentru începătorii care doresc să se scufunde în lumea cadrelor JavaScript. Una dintre cele mai bune modalități de a învăța este prin construirea, așa că în acest ghid, veți învăța cum să utilizați caracteristicile oferite de Svelte pentru a crea un joc simplu de spânzurat.
Cuprins
Cum funcționează spânzuratorul
Spânzuratorul este un joc de ghicire a cuvintelor jucat de obicei între două persoane, în care un jucător se gândește la un cuvânt, iar celălalt încearcă să ghicească acel cuvânt literă cu literă. Obiectivul jucătorului care ghiceste este să descopere cuvântul secret înainte de a rămâne fără ghiciri incorecte.
Când începe jocul, gazda selectează un cuvânt secret. Lungimea cuvântului este de obicei indicată celuilalt jucător (ghicitor) folosind liniuțe. Pe măsură ce ghicitorul face presupuneri incorecte, părți suplimentare ale spânzuratorului sunt desenate, progresând de la cap, corp, brațe și picioare.
Ghicitorul câștigă jocul dacă reușește să ghicească toate literele din cuvânt înainte ca desenul figurii stickman să fie finalizat. Spânzuratorul este o modalitate excelentă de a testa vocabularul, raționamentul și abilitățile de deducție.
Crearea mediului de dezvoltare
Codul folosit în acest proiect este disponibil în a Depozitul GitHub și este gratuit pentru utilizare sub licența MIT. Dacă doriți să aruncați o privire la o versiune live a acestui proiect, puteți verifica acest demo.
Pentru a pune Svelte în funcțiune pe mașina dvs., este recomandabil să schelete proiectul cu Vite.js. Pentru a utiliza Vite, asigurați-vă că aveți Node Package Manager (NPM) și Node.js instalate pe computer. De asemenea, puteți utiliza un manager de pachete alternativ, cum ar fi Yarn. Acum, deschideți terminalul și rulați următoarea comandă:
npm create vite
Acest lucru va începe un nou proiect cu interfața de linie de comandă Vite (CLI). Denumiți-vă proiectul, selectați Svelte ca cadru și setați varianta la JavaScript. Acum cd în directorul proiectului și rulați următoarea comandă pentru a instala dependențele:
npm install
Acum, deschideți proiectul și, în folderul src, creați un fișier hangmanArt.js și ștergeți folderul assets și lib. Apoi ștergeți conținutul fișierelor App.svelte și App.css. În fișierul App.css, adăugați următoarele;
:root{
background-color: rgb(0, 0, 0);
color:green;
font-family: monospace;
}
Copiați conținutul fișierului hangmanArt.js din acest proiect Depozitul GitHub, apoi inserați-l în propriul fișier hangmanArt.js. Puteți porni serverul de dezvoltare cu următoarea comandă:
npm run dev
Definirea logicii aplicatiei
Deschideți fișierul App.svelte și creați o etichetă de script care va deține cea mai mare parte a logicii aplicației. Creați o matrice de cuvinte pentru a păstra o listă de cuvinte.
let words = [
"appetizer",
"roommates",
"shrinking",
"freedom",
"happiness",
"development",
];
Apoi, importați matricea hangmanArt din fișierul hangmanArt.js. Apoi, creați o variabilă userInput, o variabilă randomNumber și o altă variabilă pentru a păstra un cuvânt selectat aleatoriu din matricea de cuvinte.
Atribuiți SelectedWord unei alte variabile inițiale. Pe lângă celelalte variabile, creați următoarele variabile: potrivire, mesaj, hangmanStages și ieșire. Inițializați variabila de ieșire cu un șir de liniuțe, în funcție de lungimea cuvântului selectat. Atribuiți matricea 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;
Adăugarea funcționalităților necesare
Pe măsură ce jucătorul face o ghicire, doriți să îi arătați rezultatul. Această ieșire va ajuta jucătorul să știe dacă a ghicit corect sau greșit. Creați o funcție generateOutput pentru a gestiona sarcina de a genera o ieșire.
function generateOutput(input1, input2) {
output = "";
for (let i = 0; i < input1.length; i++) {
if (input2[i] === "-") {
output += input1[i];
} else {
output += "-";
}
}
}
Pentru fiecare ipoteză trimisă de jucător, programul va trebui să determine dacă este ipoteza corectă. Creați o funcție de evaluare care va muta desenul spânzuratorului la etapa următoare dacă jucătorul ghicește greșit sau apelați funcția generateOutput dacă jucătorul face o ghicire corectă.
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 = "";
}
Și cu asta, ați completat logica aplicației. Acum puteți trece la definirea marcajului.
Definirea marcajului proiectului
Creați un element principal care va găzdui orice alt element din joc. În elementul principal, definiți un element h1 cu textul Hangman.
<h1 class="title">
Hangman
</h1>
Creați un slogan și redați figura spânzuratorului în prima etapă numai dacă numărul de elemente din matricea hangmanStages este mai mare de 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}
Apoi, implementați logica pentru a afișa un mesaj care indică dacă jucătorul a câștigat sau a pierdut:
{#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}
Apoi, redați rezultatul și un formular pentru a accepta intrarea de la utilizator. Ieșirea și formularul ar trebui să fie afișate numai dacă elementul cu clasa „mesaj” nu este 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="Enter a letter"
maxlength="1"
bind:value={userInput}
/>
<button type="submit">Submit</button>
</form>
{/if}
Acum, puteți adăuga stilul adecvat aplicației. Creați o etichetă de stil și în ea adăugați 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;
}
Ai creat un joc de spânzurătoare cu Svelte. Buna treaba!
Ce îl face pe Svelte Amazing?
Svelte este un cadru care este relativ ușor de preluat și de învățat. Deoarece sintaxa logică a lui Svelte este similară cu Vanilla JavaScript, acest lucru îl face alegerea perfectă dacă doriți un cadru care poate conține lucruri complexe, cum ar fi reactivitatea, oferindu-vă în același timp posibilitatea de a lucra cu Vanilla JavaScript. Pentru proiecte mai complexe, puteți utiliza SvelteKit—un meta cadru care a fost dezvoltat ca răspunsul lui Svelte la Next.js.