Een Hangman-spel maken met Svelte

Svelte is een radicaal nieuw JavaScript-framework dat de harten van ontwikkelaars verovert. De eenvoudige syntax maakt het een geweldige kandidaat voor beginners die een duik willen nemen in de wereld van JavaScript frameworks. Een van de beste manieren om te leren is door te bouwen, dus in deze handleiding leer je hoe je de functies die Svelte biedt kunt gebruiken om een eenvoudig beulspel te maken.

Hoe Hangman werkt

Hangman is een intrigerend woordontcijferingsspel dat vaak door twee personen wordt gespeeld. Hierbij verbergt de ene deelnemer een woord terwijl de andere deelnemer het probeert te ontcijferen door opeenvolgende pogingen om de letters te raden. Het belangrijkste doel voor de persoon die de raadpogingen doet, is om het raadselachtige woord te ontcijferen voordat alle mogelijkheden voor foutieve vermoedens zijn uitgeput.

Aan het begin van het spel kiest de begeleider een verborgen term. De lengte van het woord wordt meestal door middel van koppeltekens onthuld aan de tegenstander (suppositionist). Terwijl de verondersteller verkeerde gevolgtrekkingen maakt, worden verdere onderdelen van het galgenraamwerk geschetst, oplopend van schedel, romp, ledematen en aanhangsels.

De overwinning in dit spel wordt bepaald door het succes van de gokker bij de volledige onthulling van de letters voordat de afbeelding van de stickman klaar is. Hangman is een effectief middel om iemands taalkennis, logisch denken en vermogen om conclusies te trekken te evalueren.

De ontwikkelomgeving instellen

De broncode die bij dit werk is gebruikt, is geüpload naar een GitHub repository, waar het gratis toegankelijk is onder de voorwaarden van de MIT licentie. Geïnteresseerden die een operationeel voorbeeld van dit project willen bekijken, kunnen de demonstratie hierin bekijken.

Om een nieuw Svelte-project op te zetten met Vite.js, moet je ervoor zorgen dat Node Package Manager (NPM) en Node.js voorgeïnstalleerd zijn op je computer. Als alternatief kun je ook een andere pakketbeheerder gebruiken, zoals Yarn. Om het proces te starten, volg je deze stappen in je terminal:

 npm create vite

Een nieuwe poging starten door gebruik te maken van de Command Line Interface (CLI), kan beginnen met het geven van een identifier voor hun respectievelijke project. Selecteer vervolgens Svelte als het voorkeursraamwerk en wijs de variant aan die JavaScript moet worden. Na deze eerste stappen is het noodzakelijk om naar de gespecificeerde projectmap te navigeren en een specifiek installatiecommando uit te voeren om de nodige afhankelijkheden te verkrijgen.

 npm install

Voer de volgende stappen uit om uw Svelte applicatie aan te passen:1. Open de projectmap met beide “App” mappen (een voor frontend en een voor backend).2. Open de projectmap met de twee “App” mappen (een voor frontend en een voor backend).Navigeer naar de map “src” in de map van het frontendproject.3. Maak een nieuw JavaScript-bestand met de naam “hangmanArt.js”. Dit zal dienen als startpunt voor onze gamelogica.4. Verwijder de mappen “assets” en “lib” uit de frontend projectmap als ze bestaan. Deze worden meestal gegenereerd door de bouwgereedschappen tijdens de ontwikkeling, maar zijn misschien niet nodig voor productie implementatie.5. Wis de inhoud van zowel “App.svelte” als “App.css” bestanden die zich in hun respectievelijke mappen bevinden.6. Voeg in het “App.css” bestand het volgende code fragment toe op

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

Je kunt de inhoud van het “hangmanArt.js” bestand, dat zich in de online repository van het huidige project op GitHub bevindt, uitpakken door gebruik te maken van standaard kopieer- en plakmethoden. Als dit eenmaal gedaan is, kan men het gekopieerde materiaal direct invoegen in hun persoonlijke kopie van het “hangmanArt.js” bestand door gebruik te maken van een vergelijkbare methode. Om het proces van het draaien van een lokale ontwikkelingsserver te starten, voer je gewoon het gespecificeerde commando uit dat in de documentatie staat.

 npm run dev

De logica van de applicatie definiëren

Open het bestand “App.svelte”, dat waarschijnlijk het hoofdonderdeel of de container voor je Svelte-applicatie is, en voeg daarbinnen een