Hur man skapar ett Hangman-spel med Svelte

Svelte är ett radikalt nytt JavaScript-ramverk som håller på att vinna utvecklarnas hjärtan. Dess enkla syntax gör det till en utmärkt kandidat för nybörjare som vill dyka in i världen av JavaScript-ramverk. Ett av de bästa sätten att lära sig är genom att bygga, så i den här guiden kommer du att lära dig hur du använder de funktioner som Svelte erbjuder för att skapa ett enkelt hangman-spel.

Hur Hangman fungerar

Hangman är ett spännande orddechiffreringsspel som vanligtvis spelas av två personer, där en deltagare döljer ett ord medan en annan försöker urskilja det genom successiva försök att gissa dess bokstäver. Det primära målet för den som försöker gissa är att avslöja det gåtfulla ordet innan alla möjligheter till felaktiga gissningar har uttömts.

I början av spelet väljer ledaren en dold term. Ordets längd avslöjas vanligtvis för motståndaren (suppositionisten) med hjälp av bindestreck. Medan suppositionisten drar felaktiga slutsatser skissas ytterligare komponenter i galgen upp, från kranium, torso, lemmar och bihang.

Om gissaren lyckas avslöja hela bokstaven innan illustrationen av galgmannen är klar avgörs segern i detta spel. Hangman är ett effektivt sätt att utvärdera sina språkkunskaper, sitt logiska tänkande och sin slutledningsförmåga.

Konfigurera utvecklingsmiljön

Den källkod som använts i detta arbete har laddats upp till ett GitHub-arkiv, där den är tillgänglig utan kostnad enligt villkoren i MIT-licensen. För dem som är intresserade av att undersöka ett operativt exempel på detta projekt kan de läsa demonstrationen som finns här.

För att skapa ett nytt Svelte-projekt med Vite.js, se till att du har både Node Package Manager (NPM) och Node.js förinstallerade på din dator. Dessutom kan du använda en annan pakethanterare som Yarn om så önskas. Följ dessa steg i terminalen för att påbörja processen:

 npm create vite

Genom att initiera ett nytt projekt med hjälp av Command Line Interface (CLI) kan man börja med att ange en identifierare för sitt respektive projekt. Därefter väljer man Svelte som önskat ramverk och anger vilken variant som ska vara JavaScript. Efter dessa inledande steg är det absolut nödvändigt att navigera till den angivna projektkatalogen och utföra ett specifikt installationskommando för att skaffa alla nödvändiga beroenden.

 npm install

Följ dessa steg för att modifiera din Svelte-applikation:1. Öppna projektkatalogen som innehåller båda “App”-mapparna (en för frontend och en för backend).2.Navigera till mappen “src” i frontend-projektkatalogen.3. Skapa en ny JavaScript-fil med namnet “hangmanArt.js”. Den kommer att fungera som startpunkt för vår spellogik.4. Ta bort mapparna “assets” och “lib” från frontend-projektkatalogen om de finns. Dessa genereras vanligtvis av byggverktygen under utvecklingen men kanske inte behövs för produktionsdistribution.5. Rensa innehållet i både “App.svelte” och “App.css” filerna som finns i deras respektive kataloger.6. I “App.css” filen, lägg till följande kodavsnitt på

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

Man kan extrahera innehållet i “hangmanArt.js” filen, som finns i det aktuella projektets online repository på GitHub, genom att använda standardmetoder för kopiering och klistring. När detta har gjorts kan man infoga det kopierade materialet direkt i sin personliga kopia av “hangmanArt.js”-filen med hjälp av en liknande metod. För att starta processen med att köra en lokal utvecklingsserver, kör helt enkelt det angivna kommandot som finns i dokumentationen.

 npm run dev

Definiera applikationens logik

Öppna filen “App.svelte”, som sannolikt är huvudkomponenten eller behållaren för din Svelte-applikation, och infoga ett