Cum să creezi un joc de spânzurat cu Svelte

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 moduri 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.

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

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 instalat 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 Vite Interfață de linie de comandă (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 src folder, creați un hangmanArt.js fișier și ștergeți active și lib pliant. Apoi ștergeți conținutul App.svelte și App.css fișiere. În App.css fișier, adăugați următoarele;

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

Copiați conținutul spânzuratorulArt.js fișier din acest proiect Depozitul GitHub, apoi lipiți-l în al dvs hangmanArt.js fişier. Puteți porni serverul de dezvoltare cu următoarea comandă:

npm run dev

Definirea logicii aplicatiei

Deschide App.svelte fișier și creați un scenariu etichetă care va deține cea mai mare parte a logicii aplicației. Creeaza o cuvinte matrice pentru a deține o listă de cuvinte.

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

Apoi, importați spânzuratorulArt matrice din hangmanArt.js fişier. Apoi, creați o variabilă userInput, o variabilă Număr aleatoriu, și o altă variabilă pentru a deține un cuvânt selectat aleatoriu din cuvinte matrice.

Atribuiți Cuvânt selectat la o altă variabilă iniţială. Pe lângă celelalte variabile, creați următoarele variabile: Meci, mesaj, hangmanStages, și ieșire. Inițializați variabila de ieșire cu un șir de liniuțe, în funcție de lungimea Cuvânt selectat. Atribuiți spânzuratorulArt matrice la hangmanStages variabil.

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.

functiongenerateOutput(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ă. Creaza un a evalua funcție care va muta desenul spânzuratorului la următoarea etapă dacă jucătorul ghicește greșit sau îl va apela pe generateOutput funcția dacă jucătorul face o ghicire corectă.

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 = "";
}

Și cu asta, ați completat logica aplicației. Acum puteți trece la definirea marcajului.

Definirea marcajului proiectului

Creeaza o principal element care va adăposti orice alt element din joc. În principal element, definiți an h1 element cu textul Călău.

<h1class="title">
 Hangman
h1>

Creați un slogan și redați figura spânzuratorului în prima etapă numai dacă numărul de elemente din hangmanStages matricea este mai mare decât 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}

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}

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

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}

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}

Acum, puteți adăuga stilul adecvat aplicației. Creeaza o stil etichetați și în el, 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.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;
 }

Ai creat un joc de spânzurătoare cu Svelte. Buna treaba!

Ce îl face pe Svelte uimitor?

Svelte este un cadru care este relativ ușor de preluat și de învățat. Deoarece sintaxa logică a lui Svelte este similară cu JavaScript Vanilla, aceasta o face alegerea perfectă dacă doriți un cadru care poate susține lucruri complexe, cum ar fi reactivitatea, oferindu-vă în același timp oportunitatea 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.