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 å bygge, så i denne guiden vil du lære hvordan du bruker funksjonene Svelte tilbyr for å lage et enkelt bøddelspill.
Innholdsfortegnelse
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
Koden som brukes i dette prosjektet er tilgjengelig i en GitHub-depot og er gratis for deg å bruke under MIT-lisensen. Hvis du vil ta en titt på en live-versjon av dette prosjektet, kan du sjekke ut denne demoen.
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 Command Line Interface (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-mappen, lag en hangmanArt.js-fil og slett aktiva og lib-mappen. Fjern deretter innholdet i App.svelte- og App.css-filene. I App.css-filen legger du til følgende;
:root{
background-color: rgb(0, 0, 0);
color:green;
font-family: monospace;
}
Kopier innholdet i hangmanArt.js-filen 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-filen og lag en skript-tag som vil inneholde mesteparten av logikken til applikasjonen. Lag en ordliste for å holde en liste med ord.
let words = [
"appetizer",
"roommates",
"shrinking",
"freedom",
"happiness",
"development",
];
Deretter importerer du hangmanArt-matrisen fra hangmanArt.js-filen. Deretter oppretter du en variabel userInput, en variabel randomNumber og en annen variabel for å holde et tilfeldig valgt ord fra ordgruppen.
Tilordne det valgte ordet til en annen variabel initial. I tillegg til de andre variablene, lag følgende variabler: match, message, hangmanStages og output. Initialiser utdatavariabelen med en strek med bindestreker, avhengig av lengden på det valgte ordet. Tilordne 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;
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. Opprett en funksjon genererOutput for å håndtere oppgaven med å generere en utgang.
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 sender inn, må programmet avgjøre om det er riktig gjetning. Lag en evalueringsfunksjon som vil flytte bøddeltegningen til neste trinn hvis spilleren gjetter feil, eller kall genererOutput-funksjonen hvis spilleren gjetter riktig.
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 = "";
}
Og med det har du fullført logikken i søknaden. Du kan nå gå videre til å definere markeringen.
Definere markeringen av prosjektet
Lag et hovedelement som skal huse alle andre elementer i spillet. I hovedelementet definerer du et h1-element med teksten Hangman.
<h1 class="title">
Hangman
</h1>
Lag en slagord og gjengi hangman-figuren i det første trinnet bare hvis antallet elementer i hangmanStages-matrisen er større enn 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}
Etterpå implementerer du logikken for å vise en melding som indikerer om spilleren har vunnet eller tapt:
{#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}
Deretter gjengir du utdataene og et skjema for å godta innspill fra brukeren. Utdata og skjema skal bare vises hvis elementet med klassen «melding» ikke er på skjermen.
{#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}
Nå kan du legge til passende styling i applikasjonen. Lag en stilkode 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.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 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 vil ha et 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.