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 att bygga, så i den här guiden kommer du att lära dig hur du använder funktionerna som Svelte erbjuder för att skapa ett enkelt bödelspel.
Innehållsförteckning
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
Koden som används i detta projekt är tillgänglig i en GitHub-förråd och är gratis för dig att använda under MIT-licensen. Om du vill ta en titt på en liveversion av detta projekt kan du kolla in denna demo.
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 Node Package Manager (NPM) och Node.js installerade 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 Command Line Interface (CLI). Namnge ditt projekt, välj Svelte som ramverk och ställ in varianten på 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-mappen, skapa en hangmanArt.js-fil och ta bort tillgångarna och lib-mappen. Rensa sedan innehållet i filerna App.svelte och App.css. Lägg till följande i filen App.css;
:root{
background-color: rgb(0, 0, 0);
color:green;
font-family: monospace;
}
Kopiera innehållet i filen hangmanArt.js från detta projekts 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 filen App.svelte och skapa en skripttagg som innehåller det mesta av programmets logik. Skapa en ordmatris för att hålla en lista med ord.
let words = [
"appetizer",
"roommates",
"shrinking",
"freedom",
"happiness",
"development",
];
Importera sedan hangmanArt-arrayen från filen hangmanArt.js. Skapa sedan en variabel userInput, en variabel randomNumber och en annan variabel för att hålla ett slumpmässigt valt ord från ordmatrisen.
Tilldela det valda ordet till en annan variabel initial. Utöver de andra variablerna, skapa följande variabler: match, message, hangmanStages och output. Initiera utdatavariabeln med en sträng av bindestreck, beroende på längden på det valda ordet. Tilldela hangmanArt-arrayen till variabeln hangmanStages.
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 genereraOutput för att hantera uppgiften att generera en 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 spelaren lämnar måste programmet avgöra om det är rätt gissning. Skapa en utvärderingsfunktion som kommer att flytta bödeln till nästa steg om spelaren gissar fel, eller anropa genereraOutput-funktionen om spelaren gör en rätt gissning.
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 = "";
}
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 ett huvudelement som kommer att rymma alla andra element i spelet. I huvudelementet definierar du ett h1-element med texten Hangman.
<h1 class="title">
Hangman
</h1>
Skapa en tagline och återge bödelfiguren i det första steget endast om antalet element i arrayen hangmanStages är större än 0.
<div class="tagline">
I'm thinking of a word. Could you guess the letters in that word?
</div>
{#if hangmanStages.length > 0}
<pre 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}
<div class="message" bind:this={message}>You Lose...</div>
{/if}
{#if selectedWord === match}
<div 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}
<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="Enter a letter"
maxlength="1"
bind:value={userInput}
/>
<button type="submit">Submit</button>
</form>
{/if}
Nu kan du lägga till lämplig styling till applikationen. Skapa en stiltagg 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 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 ett ramverk som kan rymma komplexa saker som reaktivitet, samtidigt som det ger dig 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.
