Svelte představuje inovativní JavaScriptový framework, který si rychle získává oblibu mezi vývojáři. Jeho srozumitelná syntaxe ho činí skvělou volbou pro začátečníky, kteří chtějí proniknout do světa JavaScriptových frameworků. Nejefektivnější způsob učení je praxe, a proto se v tomto návodu naučíte, jak využít funkce, které Svelte nabízí, k vytvoření jednoduché hry šibenice.
Princip fungování hry Šibenice
Šibenice je slovní hádanka, kterou obvykle hrají dva hráči. Jeden hráč si zvolí slovo a druhý se ho snaží uhodnout, postupně po písmenech. Cílem hádajícího je odhalit tajné slovo dříve, než mu dojdou pokusy.
Na začátku hry hostitel vybere tajné slovo. Délka slova je obvykle naznačena pomocí pomlček. Při každém chybném tipu se postupně dokresluje postava oběšence, počínaje hlavou, trupem, rukama a nohama.
Hádač vyhrává, pokud správně uhodne všechna písmena ve slově dříve, než je dokončena kresba oběšence. Šibenice je výborný způsob, jak procvičit slovní zásobu, logické myšlení a dedukci.
Nastavení vývojového prostředí
Kód pro tento projekt je volně dostupný v úložišti GitHub pod licencí MIT. Živou ukázku projektu si můžete prohlédnout na tomto demu.
Pro spuštění Svelte na vašem počítači doporučujeme vytvořit projekt pomocí Vite.js. Pro použití Vite je nutné mít nainstalovaný Node Package Manager (NPM) a Node.js. Můžete použít i alternativního správce balíčků, například Yarn. Otevřete terminál a zadejte příkaz:
npm create vite
Tímto se spustí nový projekt s rozhraním příkazové řádky Vite (CLI). Pojmenujte projekt, vyberte Svelte jako framework a JavaScript jako variantu. Přejděte do adresáře projektu a instalujte závislosti pomocí příkazu:
npm install
Nyní otevřete projekt, vytvořte soubor `hangmanArt.js` ve složce `src` a odstraňte složky `assets` a `lib`. Vymažte obsah souborů `App.svelte` a `App.css`. Do souboru `App.css` přidejte následující kód:
:root{
background-color: rgb(0, 0, 0);
color:green;
font-family: monospace;
}
Zkopírujte obsah souboru `hangmanArt.js` z tohoto úložiště GitHub a vložte ho do svého souboru `hangmanArt.js`. Vývojový server spustíte příkazem:
npm run dev
Definování logiky aplikace
Otevřete soubor `App.svelte` a vytvořte značku `