Zrozum podstawy Svelte, budując prostą grę Wisielec.

Svelte to radykalnie nowy 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 kata

Wisielec to gra polegająca na zgadywaniu słów, rozgrywana zazwyczaj pomiędzy dwiema osobami, w której jeden gracz myśli o słowie, a drugi próbuje odgadnąć to słowo litera po literze. Celem zgadującego gracza jest odgadnięcie sekretnego słowa, zanim skończą mu się błędne odpowiedzi.

Po rozpoczęciu gry gospodarz wybiera tajne słowo. Długość słowa jest zwykle wskazywana drugiemu graczowi (zgadującemu) za pomocą myślników. Gdy zgadujący dokonuje błędnych przypuszczeń, losowane są dodatkowe części kata, począwszy od głowy, tułowia, ramion i nóg.

Osoba zgadująca wygrywa, jeśli uda mu się odgadnąć wszystkie litery w słowie, zanim rysunek stickmana zostanie ukończony. Wisielec to świetny sposób na sprawdzenie słownictwa, rozumowania i umiejętności dedukcji.

instagram viewer

Konfigurowanie środowiska programistycznego

Kod użyty w tym projekcie jest dostępny w formacie Repozytorium GitHuba i jest darmowy do użytku na licencji MIT. Jeśli chcesz zobaczyć wersję na żywo tego projektu, możesz to sprawdzić to demo.

Aby uruchomić Svelte na swoim komputerze, zaleca się zbudowanie projektu za pomocą Vite.js. Aby korzystać z Vite, upewnij się, że tak Menedżer pakietów węzłów (NPM) I Node.js zainstalowany na Twoim komputerze. Możesz także użyć alternatywnego menedżera pakietów, takiego jak Yarn. Teraz otwórz terminal i uruchom następujące polecenie:

npm create vite

Spowoduje to rozpoczęcie nowego projektu z Vite Interfejs wiersza poleceń (CLI). Nazwij swój projekt, wybierz Smukły jako framework i ustaw wariant na JavaScript. Teraz płyta CD do katalogu projektu i uruchom następującą komendę, aby zainstalować zależności:

npm install

Teraz otwórz projekt i w pliku źródło folderze, utwórz plik kataArt.js plik i usuń aktywa I biblioteka teczka. Następnie wyczyść zawartość pliku Aplikacja smukła I Aplikacja.css akta. w Aplikacja.css plik, dodaj następujące elementy;

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

Skopiuj zawartość pliku kataSztuka.js plik z tego projektu Repozytorium GitHuba, a następnie wklej go do własnego kataArt.js plik. Możesz uruchomić serwer programistyczny za pomocą następującego polecenia:

npm run dev

Definiowanie logiki aplikacji

Otworzyć Aplikacja smukła plik i utwórz plik scenariusz tag, który będzie zawierał większość logiki aplikacji. Stwórz słowa tablica do przechowywania listy słów.

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

Następnie zaimportuj plik kataSztuka tablica z kataArt.js plik. Następnie utwórz zmienną Wejście użytkownika, zmienna Liczba losowai inną zmienną przechowującą losowo wybrane słowo z pliku słowa szyk.

Przypisz wybraneSłowo do innej zmiennej wstępny. Oprócz innych zmiennych utwórz następujące zmienne: mecz, wiadomość, kataSceny, I wyjście. Zainicjuj zmienną wyjściową ciągiem myślników, w zależności od długości wybraneSłowo. Przypisz kataSztuka tablica do kata, etapy zmienny.

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 funkcjonalności

Gdy gracz zgadnie, chcesz pokazać mu wynik. Dane wyjściowe pomogą graczowi dowiedzieć się, czy dokonał dobrego, czy błędnego przypuszczenia. Utwórz funkcję wygeneruj dane wyjściowe do obsługi zadania generowania wyniku.

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

Dla każdego przypuszczenia przesłanego przez gracza program będzie musiał określić, czy jest to prawidłowe przypuszczenie. Stworzyć oceniać funkcja, która przeniesie rysunek kata do następnego etapu, jeśli gracz zgadnie źle, lub wywoła funkcję wygeneruj dane wyjściowe funkcji, jeśli gracz prawidłowo zgadnie.

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

W ten sposób ukończyłeś logikę aplikacji. Możesz teraz przejść do definiowania znaczników.

Definiowanie znaczników projektu

Stwórz główny element, który będzie zawierał wszystkie inne elementy w grze. w główny element, zdefiniuj h1 element z tekstem Kat.

<h1class="title">
 Hangman
h1>

Utwórz slogan i wyrenderuj figurę kata na pierwszym etapie tylko wtedy, gdy liczba elementów w kata, etapy tablica jest większa niż 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}

Następnie zaimplementuj logikę, aby wyświetlić komunikat wskazujący, czy gracz wygrał, czy przegrał:

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

Następnie wyrenderuj dane wyjściowe i formularz, aby zaakceptować dane wejściowe od użytkownika. Wynik i formularz powinny zostać wyświetlone tylko wtedy, gdy na ekranie nie ma elementu z klasą „wiadomość”.

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

Teraz możesz dodać do aplikacji odpowiednią stylizację. Stwórz styl tag i dodaj w nim:

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

Stworzyłeś grę w kata ze Svelte. Dobra robota!

Co sprawia, że ​​Svelte jest niesamowity?

Svelte to framework, który jest stosunkowo łatwy do opanowania i nauczenia się. Ponieważ składnia logiczna Svelte jest podobna do Vanilla JavaScript, sprawia to, że jest to idealny wybór, jeśli chcesz framework, który może pomieścić złożone rzeczy, takie jak reaktywność, dając jednocześnie możliwość pracy z Vanillą JavaScript. W przypadku bardziej złożonych projektów możesz użyć SvelteKit — meta frameworku, który został opracowany jako odpowiedź Svelte na Next.js.