Utforsk Svelte med et Bøddelspill
Svelte, et nyskapende JavaScript-rammeverk, har raskt blitt populært blant utviklere. Dets enkle og lettfattelige syntaks gjør det til et ideelt valg for nybegynnere som ønsker å fordype seg i verden av JavaScript-rammeverk. En praktisk måte å lære på er gjennom prosjekter, og i denne veiledningen skal vi utforske Sveltes funksjoner ved å utvikle et enkelt bøddelspill.
Hvordan Bøddel Fungerer
Bøddel er et ordgjettespill vanligvis spilt mellom to spillere. En spiller velger et hemmelig ord, mens den andre forsøker å gjette ordet, bokstav for bokstav. Målet for gjetteren er å avsløre det hemmelige ordet før de går tom for forsøk.
Spillet starter med at verten velger et hemmelig ord. Lengden på ordet angis ofte med bindestreker. For hver feilaktige gjetning tegnes en ny del av bøddelen, fra hode, kropp, armer og ben.
Gjetteren vinner spillet ved å gjette alle bokstavene i ordet før tegningen av den stiliserte figuren er komplett. Bøddel er en engasjerende måte å utfordre ordforråd, logikk og deduksjonsevner.
Oppsett av Utviklingsmiljøet
Koden for dette prosjektet er tilgjengelig på et GitHub-repositorium under MIT-lisensen. En fungerende demonstrasjon er tilgjengelig her.
For å komme i gang med Svelte, anbefales det å bruke Vite.js for å opprette prosjektstrukturen. Sørg for at du har Node Package Manager (NPM) og Node.js installert. Åpne terminalen og kjør:
npm create vite
Dette starter et nytt prosjekt med Vite Command Line Interface (CLI). Velg et navn for prosjektet, velg Svelte som rammeverk, og JavaScript som variant. Naviger til prosjektkatalogen og kjør kommandoen for å installere avhengigheter:
npm install
Åpne prosjektet. I src-mappen oppretter du en fil ved navn `hangmanArt.js` og sletter `assets` og `lib`-mappene. Tøm deretter innholdet i `App.svelte` og `App.css`. I `App.css` legger du til følgende stil:
:root{
background-color: rgb(0, 0, 0);
color:green;
font-family: monospace;
}
Kopier innholdet i `hangmanArt.js` filen fra GitHub-repositoriet og lim det inn i din egen fil. Du kan starte utviklingsserveren med:
npm run dev
Utvikling av Applikasjonslogikk
Åpne `App.svelte`-filen og opprett et skript-tag for å holde mesteparten av applikasjonslogikken. Lag en ordliste for å lagre en rekke ord.
let words = [
"appetizer",
"roommates",
"shrinking",
"freedom",
"happiness",
"development",
];
Importer `hangmanArt`-arrayen fra `hangmanArt.js`-filen. Opprett deretter variabler som `userInput`, `randomNumber` og en variabel for å holde et tilfeldig valgt ord fra ordlisten.
Tildel det valgte ordet til en ny variabel, `initial`. I tillegg, opprett variabler som `match`, `message`, `hangmanStages` og `output`. Initialiser `output`-variabelen med en rekke bindestreker, basert på lengden av det valgte ordet. Tildel `hangmanArt`-arrayen til `hangmanStages`-variabelen.
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;
Implementering av Funksjoner
Når spilleren gjetter, må du presentere output for spilleren. Dette output hjelper spilleren å forstå om gjetningen var riktig eller feil. Opprett en funksjon, `generateOutput`, for å håndtere dette.
function generateOutput(input1, input2) {
output = "";
for (let i = 0; i < input1.length; i++) {
if (input2[i] === "-") {
output += input1[i];
} else {
output += "-";
}
}
}
For hver gjetning spilleren gjør, må programmet vurdere om den er riktig. Opprett en `evaluate`-funksjon som vil flytte bøddeltegningen til neste trinn dersom spilleren gjetter feil, eller kall `generateOutput`-funksjonen ved korrekt gjetning.
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 dette er applikasjonslogikken fullført, og du kan nå begynne å definere markup.
Utforming av Markup
Opprett et `main`-element for å huse alle de andre elementene i spillet. I dette elementet definerer du et `h1`-element med teksten «Bøddel».
<h1 class="title">
Bøddel
</h1>
Legg til en slagord og vis bøddel-figuren i første trinn dersom antall elementer i `hangmanStages`-arrayen er større enn 0.
<div class="tagline">
Jeg tenker på et ord. Kan du gjette bokstavene i ordet?
</div>
{#if hangmanStages.length > 0}
<pre class="hangman">
{hangmanStages[0]}</pre>
{/if}
Implementer logikk for å vise en melding som indikerer om spilleren har vunnet eller tapt:
{#if hangmanStages.length === 1}
<div class="message" bind:this={message}>Du tapte...</div>
{/if}
{#if selectedWord === match}
<div class="message" bind:this={message}>Du vant...</div>
{/if}
Vis utdata og et skjema for å motta brukerinput. Output og skjema skal kun vises dersom elementet med klassen «message» ikke er synlig.
{#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="Skriv inn en bokstav"
maxlength="1"
bind:value={userInput}
/>
<button type="submit">Send inn</button>
</form>
{/if}
Til slutt, legg til passende styling for applikasjonen:
* {
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 nå fullført et bøddelspill med Svelte! Godt jobbet!
Hvorfor Svelte er Spesielt
Svelte er et rammeverk som er lett å lære seg. Sveltes logiske syntaks ligner på Vanilla JavaScript, noe som gjør det til et utmerket valg hvis du ønsker et rammeverk som kan håndtere komplekse oppgaver, som reaktivitet, samtidig som det gir deg muligheten til å arbeide med Vanilla JavaScript. For mer komplekse prosjekter kan du utforske SvelteKit, et meta-rammeverk utviklet som Sveltes svar på Next.js.