A Svelte egy radikálisan új JavaScript-keretrendszer, amely meghódítja a fejlesztők szívét. Egyszerű szintaxisa kiváló jelöltté teszi a kezdőknek, akik szeretnének belemerülni a JavaScript-keretrendszerek világába. A tanulás egyik legjobb módja az építkezés, ezért ebben az útmutatóban megtudhatja, hogyan használhatja a Svelte által kínált funkciókat egy egyszerű hóhérjáték létrehozásához.
Tartalomjegyzék
Hogyan működik a hóhér
A hóhér egy szókitaláló játék, amelyet általában két ember játszanak, ahol az egyik játékos egy szóra gondol, a másik játékos pedig betűről betűre próbálja kitalálni azt a szót. A tippelő játékos célja, hogy kitalálja a titkos szót, mielőtt kifogyna a helytelen tippekből.
Amikor a játék elindul, a házigazda kiválaszt egy titkos szót. A szó hosszát általában kötőjelekkel jelzik a másik játékosnak (kitalálónak). Amint a kitaláló helytelen tippeket ad, a hóhér további részei rajzolódnak ki, a fejtől, a testtől, a karoktól és a lábaktól.
A kitaláló nyeri a játékot, ha sikerül kitalálnia a szó összes betűjét, mielőtt a pálcikaember figura elkészülne. A Hangman nagyszerű módja a szókincs, az érvelés és a levonási készségek tesztelésének.
A fejlesztői környezet beállítása
A projektben használt kód elérhető a GitHub adattár és az MIT licence alapján ingyenesen használható. Ha meg szeretné tekinteni a projekt élő változatát, megteheti ezt a demót.
Ahhoz, hogy a Svelte elinduljon a gépeden, tanácsos a projektet a Vite.js-szel felállványozni. A Vite használatához győződjön meg arról, hogy a Node Package Manager (NPM) és a Node.js telepítve van a gépen. Használhat alternatív csomagkezelőt is, például a Yarn-t. Most nyissa meg a terminált, és futtassa a következő parancsot:
npm create vite
Ezzel egy új projekt indul a Vite Command Line Interface (CLI) segítségével. Nevezze el a projektet, válassza ki a Svelte keretrendszert, és állítsa a változatot JavaScriptre. Most helyezze be a cd-t a projektkönyvtárba, és futtassa a következő parancsot a függőségek telepítéséhez:
npm install
Most nyissa meg a projektet, és az src mappában hozzon létre egy hangmanArt.js fájlt, és törölje az eszközöket és a lib mappát. Ezután törölje az App.svelte és App.css fájlok tartalmát. Az App.css fájlban adja hozzá a következőket;
:root{
background-color: rgb(0, 0, 0);
color:green;
font-family: monospace;
}
Másolja ki a hangmanArt.js fájl tartalmát a projektből GitHub adattár, majd illessze be a saját hangmanArt.js fájljába. A fejlesztői kiszolgálót a következő paranccsal indíthatja el:
npm run dev
Az alkalmazás logikájának meghatározása
Nyissa meg az App.svelte fájlt, és hozzon létre egy szkriptcímkét, amely az alkalmazás logikájának nagy részét tartalmazza. Hozzon létre egy szótömböt a szavak listájának tárolására.
let words = [
"appetizer",
"roommates",
"shrinking",
"freedom",
"happiness",
"development",
];
Ezután importálja a hangmanArt tömböt a hangmanArt.js fájlból. Ezután hozzon létre egy userInput változót, egy randomNumber változót és egy másik változót a szótömbből véletlenszerűen kiválasztott szó tárolására.
Rendelje hozzá a kiválasztott szót egy másik változó kezdőbetűjéhez. A többi változó mellett hozza létre a következő változókat: match, message, hangmanStages és output. Inicializálja a kimeneti változót kötőjelekkel, a kiválasztottWord hosszától függően. Rendelje hozzá a hangmanArt tömböt a hangmanStages változóhoz.
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;
A szükséges funkciók hozzáadása
Miközben a játékos tippel, meg akarod mutatni a kimenetet a játékosnak. Ez a kimenet segít a játékosnak tudni, hogy jól vagy rosszul tippelt-e. Hozzon létre egy generateOutput függvényt a kimenet létrehozásának kezelésére.
function generateOutput(input1, input2) {
output = "";
for (let i = 0; i < input1.length; i++) {
if (input2[i] === "-") {
output += input1[i];
} else {
output += "-";
}
}
}
A programnak minden egyes tippelésekor meg kell határoznia, hogy helyes-e. Hozzon létre egy kiértékelő függvényt, amely áthelyezi a hóhérrajzot a következő szakaszba, ha a játékos rosszul tippel, vagy hívja meg a generateOutput függvényt, ha a játékos helyesen tippel.
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 = "";
}
És ezzel befejezte az alkalmazás logikáját. Most továbbléphet a jelölés meghatározására.
A projekt jelölésének meghatározása
Hozz létre egy fő elemet, amely a játék összes többi elemét tartalmazza. A fő elemben adjon meg egy h1 elemet Hangman szöveggel.
<h1 class="title">
Hangman
</h1>
Hozzon létre egy szlogenet, és csak akkor jelenítse meg a hóhér figurát az első szakaszban, ha a hangmanStages tömb elemeinek száma nagyobb, mint 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}
Ezután hajtsa végre a logikát, hogy megjelenjen egy üzenet, amely jelzi, hogy a játékos nyert vagy veszített:
{#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}
Ezután jelenítse meg a kimenetet és egy űrlapot a felhasználó bevitelének elfogadásához. A kimenet és az űrlap csak akkor jelenjen meg, ha az „üzenet” osztályú elem nincs a képernyőn.
{#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}
Most hozzáadhatja a megfelelő stílust az alkalmazáshoz. Hozzon létre egy stíluscímkét, és adja hozzá a következőket:
* {
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;
}
Létrehoztál egy hóhér játékot a Svelte segítségével. Nagyszerű munka!
Mitől varázslatos a Svelte?
A Svelte egy olyan keretrendszer, amelyet viszonylag könnyű felvenni és megtanulni. Mivel a Svelte logikai szintaxisa hasonló a Vanilla JavaScript-hez, ez tökéletes választássá teszi, ha olyan keretrendszert szeretne, amely képes olyan összetett dolgokat tárolni, mint például a reaktivitás, miközben lehetőséget ad a Vanilla JavaScript használatára. Bonyolultabb projektekhez használhatja a SvelteKit-et – egy meta-keretrendszert, amelyet a Svelte válaszaként fejlesztett ki a Next.js-re.