Hur man skapar ett Hangman-spel med Svelte

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

Hur Hangman fungerar

Hangman är ett ordgissningsspel som vanligtvis spelas mellan två personer, där en spelare tänker på ett ord och den andra spelaren försöker gissa det ordet bokstav för bokstav. Målet för den gissande spelaren är att ta reda på det hemliga ordet innan de får slut på felaktiga gissningar.

När spelet startar väljer värden ett hemligt ord. Ordets längd anges vanligtvis för den andra spelaren (gissaren) med hjälp av bindestreck. När gissaren gör felaktiga gissningar ritas ytterligare delar av bödeln, från huvud, kropp, armar och ben.

Gissaren vinner spelet om de lyckas gissa alla bokstäverna i ordet innan stickman-figuren är klar. Hangman är ett bra sätt att testa ordförråd, resonemang och avdragsförmåga.

Ställa in utvecklingsmiljön

För att få igång Svelte på din maskin är det lämpligt att bygga upp projektet med Vite.js. För att använda Vite, se till att du har Nod Package Manager (NPM) och Node.js installerat på din dator. Du kan också använda en alternativ pakethanterare som Yarn. Öppna nu din terminal och kör följande kommando:

npm create vite

Detta kommer att starta ett nytt projekt med Vite Kommandoradsgränssnitt (CLI). Namnge ditt projekt, välj Svelte som ram, och ställ in varianten till JavaScript. Nu CD in i projektkatalogen och kör följande kommando för att installera beroenden:

npm install

Öppna nu projektet och i src mapp, skapa en hangmanArt.js fil och ta bort tillgångar och lib mapp. Rensa sedan innehållet i App.svelte och App.css filer. I den App.css fil, lägg till följande;

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

Kopiera innehållet i hangmanArt.js fil från detta projekt GitHub-förråd, och klistra sedan in den i din egen hangmanArt.js fil. Du kan starta utvecklingsservern med följande kommando:

npm run dev

Definiera applikationens logik

Öppna App.svelte fil och skapa en manus taggen som kommer att hålla det mesta av applikationens logik. Skapa en ord array för att hålla en lista med ord.

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

Importera sedan hangmanArt array från hangmanArt.js fil. Skapa sedan en variabel användarinmatning, en variabel slumpmässigt nummer, och en annan variabel för att hålla ett slumpmässigt valt ord från ord array.

Tilldela valtWord till en annan variabel första. Utöver de andra variablerna skapar du följande variabler: match, meddelande, hangmanStages, och produktion. Initiera utdatavariabeln med en sträng av streck, beroende på längden på valtWord. Tilldela hangmanArt array till 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;

Lägga till de nödvändiga funktionerna

När spelaren gör en gissning vill du visa resultatet för spelaren. Denna utdata hjälper spelaren att veta om de har gissat rätt eller fel. Skapa en funktion generera utgång att hantera uppgiften att generera en utdata.

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

För varje gissning spelaren lämnar måste programmet avgöra om det är rätt gissning. Skapa en utvärdera funktion som flyttar bödelteckningen till nästa steg om spelaren gissar fel, eller ringer till generera utgång funktion om spelaren gör en rätt gissning.

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

Och med det har du slutfört logiken i ansökan. Du kan nu gå vidare till att definiera markeringen.

Definiera markeringen av projektet

Skapa en huvud element som kommer att hysa alla andra element i spelet. I den huvud element, definiera en h1 element med texten Bödel.

<h1class="title">
 Hangman
h1>

Skapa en tagline och återge bödelfiguren i det första steget endast om antalet element i hangmanStages matrisen är större än 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}

Efteråt, implementera logiken för att visa ett meddelande som anger om spelaren har vunnit eller förlorat:

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

Gör sedan utdata och ett formulär för att acceptera input från användaren. Utdata och formulär ska endast visas om elementet med klassen "meddelande" inte finns 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 lägga till lämplig styling till applikationen. Skapa en stil taggen och lägg till följande 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 skapat ett bödelspel med Svelte. Bra jobbat!

Vad gör Svelte fantastisk?

Svelte är ett ramverk som är relativt lätt att plocka upp och lära sig. Eftersom Sveltes logiksyntax liknar Vanilla JavaScript, gör detta det till det perfekta valet om du vill ha en ramverk som kan rymma komplexa saker som reaktivitet, samtidigt som du får möjlighet att arbeta med Vanilla JavaScript. För mer komplexa projekt kan du använda SvelteKit – ett meta-ramverk som utvecklades som Sveltes svar på Next.js.