Ako vytvoriť hru Hangman s Svelte

Svelte je radikálny nový rámec JavaScriptu, ktorý si získava srdcia vývojárov. Jeho jednoduchá syntax z neho robí skvelého kandidáta pre začiatočníkov, ktorí sa chcú ponoriť do sveta rámcov JavaScriptu. Jedným z najlepších spôsobov, ako sa učiť, je stavanie, takže v tejto príručke sa naučíte, ako používať funkcie, ktoré Svelte ponúka, na vytvorenie jednoduchej hry kata.

Ako Hangman funguje

Hangman je hra na hádanie slov, ktorá sa zvyčajne hrá medzi dvoma ľuďmi, kde jeden hráč myslí na slovo a druhý hráč sa snaží uhádnuť toto slovo písmeno po písmene. Cieľom hádajúceho hráča je zistiť tajné slovo skôr, ako mu dôjdu nesprávne odhady.

Keď sa hra začne, hostiteľ vyberie tajné slovo. Dĺžka slova sa zvyčajne indikuje druhému hráčovi (hádačovi) pomocou pomlčiek. Keď hádajúci odhadne nesprávne, vylosujú sa ďalšie časti kata, pričom postupujú od hlavy, tela, rúk a nôh.

Hádateľ vyhráva hru, ak sa mu podarí uhádnuť všetky písmená v slove pred dokončením kreslenia figúrky stickmana. Hangman je skvelý spôsob, ako otestovať slovnú zásobu, uvažovanie a dedukčné schopnosti.

Nastavenie vývojového prostredia

Ak chcete, aby sa Svelte na vašom počítači spustilo, odporúča sa vytvoriť lešenie projektu pomocou Vite.js. Ak chcete používať Vite, uistite sa, že máte Správca balíkov uzlov (NPM) a Node.js nainštalovaný na vašom počítači. Môžete tiež použiť alternatívneho správcu balíkov, ako je Yarn. Teraz otvorte terminál a spustite nasledujúci príkaz:

npm create vite

Tým sa spustí nový projekt s Vite Rozhranie príkazového riadka (CLI). Pomenujte svoj projekt, vyberte Štíhle ako rámec a nastavte variant na JavaScript. Teraz cd do adresára projektu a spustite nasledujúci príkaz na inštaláciu závislostí:

npm install

Teraz otvorte projekt a v src priečinok, vytvorte a hangmanArt.js súbor a odstráňte ho aktíva a lib priečinok. Potom vymažte obsah App.svelte a App.css súbory. V App.css súbor, pridajte nasledujúce;

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

Skopírujte obsah súboru kataArt.js súbor z tohto projektu úložisko GitHuba potom ho vložte do vlastného hangmanArt.js súbor. Vývojový server môžete spustiť nasledujúcim príkazom:

npm run dev

Definovanie logiky aplikácie

Otvor App.svelte súbor a vytvorte a skript tag, ktorý bude obsahovať väčšinu logiky aplikácie. Vytvor slová pole na uloženie zoznamu slov.

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

Ďalej importujte súbor kataArt pole z hangmanArt.js súbor. Potom vytvorte premennú userInput, premenná randomNumbera ďalšia premenná na uloženie náhodne vybraného slova z slová pole.

Priraďte vybrané slovo do inej premennej počiatočné. Okrem ostatných premenných vytvorte nasledujúce premenné: zápas, správu, hangmanStage, a výkon. Inicializujte výstupnú premennú reťazcom pomlčiek v závislosti od dĺžky vybrané slovo. Priraďte kataArt pole k hangmanStages premenlivý.

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;

Pridanie potrebných funkcií

Keď hráč háda, chcete hráčovi ukázať výstup. Tento výstup pomôže hráčovi zistiť, či uhádol správne alebo nesprávne. Vytvorte funkciu generovať výstup zvládnuť úlohu generovania výstupu.

functiongenerateOutput(input1, input2) {
 output = "";
for (let i = 0; i < input1.length; i++) {
if (input2[i] "-") {
 output += input1[i];
 } else {
 output += "-";
 }
 }
}

Pri každom odhade, ktorý hráč odošle, bude musieť program určiť, či je to správny tip. Vytvorte ohodnotiť funkcia, ktorá posunie kresbu kata do ďalšej fázy, ak hráč uhádne zle, alebo zavolá generovať výstup funkciu, ak hráč odhadne správne.

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 = "";
}

A tým ste dokončili logiku aplikácie. Teraz môžete prejsť k definovaniu značky.

Definovanie značky projektu

Vytvor Hlavná prvok, ktorý bude obsahovať všetky ostatné prvky v hre. V Hlavná prvok, definovať an h1 prvok s textom Obesenec.

<h1class="title">
 Hangman
h1>

Vytvorte slogan a vykreslite figúrku kata v prvej fáze iba vtedy, ak je počet prvkov v hangmanStages pole je väčšie ako 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}

Potom implementujte logiku, aby sa zobrazila správa označujúca, či hráč vyhral alebo prehral:

{#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}

Ďalej vykreslite výstup a formulár na prijatie vstupu od používateľa. Výstup a formulár by sa mali zobraziť iba vtedy, ak prvok s triedou „správa“ nie je na obrazovke.

{#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}

Teraz môžete do aplikácie pridať vhodný štýl. Vytvor štýl značku a do nej pridajte nasledovné:

 * {
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;
 }

Vytvorili ste hru kata so Svelte. Dobrá práca!

Čím je Svelte úžasný?

Svelte je rámec, ktorý sa dá relatívne ľahko uchopiť a naučiť sa. Pretože logická syntax Svelte je podobná Vanilla JavaScriptu, je to ideálna voľba, ak chcete a rámec, ktorý môže obsahovať zložité veci, ako je reaktivita, a zároveň vám dáva príležitosť pracovať s vanilkou JavaScript. Pre komplexnejšie projekty môžete použiť SvelteKit – metarámec, ktorý bol vyvinutý ako odpoveď Svelteho na Next.js.