Svelte, nowoczesne środowisko JavaScript, zyskuje popularność wśród programistów dzięki swojej prostocie. Jego czytelna składnia sprawia, że jest idealnym wyborem dla osób rozpoczynających przygodę z frameworkami JavaScript. Jednym z efektywnych sposobów nauki jest praktyczne działanie, dlatego ten artykuł pokaże, jak użyć możliwości Svelte do stworzenia prostej gry w wisielca.
Zasady gry w wisielca
Wisielec to gra słowna, zazwyczaj przeznaczona dla dwóch osób. Jeden gracz wybiera słowo, a drugi próbuje je odgadnąć, podając litery pojedynczo. Celem zgadującego jest odkrycie sekretnego słowa, zanim wykorzysta wszystkie dozwolone pomyłki.
Na początku rozgrywki osoba wybierająca słowo ukrywa je. Drugiemu graczowi (zgadującemu) ujawniana jest jedynie liczba liter w słowie, zazwyczaj za pomocą kresek. W przypadku błędnych prób zgadującego, na rysunku wisielca pojawiają się kolejne elementy, takie jak głowa, tułów, ręce i nogi.
Zwycięzcą zostaje osoba zgadująca, jeśli uda jej się poprawnie wskazać wszystkie litery słowa przed ukończeniem rysunku wisielca. Gra w wisielca to doskonałe ćwiczenie na słownictwo, umiejętność dedukcji i logicznego myślenia.
Konfiguracja środowiska programistycznego
Kod źródłowy tego projektu znajduje się w repozytorium GitHub i można go wykorzystywać na licencji MIT. Dostępna jest także wersja demonstracyjna projektu tutaj.
Aby rozpocząć pracę z Svelte, zaleca się utworzenie projektu za pomocą Vite.js. Potrzebne będą zainstalowane menedżery pakietów Node (NPM) i Node.js. Możliwe jest też użycie alternatywnego menedżera, na przykład Yarn. Otwórz terminal i wpisz polecenie:
npm create vite
W ten sposób zainicjujesz nowy projekt za pomocą interfejsu CLI Vite. Nadaj nazwę swojemu projektowi, wybierz Svelte jako framework i JavaScript jako wariant. Następnie przejdź do katalogu projektu i uruchom polecenie, aby zainstalować zależności:
npm install
Teraz otwórz projekt, w folderze src utwórz plik hangmanArt.js i usuń folder lib oraz wszystkie niepotrzebne zasoby. Wyczyść także zawartość plików App.svelte i App.css. W pliku App.css wklej następujące ustawienia:
:root{
background-color: rgb(0, 0, 0);
color:green;
font-family: monospace;
}
Następnie skopiuj zawartość pliku hangmanArt.js z repozytorium GitHub i wklej go do nowo utworzonego pliku. Serwer programistyczny można uruchomić, wpisując:
npm run dev
Określenie logiki aplikacji
Otwórz plik App.svelte i utwórz blok skryptu, w którym umieścisz główną logikę aplikacji. Utwórz tablicę słów, która będzie przechowywać listę haseł do odgadnięcia.
let words = [
"appetizer",
"roommates",
"shrinking",
"freedom",
"happiness",
"development",
];
Następnie zaimportuj tablicę hangmanArt z pliku hangmanArt.js. Utwórz zmienną userInput, zmienną randomNumber i inną zmienną do przechowywania losowo wybranego słowa z tablicy słów.
Przypisz wybraneSłowo do początkowej wartości innej zmiennej. Oprócz tych zmiennych, utwórz zmienne: match, message, hangmanStages i output. Zmienną output zainicjuj ciągiem kresek, którego długość odpowiada długości wybranego słowa. Tablicę hangmanArt przypisz do zmiennej hangmanStages.
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;
Dodanie niezbędnych funkcji
Po każdej próbie zgadnięcia, gracz powinien zobaczyć aktualny stan gry. Zmienna output pozwoli graczowi zorientować się, czy jego typ był poprawny. Stwórz funkcję generateOutput, która będzie odpowiedzialna za aktualizację stanu gry.
function generateOutput(input1, input2) {
output = "";
for (let i = 0; i < input1.length; i++) {
if (input2[i] === "-") {
output += input1[i];
} else {
output += "-";
}
}
}
Po wprowadzeniu litery przez gracza, program musi sprawdzić, czy jest ona zawarta w szukanym słowie. Utwórz funkcję evaluate, która w przypadku błędnej próby przejdzie do następnego etapu rysowania wisielca, a w przypadku prawidłowej wywoła funkcję generateOutput.
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 = "";
}
W tym momencie logika aplikacji jest gotowa. Teraz można zająć się definiowaniem elementów interfejsu użytkownika.
Definiowanie struktury projektu
Utwórz główny element, który będzie zawierał wszystkie pozostałe elementy gry. W elemencie głównym zdefiniuj element h2 z tytułem gry: „Wisielec”.
<h2 class="title">
Wisielec
</h2>
Dodaj slogan i wyrenderuj element wisielca w pierwszej fazie, tylko wtedy gdy liczba elementów w tablicy hangmanStages jest większa od 0.
<div class="tagline">
Myślę o słowie. Czy potrafisz odgadnąć jego litery?
</div>
{#if hangmanStages.length > 0}
<pre class="hangman">
{hangmanStages[0]}</pre>
{/if}
Następnie dodaj kod odpowiedzialny za wyświetlenie komunikatu o wygranej lub przegranej:
{#if hangmanStages.length === 1}
<div class="message" bind:this={message}>Przegrałeś...</div>
{/if}
{#if selectedWord === match}
<div class="message" bind:this={message}>Wygrałeś...</div>
{/if}
Wyświetl również stan odgadniętego hasła i formularz, który będzie przyjmował litery od użytkownika. Te elementy powinny być widoczne tylko wtedy, gdy nie wyświetla się komunikat o wygranej lub przegranej.
{#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="Wpisz literę"
maxlength="1"
bind:value={userInput}
/>
<button type="submit">Zatwierdź</button>
</form>
{/if}
Teraz można dodać do aplikacji stylizację. Utwórz tag style i dodaj następujące style:
* {
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;
}
Gratulacje! Stworzyłeś grę w wisielca za pomocą Svelte.
Dlaczego Svelte jest wyjątkowy?
Svelte to framework, który jest stosunkowo prosty w nauce. Dzięki temu, że jego składnia jest zbliżona do Vanilla JavaScript, Svelte jest doskonałym wyborem, gdy szukasz narzędzia, które pozwala obsługiwać zaawansowane funkcje, takie jak reaktywność, przy jednoczesnym zachowaniu elastyczności Vanilla JavaScript. W przypadku większych projektów można użyć SvelteKit – meta frameworka, który jest odpowiedzią Svelte na Next.js.