Hvordan lage et hangman-spill med Svelte

Svelte er et radikalt nytt JavaScript-rammeverk som vinner hjertene til utviklere. Den enkle syntaksen gjør den til en god kandidat for nybegynnere som ønsker å dykke inn i JavaScript-rammeverkets verden. En av de beste måtene å lære på er ved å bygge, så i denne veiledningen vil du lære hvordan du bruker funksjonene Svelte tilbyr for å lage et enkelt bøddelspill.

Hvordan Hangman fungerer

Hangman er et ord-gjettespill som vanligvis spilles mellom to personer, der en spiller tenker på et ord og den andre spilleren prøver å gjette det ordet bokstav for bokstav. Målet for gjettespilleren er å finne ut det hemmelige ordet før de går tom for feil gjetninger.

Når spillet starter, velger verten et hemmelig ord. Lengden på ordet indikeres vanligvis til den andre spilleren (gjetter) ved hjelp av bindestreker. Når gjetteren gjør feil gjetninger, tegnes flere deler av bøddelen, og går videre fra hode, kropp, armer og ben.

Den som gjetter vinner spillet hvis de klarer å gjette alle bokstavene i ordet før tegningen av stickman-figuren er fullført. Hangman er en fin måte å teste ordforråd, resonnement og deduksjonsferdigheter.

Sette opp utviklingsmiljøet

For å få Svelte i gang på maskinen din, er det tilrådelig å stillasere prosjektet med Vite.js. For å bruke Vite, sørg for at du har Node Package Manager (NPM) og Node.js installert på maskinen din. Du kan også bruke en alternativ pakkebehandling som Yarn. Åpne nå terminalen din og kjør følgende kommando:

npm create vite

Dette vil starte et nytt prosjekt med Vite Kommandolinjegrensesnitt (CLI). Gi prosjektet et navn, velg Svelte som rammeverk, og sett varianten til JavaScript. Nå cd inn i prosjektkatalogen og kjør følgende kommando for å installere avhengighetene:

npm install

Åpne nå prosjektet, og i src mappe, opprette en hangmanArt.js fil og slett eiendeler og lib mappe. Fjern deretter innholdet i App.svelte og App.css filer. I App.css fil, legg til følgende;

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

Kopier innholdet i hangmanArt.js fil fra dette prosjektets GitHub-depot, og lim den deretter inn i din egen hangmanArt.js fil. Du kan starte utviklingsserveren med følgende kommando:

npm run dev

Definere logikken til applikasjonen

Åpne App.svelte fil og lag en manus taggen som vil inneholde det meste av logikken til applikasjonen. Lage en ord array for å holde en liste med ord.

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

Deretter importerer du hangmanArt rekke fra hangmanArt.js fil. Deretter oppretter du en variabel brukerinngang, en variabel randomNumber, og en annen variabel for å holde et tilfeldig valgt ord fra ord array.

Tilordne valgt Word til en annen variabel første. I tillegg til de andre variablene, lag følgende variabler: kamp, beskjed, hangmanStages, og produksjon. Initialiser utdatavariabelen med en strek med bindestreker, avhengig av lengden på valgt Word. Tilordne hangmanArt rekke 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;

Legge til de nødvendige funksjonene

Når spilleren gjetter, vil du vise utdataene til spilleren. Denne utgangen vil hjelpe spilleren å vite om de har gjort riktig eller feil gjetning. Lag en funksjon generere Output å håndtere oppgaven med å generere en utgang.

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

For hver gjetning spilleren sender inn, må programmet avgjøre om det er riktig gjetning. Opprett en evaluere funksjon som vil flytte bøddeltegningen til neste trinn hvis spilleren gjetter feil, eller kaller generere Output funksjon hvis spilleren gjetter riktig.

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 med det har du fullført logikken i søknaden. Du kan nå gå videre til å definere markeringen.

Definere markeringen av prosjektet

Lage en hoved- element som vil huse alle andre elementer i spillet. I hoved- element, definer en h1 element med teksten Bøddel.

<h1class="title">
 Hangman
h1>

Lag en slagord og gjengi bøddelfiguren på første trinn bare hvis antall elementer i hangmanStages matrisen er større enn 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}

Etterpå implementerer du logikken for å vise en melding som indikerer om spilleren har vunnet eller tapt:

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

Deretter gjengir du utdataene og et skjema for å godta innspill fra brukeren. Utdata og skjema skal kun vises hvis elementet med klassen "melding" ikke er på skjermen.

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

Nå kan du legge til passende styling i applikasjonen. Lage en stil tag og legg til følgende i den:

 * {
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 laget et bøddelspill med Svelte. Flott jobb!

Hva gjør Svelte fantastisk?

Svelte er et rammeverk som er relativt enkelt å plukke opp og lære. Fordi Sveltes logiske syntaks ligner på Vanilla JavaScript, gjør dette det til det perfekte valget hvis du ønsker en rammeverk som kan inneholde komplekse ting som reaktivitet, samtidig som det gir deg muligheten til å jobbe med Vanilla JavaScript. For mer komplekse prosjekter kan du bruke SvelteKit – et meta-rammeverk som ble utviklet som Sveltes svar på Next.js.