Hogyan készítsünk hóhér játékot a Svelte segítségével

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.

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

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 rendelkezik Node Package Manager (NPM) és Node.js telepítve van a gépére. 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-val Parancssori interfész (CLI). Nevezze el a projektet, válassza ki Karcsú keretként, és állítsa be a változatot JavaScript. Most CD 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 a src mappát, hozzon létre a hangmanArt.js fájlt, és törölje a eszközök és lib mappát. Ezután törölje a tartalmát App.svelte és App.css fájlokat. Ban,-ben App.css fájlt, adja hozzá a következőket;

:root{
background-color: rgb(0, 0, 0);
color:green;
font-family: monospace;
}

Másolja ki a tartalmát hóhérArt.js fájl ebből a projektből GitHub adattár, majd illessze be a sajátjába hangmanArt.js fájlt. 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 a App.svelte fájlt, és hozzon létre a forgatókönyv címke, amely az alkalmazás logikájának nagy részét tartalmazza. Hozzon létre egy szavak tömb a szavak listájának tárolására.

let words = [
"appetizer",
"roommates",
"shrinking",
"freedom",
"happiness",
"development",
];

Ezután importálja a hóhérArt tömb a hangmanArt.js fájlt. Ezután hozzon létre egy változót userInput, egy változó véletlenszám, és egy másik változó, amely egy véletlenszerűen kiválasztott szót tartalmaz a szavak sor.

Rendelje hozzá a kiválasztottWord egy másik változóra a kezdeti. A többi változó mellett hozza létre a következő változókat: mérkőzés, üzenet, hóhérStages, és Kimenet. Inicializálja a kimeneti változót kötőjelekkel, a hosszától függően kiválasztottWord. Rendelje hozzá a hóhérArt tömb a hóhérStages változó.

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 függvényt generál Output hogy kezelje a kimenet létrehozásának feladatát.

functiongenerateOutput(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 értékelni funkció, amely áthelyezi a hóhérrajzot a következő szakaszba, ha a játékos rosszul tippel, vagy hívja a generál Output funkciót, ha a játékos helyesen tippel.

functionevaluate() {
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

Hozzon létre egy fő- elem, amely a játék összes többi elemét tartalmazza. Ban,-ben fő- elemet, határozzon meg egy h1 elemet a szöveggel Hóhér.

<h1class="title">
 Hangman
h1>

Hozzon létre egy szlogenet, és csak akkor jelenítse meg a hóhér figurát az első szakaszban, ha az elemek száma a hóhérStages tömb nagyobb, mint 0.

class="tagline">
 I'm thinking of a word. Could you guess the letters in that word?
</div>
{#if hangmanStages.length > 0}
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}

class="message" bind:this={message}>You Lose...</div>
{/if}
{#if selectedWord match}

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}

class="output">
 {#each output as letter}
 {#if letter !== "-"}
class="complete box">{letter}</span>
 {:else}
class="incomplete box" />
 {/if}
 {/each}
 </div>
 evaluate()}>
 type="text"
 placeholder="Enter a letter"
 maxlength="1"
 bind: value={userInput}
 />
"submit">Submit</button>
 </form>
{/if}

Most hozzáadhatja a megfelelő stílust az alkalmazáshoz. Hozzon létre egy stílus cí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.2pxgreen;
height:40px;
font-size: 15px;
 }
.box {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: inherit;
border: dotted 1.2pxgreen;
 }
.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-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 egy keretrendszer, amely olyan összetett dolgokat tartalmazhat, mint a reaktivitás, miközben lehetőséget ad a Vanilla-val való együttműködésre JavaScript. Bonyolultabb projektekhez használhatja a SvelteKit-et – egy meta-keretrendszert, amelyet a Svelte válaszaként fejlesztett ki a Next.js-re.