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

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.

  A Stremio használata és telepítése Linuxon

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.

  Az adatvédelmi radír megtisztítja és optimalizálja a számítógépet, és biztonságosan aprítja a fájlokat

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!

  A Numix témák testreszabása Linuxon az OOMOX segítségével

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.