Kako ustvariti igro Hangman s Svelte

Svelte je radikalno novo ogrodje JavaScript, ki osvaja srca razvijalcev. Zaradi svoje preproste sintakse je odličen kandidat za začetnike, ki se želijo potopiti v svet ogrodij JavaScript. Eden najboljših načinov učenja je gradnja, zato se boste v tem priročniku naučili, kako uporabiti funkcije, ki jih ponuja Svelte, da ustvarite preprosto igro vislice.

Kako deluje Hangman

Hangman je igra ugibanja besed, ki jo običajno igrata dve osebi, pri čemer si en igralec zamisli besedo, drugi igralec pa jo poskuša uganiti črko za črko. Cilj igralca, ki ugiba, je ugotoviti skrivno besedo, preden mu zmanjka napačnih ugibanj.

Ko se igra začne, gostitelj izbere skrivno besedo. Dolžina besede je običajno prikazana drugemu igralcu (ugibalcu) s pomišljaji. Ko ugibalec napačno ugiba, se narišejo dodatni deli obešenjaka, ki napredujejo od glave, telesa, rok in nog.

Ugibalec zmaga v igri, če mu uspe uganiti vse črke v besedi, preden je risba palice končana. Hangman je odličen način za preverjanje besedišča, sklepanja in sposobnosti sklepanja.

Nastavitev razvojnega okolja

Če želite, da Svelte začne delovati na vašem računalniku, je priporočljivo, da projekt zgradite z Vite.js. Če želite uporabljati Vite, se prepričajte, da imate Node Package Manager (NPM) in Node.js nameščen na vašem računalniku. Uporabite lahko tudi alternativnega upravitelja paketov, kot je Yarn. Zdaj odprite terminal in zaženite naslednji ukaz:

npm create vite

To bo začelo nov projekt z Vite Vmesnik ukazne vrstice (CLI). Poimenujte svoj projekt, izberite Svelte kot ogrodje in nastavite različico na JavaScript. zdaj cd v imenik projekta in zaženite naslednji ukaz za namestitev odvisnosti:

npm install

Zdaj odprite projekt in v src mapo, ustvarite a hangmanArt.js datoteko in izbrišite sredstev in lib mapo. Nato počistite vsebino App.svelte in App.css datoteke. V App.css datoteko dodajte naslednje;

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

Kopirajte vsebino obešenjakArt.js datoteka iz tega projekta Repozitorij GitHubin ga nato prilepite v svoje hangmanArt.js mapa. Razvojni strežnik lahko zaženete z naslednjim ukazom:

npm run dev

Definiranje logike aplikacije

Odprite App.svelte datoteko in ustvarite a scenarij oznako, ki bo vsebovala večino logike aplikacije. Ustvariti besede polje za shranjevanje seznama besed.

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

Nato uvozite obešenjakArt niz iz hangmanArt.js mapa. Nato ustvarite spremenljivko userInput, spremenljivka randomNumber, in drugo spremenljivko za shranjevanje naključno izbrane besede iz besede niz.

Dodelite izbranaBeseda na drugo spremenljivko začetnica. Poleg drugih spremenljivk ustvarite naslednje spremenljivke: tekma, sporočilo, hangmanStages, in izhod. Inicializirajte izhodno spremenljivko z nizom pomišljajev, odvisno od dolžine izbranaBeseda. Dodelite obešenjakArt niz do hangmanStages spremenljivka.

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;

Dodajanje potrebnih funkcij

Ko igralec ugiba, mu želite pokazati rezultat. Ta rezultat bo igralcu pomagal vedeti, ali je uganil pravilno ali napačno. Ustvarite funkcijo generateOutput za obravnavo naloge generiranja izhoda.

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

Za vsako ugibanje, ki ga poda igralec, bo moral program ugotoviti, ali je ugibanje pravilno. Ustvarite oceniti funkcijo, ki premakne risbo obešenjaka na naslednjo stopnjo, če igralec ugiba narobe, ali pokliče generateOutput funkcijo, če igralec pravilno ugiba.

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

In s tem ste zaključili logiko aplikacije. Zdaj lahko nadaljujete z definiranjem oznake.

Definiranje oznake projekta

Ustvariti glavni element, ki bo vseboval vse druge elemente v igri. V glavni element, definirajte an h1 element z besedilom Obešenjak.

<h1class="title">
 Hangman
h1>

Ustvarite slogan in upodabljajte figuro obešenjaka na prvi stopnji le, če je število elementov v hangmanStages niz je večji od 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}

Nato implementirajte logiko za prikaz sporočila, ki označuje, ali je igralec zmagal ali izgubil:

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

Nato upodobite izhod in obrazec za sprejemanje vnosa od uporabnika. Izpis in obrazec naj bosta prikazana le, če elementa z razredom "message" ni na zaslonu.

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

Zdaj lahko aplikaciji dodate ustrezen slog. Ustvariti stil in vanjo dodajte naslednje:

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

S Sveltejem ste ustvarili igro vislice. Odlično opravljeno!

Zakaj je Svelte neverjeten?

Svelte je ogrodje, ki ga je razmeroma enostavno izbrati in naučiti. Ker je logična sintaksa Svelte podobna Vanilla JavaScriptu, je to odlična izbira, če želite ogrodje, ki lahko vsebuje zapletene stvari, kot je reaktivnost, hkrati pa vam daje priložnost za delo z Vanilla JavaScript. Za bolj zapletene projekte lahko uporabite SvelteKit—meta okvir, ki je bil razvit kot Sveltejev odgovor na Next.js.