Jak stworzyć grę Hangman za pomocą Svelte

Svelte to nowy, radykalny framework JavaScript, który podbija serca programistów. Jego prosta składnia czyni go doskonałym kandydatem dla początkujących, którzy chcą zanurzyć się w świecie frameworków JavaScript. Jednym z najlepszych sposobów nauki jest budowanie, więc w tym przewodniku dowiesz się, jak korzystać z funkcji oferowanych przez Svelte, aby stworzyć prostą grę w wisielca.

Jak działa Hangman

Hangman to intrygująca gra polegająca na rozszyfrowywaniu słów, w którą zwykle angażują się dwie osoby, podczas gdy jeden uczestnik ukrywa słowo, a drugi stara się je rozpoznać poprzez kolejne próby odgadnięcia jego liter. Głównym celem osoby próbującej zgadnąć jest odkrycie enigmatycznego słowa przed wyczerpaniem wszystkich możliwości błędnych przypuszczeń.

Na początku gry moderator wybiera ukryty termin. Zazwyczaj długość słowa jest ujawniana przeciwnikowi (przypuszczającemu) za pomocą myślników. Podczas gdy supozycjonista przedstawia błędne wnioski, szkicowane są kolejne elementy szubienicy, począwszy od czaszki, tułowia, kończyn i przydatków.

Sukces zgadującego w osiągnięciu pełnego ujawnienia liter przed ukończeniem ilustracji stickmana decyduje o zwycięstwie w tej grze. Hangman służy jako skuteczny środek do oceny wiedzy językowej, logicznego myślenia i zdolności wnioskowania.

Konfiguracja środowiska programistycznego

Kod źródłowy wykorzystany w tym przedsięwzięciu został przesłany do repozytorium GitHub, gdzie jest dostępny bezpłatnie na warunkach licencji MIT. Osoby zainteresowane zapoznaniem się z działającym przykładem tego projektu mogą zapoznać się z demonstracją zamieszczoną w niniejszym dokumencie.

Aby skonfigurować nowy projekt Svelte przy użyciu Vite.js, należy upewnić się, że na komputerze jest zainstalowany zarówno Node Package Manager (NPM), jak i Node.js. Dodatkowo, w razie potrzeby, można skorzystać z innego menedżera pakietów, takiego jak Yarn. Aby zainicjować proces, wykonaj następujące kroki w terminalu:

 npm create vite

Inicjując nowe przedsięwzięcie za pomocą interfejsu wiersza poleceń (CLI), można rozpocząć od podania identyfikatora odpowiedniego projektu. Następnie wybierając Svelte jako preferowany framework, jednocześnie wyznaczając wariant, który ma być JavaScript. Po tych początkowych krokach konieczne jest przejście do określonego katalogu projektu i wykonanie określonego polecenia instalacji w celu uzyskania wszelkich niezbędnych zależności.

 npm install

Wykonaj następujące kroki, aby zmodyfikować aplikację Svelte:1. Otwórz katalog projektu zawierający oba foldery “App” (jeden dla frontendu i jeden dla backendu).2.Przejdź do folderu “src” w katalogu projektu frontendu.3. Utwórz nowy plik JavaScript o nazwie “hangmanArt.js”. Będzie on służył jako punkt wejścia dla naszej logiki gry.4. Usuń foldery “assets” i “lib” z katalogu projektu frontendu, jeśli istnieją. Są one zwykle generowane przez narzędzia kompilacji podczas programowania, ale mogą nie być potrzebne do wdrożenia produkcyjnego.5. Wyczyść zawartość plików “App.svelte” i “App.css” znajdujących się w odpowiednich katalogach.6. W pliku “App.css” dodaj następujący fragment kodu pod adresem

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

Można wyodrębnić zawartość pliku “hangmanArt.js”, który znajduje się w repozytorium online bieżącego projektu na GitHub, stosując standardowe praktyki kopiowania i wklejania. Po wykonaniu tej czynności można wstawić skopiowany materiał bezpośrednio do osobistej kopii pliku “hangmanArt.js” przy użyciu podobnej metody. Aby zainicjować proces uruchamiania lokalnego serwera deweloperskiego, wystarczy wykonać określone polecenie podane w dokumentacji.

 npm run dev

Definiowanie logiki aplikacji

Otwórz plik “App.svelte”, który jest prawdopodobnie głównym komponentem lub kontenerem aplikacji Svelte, i wstaw do niego element