Hoe je een Hangman-spel maakt met Svelte

Svelte is een radicaal nieuw JavaScript-framework dat de harten van ontwikkelaars verovert. De eenvoudige syntaxis maakt het een geweldige kandidaat voor beginners die zich willen verdiepen in de wereld van JavaScript-frameworks. Een van de beste manieren om te leren is door te bouwen. In deze handleiding leer je dus hoe je de functies van Svelte kunt gebruiken om een ​​eenvoudig galgje-spel te maken.

Hoe Galgje werkt

Hangman is een woordraadspel dat doorgaans tussen twee mensen wordt gespeeld, waarbij de ene speler een woord bedenkt en de andere speler dat woord letter voor letter probeert te raden. Het doel van de radende speler is om het geheime woord te achterhalen voordat er geen verkeerde gissingen meer zijn.

Wanneer het spel begint, selecteert de gastheer een geheim woord. De lengte van het woord wordt meestal met streepjes aan de andere speler (raden) aangegeven. Terwijl de gokker onjuiste gissingen doet, worden er extra delen van de beul getekend, gaande van hoofd, lichaam, armen en benen.

De gokker wint het spel als hij alle letters van het woord weet te raden voordat de stickman-figuurtekening voltooid is. Galgje is een geweldige manier om woordenschat, redenering en deductievaardigheden te testen.

Het opzetten van de ontwikkelomgeving

Om Svelte op uw machine te laten werken, is het raadzaam om het project te ondersteunen met Vite.js. Als je Vite wilt gebruiken, zorg er dan voor dat je dit hebt gedaan Knooppuntpakketbeheer (NPM) En Node.js is op uw computer geïnstalleerd. U kunt ook een alternatieve pakketbeheerder zoals Yarn gebruiken. Open nu uw terminal en voer de volgende opdracht uit:

npm create vite

Hiermee start een nieuw project met de Vite Commandoregelinterface (CLI). Geef uw project een naam, selecteer Slank als raamwerk en stel de variant in JavaScript. Nu CD in de projectmap en voer de volgende opdracht uit om de afhankelijkheden te installeren:

npm install

Open nu het project en in het src map, maak een beulArt.js bestand en verwijder het activa En libr map. Wis vervolgens de inhoud van het App.svelte En App.css bestanden. In de App.css bestand, voeg het volgende toe;

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

Kopieer de inhoud van het beulArt.js bestand van dit project GitHub-opslagplaatsen plak het vervolgens in uw eigen bestand beulArt.js bestand. U kunt de ontwikkelserver starten met de volgende opdracht:

npm run dev

De logica van de applicatie definiëren

Open de App.svelte bestand en maak een script tag die het grootste deel van de logica van de applicatie zal bevatten. Maak een woorden array om een ​​lijst met woorden te bevatten.

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

Importeer vervolgens de beulArt array van de beulArt.js bestand. Maak vervolgens een variabele gebruikers invoer, een variabele willekeurig nummeren een andere variabele die een willekeurig geselecteerd woord uit de bevat woorden reeks.

Wijs de geselecteerdWoord naar een andere variabele voorletter. Maak naast de andere variabelen de volgende variabelen: overeenkomst, bericht, beulStages, En uitgang. Initialiseer de uitvoervariabele met een reeks streepjes, afhankelijk van de lengte van de geselecteerdWoord. Wijs de beulArt array naar de beulStages variabel.

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;

Het toevoegen van de benodigde functionaliteiten

Terwijl de speler een gok doet, wilt u de uitvoer aan de speler laten zien. Deze uitvoer helpt de speler te weten of hij een goede of een verkeerde gok heeft gedaan. Maak een functie genererenUitvoer om de taak van het genereren van een output af te handelen.

functiongenerateOutput(input1, input2) {
 output = "";
for (let i = 0; i < input1.length; i++) {
if (input2[i] "-") {
 output += input1[i];
 } else {
 output += "-";
 }
 }
}

Voor elke gok die de speler indient, zal het programma moeten bepalen of dit de juiste gok is. Creëer een evalueren functie die de beultekening naar de volgende fase verplaatst als de speler verkeerd raadt, of roept de genererenUitvoer functie als de speler een goede gok maakt.

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

En daarmee heb je de logica van de applicatie voltooid. U kunt nu doorgaan met het definiëren van de opmaak.

De markup van het project definiëren

Maak een voornaamst element dat elk ander element in het spel zal huisvesten. In de voornaamst element, definieer een h1 element met de tekst Beul.

<h1class="title">
 Hangman
h1>

Maak een slogan en geef de beulfiguur in de eerste fase alleen weer als het aantal elementen in de beulStages array is groter dan 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}

Implementeer daarna de logica om een ​​bericht weer te geven dat aangeeft of de speler heeft gewonnen of verloren:

{#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}

Geef vervolgens de uitvoer en een formulier weer om invoer van de gebruiker te accepteren. De uitvoer en het formulier mogen alleen worden weergegeven als het element met de klasse "bericht" niet op het scherm staat.

{#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}

Nu kunt u de juiste styling aan de applicatie toevoegen. Maak een stijl tag en voeg daarin het volgende toe:

 * {
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;
 }

Je hebt een galgje-spel gemaakt met Svelte. Goed werk!

Wat maakt Svelte geweldig?

Svelte is een raamwerk dat relatief gemakkelijk op te pikken en te leren is. Omdat de logische syntaxis van Svelte vergelijkbaar is met Vanilla JavaScript, is dit de perfecte keuze als u een raamwerk dat complexe zaken als reactiviteit kan bevatten, terwijl u tegelijkertijd de mogelijkheid krijgt om met Vanilla te werken JavaScript. Voor complexere projecten kun je SvelteKit gebruiken: een metaframework dat is ontwikkeld als Svelte's antwoord op Next.js.