Sådan opretter du et hangman-spil med Svelte

Svelte er en radikal ny JavaScript-ramme, der vinder udviklernes hjerter. Dens enkle syntaks gør den til en god kandidat for begyndere, der ønsker at dykke ned i JavaScript-rammernes verden. En af de bedste måder at lære på er ved at bygge, så i denne guide vil du lære, hvordan du bruger funktionerne, som Svelte tilbyder, til at skabe et simpelt bøddelspil.

Hvordan Hangman fungerer

Hangman er et ord-gættespil, der typisk spilles mellem to personer, hvor den ene spiller tænker på et ord, og den anden spiller forsøger at gætte det ord bogstav for bogstav. Målet for den gættende spiller er at finde ud af det hemmelige ord, før de løber tør for forkerte gæt.

Når spillet starter, vælger værten et hemmeligt ord. Ordets længde angives normalt for den anden spiller (gætter) ved hjælp af bindestreger. Efterhånden som gætteren laver forkerte gæt, tegnes yderligere dele af bøddelen, der går videre fra hoved, krop, arme og ben.

Gætteren vinder spillet, hvis de formår at gætte alle bogstaverne i ordet, før tegningen af ​​stickman-figuren er færdig. Hangman er en fantastisk måde at teste ordforråd, ræsonnement og deduktionsfærdigheder på.

Opsætning af udviklingsmiljøet

For at få Svelte op at køre på din maskine, er det tilrådeligt at stilladsere projektet med Vite.js. For at bruge Vite skal du sørge for at have Node Package Manager (NPM) og Node.js installeret på din maskine. Du kan også bruge en alternativ pakkehåndtering som Yarn. Åbn nu din terminal og kør følgende kommando:

npm create vite

Dette vil starte et nyt projekt med Vite Kommandolinjegrænseflade (CLI). Navngiv dit projekt, vælg Svelte som rammen, og sæt varianten til JavaScript. Nu cd ind i projektmappen og kør følgende kommando for at installere afhængighederne:

npm install

Åbn nu projektet, og i src mappe, skal du oprette en hangmanArt.js fil og slet aktiver og lib folder. Ryd derefter indholdet af App.svelte og App.css filer. I den App.css fil, tilføj følgende;

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

Kopier indholdet af bøddelKunst.js fil fra dette projekts GitHub-depot, og indsæt det derefter i din egen hangmanArt.js fil. Du kan starte udviklingsserveren med følgende kommando:

npm run dev

Definition af applikationens logik

Åbn App.svelte fil og opret en manuskript tag, der vil indeholde det meste af applikationens logik. Lave en ord array til at indeholde en liste med ord.

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

Dernæst importerer du bøddelKunst række fra hangmanArt.js fil. Opret derefter en variabel brugerinput, en variabel tilfældigt Antal, og en anden variabel til at holde et tilfældigt valgt ord fra ord array.

Tildel valgt Word til en anden variabel initial. Ud over de andre variabler skal du oprette følgende variabler: match, besked, hangmanStages, og produktion. Initialiser outputvariablen med en streng af bindestreger, afhængigt af længden af valgt Word. Tildel bøddelKunst række til hangmanStages 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;

Tilføjelse af de nødvendige funktioner

Når afspilleren gætter, vil du gerne vise outputtet til afspilleren. Denne udgang hjælper spilleren med at vide, om de har gættet rigtigt eller forkert. Opret en funktion generere output at varetage opgaven med at generere et output.

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

For hvert gæt, spilleren sender, skal programmet afgøre, om det er det rigtige gæt. Opret en vurdere funktion, der vil flytte bøddeltegningen til næste trin, hvis spilleren gætter forkert, eller kalder generere output funktion, hvis spilleren gætter rigtigt.

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

Og dermed har du gennemført ansøgningens logik. Du kan nu gå videre til at definere markeringen.

Definition af markeringen af ​​projektet

Lave en vigtigste element, der vil huse alle andre elementer i spillet. I den vigtigste element, definere en h1 element med teksten Bøddel.

<h1class="title">
 Hangman
h1>

Opret en tagline og gengiv bøddelfiguren i første fase kun, hvis antallet af elementer i hangmanStages array er større end 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}

Implementer derefter logikken for at vise en besked, der angiver, om spilleren har vundet eller tabt:

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

Gengiv derefter outputtet og en formular for at acceptere input fra brugeren. Outputtet og formularen skal kun vises, hvis elementet med klassen "meddelelse" ikke er på skærmen.

{#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 kan du tilføje den passende styling til applikationen. Lave en stil tag og tilføje følgende i det:

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

Du har lavet et bøddelspil med Svelte. Godt arbejde!

Hvad gør Svelte fantastisk?

Svelte er en ramme, der er forholdsvis nem at hente og lære. Fordi Sveltes logiske syntaks ligner Vanilla JavaScript, gør dette det til det perfekte valg, hvis du ønsker en rammer, der kan rumme komplekse ting som reaktivitet, samtidig med at du får mulighed for at arbejde med Vanilla JavaScript. Til mere komplekse projekter kan du bruge SvelteKit – en metaramme, der blev udviklet som Sveltes svar på Next.js.