Utforska Svelte: Skapa ett interaktivt Hänga gubbe-spel
Svelte, ett modernt JavaScript-ramverk, har snabbt blivit en favorit bland utvecklare. Dess intuitiva syntax gör det till ett utmärkt val för de som vill utforska ramverkens värld. Genom att bygga egna projekt kan man lära sig bäst, så i den här guiden går vi igenom hur man använder Sveltes funktioner för att skapa ett enkelt hänga gubbe-spel.
Så här fungerar Hänga gubbe
Hänga gubbe är ett klassiskt ordgissningsspel, oftast spelat mellan två personer. En spelare tänker på ett ord, medan den andra försöker gissa ordet genom att föreslå bokstäver. Spelarens mål är att avslöja det hemliga ordet innan antalet felaktiga gissningar blir för många.
I början av spelet väljer den första spelaren ett hemligt ord. Antalet bokstäver i ordet visas för den andra spelaren med hjälp av streck. För varje felaktig gissning läggs en ny del till en bild av en hängd figur, från huvud till kropp, armar och ben.
Den gissande spelaren vinner om hen gissar alla bokstäver i ordet innan figuren är färdigritad. Hänga gubbe är ett utmärkt sätt att testa sitt ordförråd, sitt logiska tänkande och sin förmåga att dra slutsatser.
Förbereda utvecklingsmiljön
Projektets källkod finns tillgänglig på GitHub och är fritt att använda under MIT-licensen. Om du vill se en fungerande version av spelet, kolla in denna demo.
För att komma igång med Svelte, rekommenderas det att du använder Vite.js för att skapa projektet. För att använda Vite behöver du Node Package Manager (NPM) och Node.js installerat på din dator. Alternativt kan du använda en annan pakethanterare, som Yarn. Öppna nu din terminal och kör följande kommando:
npm create vite
Detta initierar ett nytt projekt med Vite Command Line Interface (CLI). Välj ett namn för ditt projekt, välj Svelte som ramverk och välj JavaScript som variant. Gå nu in i projektkatalogen med `cd` och kör följande kommando för att installera alla nödvändiga beroenden:
npm install
Öppna projektet och skapa en fil vid namn `hangmanArt.js` i mappen `src`. Ta bort `assets` och `lib` mapparna. Rensa filerna `App.svelte` och `App.css`. Lägg till följande i `App.css`:
:root{
background-color: rgb(0, 0, 0);
color:green;
font-family: monospace;
}
Kopiera innehållet i `hangmanArt.js` från projektets GitHub-repository, och klistra in det i din egna `hangmanArt.js`-fil. Starta utvecklingsservern med följande kommando:
npm run dev
Definiera applikationens logik
Öppna filen `App.svelte` och skapa en scripttagg där vi kommer att lägga den mesta av koden för applikationens logik. Vi börjar med att skapa en array med ord som ska användas i spelet:
let words = [
"appetizer",
"roommates",
"shrinking",
"freedom",
"happiness",
"development",
];
Sedan importerar vi `hangmanArt` arrayen från `hangmanArt.js`. Skapa variabler för spelarens inmatning (`userInput`), ett slumpmässigt tal (`randomNumber`) och en variabel för att spara ett slumpmässigt valt ord från `words` arrayen.
Spara det valda ordet i en annan variabel som heter `initial`. Utöver dessa variabler, skapar vi `match`, `message`, `hangmanStages` och `output`. Variabeln `output` initieras med en sträng av streck, vars längd motsvarar längden på det valda ordet. `hangmanStages` tilldelas `hangmanArt` arrayen.
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 funktioner
När spelaren gör en gissning vill vi visa resultatet. Funktionen `generateOutput` hanterar genereringen av utdata.
function generateOutput(input1, input2) {
output = "";
for (let i = 0; i < input1.length; i++) {
if (input2[i] === "-") {
output += input1[i];
} else {
output += "-";
}
}
}
För varje gissning måste programmet kontrollera om det är korrekt. Funktionen `evaluate` anropar antingen `generateOutput` om gissningen är rätt, eller flyttar hänga gubbe-bilden till nästa steg om spelaren gissar fel.
function evaluate() {
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 = "";
}
Med detta är logiken för applikationen klar. Nu kan vi fortsätta med markeringen.
Definiera Markeringen för Projektet
Skapa ett `main`-element som kommer att fungera som container för alla andra spelelement. I `main` elementet definieras ett `h2`-element med texten ”Hänga gubbe”.
<h2 class="title">
Hänga gubbe
</h2>
Lägg till en tagline och visa hänga gubbe figuren i första stadiet, men bara om antalet element i `hangmanStages` är större än 0.
<div class="tagline">
Jag tänker på ett ord. Kan du gissa bokstäverna i ordet?
</div>
{#if hangmanStages.length > 0}
<pre class="hangman">
{hangmanStages[0]}</pre>
{/if}
Implementera logiken för att visa ett meddelande som indikerar om spelaren har vunnit eller förlorat:
{#if hangmanStages.length === 1}
<div class="message" bind:this={message}>Du förlorade...</div>
{/if}
{#if selectedWord === match}
<div class="message" bind:this={message}>Du vann...</div>
{/if}
Skapa nu utrymme för output och ett formulär för att ta emot input från användaren. Output och formuläret visas endast om elementet med klassen ”message” inte finns på skärmen.
{#if !message}
<div class="output">
{#each output as letter}
{#if letter !== "-"}
<span class="complete box">{letter}</span>
{:else}
<span class="incomplete box" />
{/if}
{/each}
</div>
<form on:submit|preventDefault={() => evaluate()}>
<input
type="text"
placeholder="Gissa en bokstav"
maxlength="1"
bind:value={userInput}
/>
<button type="submit">Skicka</button>
</form>
{/if}
Nu kan du lägga till lämplig styling till applikationen. Skapa en `style` tagg 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.2px green;
height:40px;
font-size: 15px;
}
.box {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: inherit;
border: dotted 1.2px green;
}
.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 nu skapat ett interaktivt hänga gubbe-spel med Svelte! Bra jobbat!
Varför Svelte är Fantastiskt
Svelte är ett ramverk som är relativt enkelt att lära sig. Sveltes syntax liknar Vanilla JavaScript, vilket gör det till ett perfekt val om du vill ha ett ramverk som klarar komplexa saker, som reaktivitet, samtidigt som du har möjlighet att arbeta med vanlig JavaScript. För mer komplexa projekt kan du använda SvelteKit – ett meta-ramverk som utvecklats som Sveltes svar på Next.js.