Kako stvoriti igru ​​vješala sa Svelteom

Svelte je radikalno novi JavaScript okvir koji osvaja srca programera. Njegova jednostavna sintaksa čini ga izvrsnim kandidatom za početnike koji žele uroniti u svijet JavaScript okvira. Jedan od najboljih načina učenja je izgradnja, pa ćete u ovom vodiču naučiti kako koristiti značajke koje Svelte nudi za stvaranje jednostavne igre vješala.

Kako radi vješala

Vješala je igra pogađanja riječi koja se obično igra između dvoje ljudi, gdje jedan igrač misli na riječ, a drugi igrač pokušava pogoditi tu riječ slovo po slovo. Cilj igrača koji pogađa je otkriti tajnu riječ prije nego što im ponestane netočnih pogađanja.

Kada igra započne, domaćin odabire tajnu riječ. Duljina riječi obično se ukazuje drugom igraču (pogađaču) pomoću crtica. Kako pogađač netočno pogađa, crtaju se dodatni dijelovi vješala, koji napreduju od glave, tijela, ruku i nogu.

Pogađač pobjeđuje u igri ako uspije pogoditi sva slova u riječi prije nego se završi crtanje figure Stickman. Vješala je izvrstan način za testiranje vokabulara, zaključivanja i vještina zaključivanja.

Postavljanje razvojnog okruženja

Kako biste pokrenuli Svelte na vašem računalu, preporučljivo je postaviti projekt s Vite.js. Da biste koristili Vite, provjerite imate li Node Package Manager (NPM) i Node.js instaliran na vašem računalu. Također možete koristiti alternativni upravitelj paketa kao što je Yarn. Sada otvorite svoj terminal i pokrenite sljedeću naredbu:

npm create vite

Ovo će započeti novi projekt s Viteom Sučelje naredbenog retka (CLI). Imenujte svoj projekt, odaberite Graciozan kao okvir i postavite varijantu na JavaScript. Sada CD u direktorij projekta i pokrenite sljedeću naredbu za instaliranje ovisnosti:

npm install

Sada otvorite projekt i u src mapu, stvorite a vješalaArt.js datoteku i izbrišite imovina i lib mapa. Zatim očistite sadržaj App.svelte i App.css datoteke. u App.css datoteka, dodajte sljedeće;

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

Kopirajte sadržaj vješalaArt.js datoteka iz ovog projekta GitHub spremište, a zatim ga zalijepite u svoj vješalaArt.js datoteka. Razvojni poslužitelj možete pokrenuti sljedećom naredbom:

npm run dev

Definiranje logike aplikacije

Otvori App.svelte datoteku i stvorite a skripta oznaku koja će držati većinu logike aplikacije. Stvoriti riječi niz za držanje popisa riječi.

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

Zatim uvezite vješalaArt niz iz vješalaArt.js datoteka. Zatim stvorite varijablu korisnički unos, varijabla slučajniBroj, i drugu varijablu za držanje nasumično odabrane riječi iz riječi niz.

Dodijelite odabrana Riječ na drugu varijablu početni. Uz ostale varijable, kreirajte sljedeće varijable: odgovarati, poruka, vješala, i izlaz. Inicijalizirajte izlaznu varijablu s nizom crtica, ovisno o duljini odabrana Riječ. Dodijelite vješalaArt niz na vješalaPozornice varijabla.

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;

Dodavanje potrebnih funkcija

Dok igrač pogađa, želite pokazati rezultat igraču. Ovaj rezultat pomoći će igraču da zna je li dobro ili krivo pogodio. Stvorite funkciju generiratiizlaz nositi se sa zadatkom generiranja izlaza.

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

Za svaku pretpostavku koju igrač pošalje, program će morati utvrditi je li to točna pretpostavka. Stvorite procijeniti funkcija koja će premjestiti crtež vješala na sljedeću fazu ako igrač krivo pogodi ili pozovite generiratiizlaz funkcionirati ako igrač dobro pogodi.

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

I time ste zaokružili logiku aplikacije. Sada možete prijeći na definiranje oznake.

Definiranje markupa projekta

Stvoriti glavni element koji će udomiti svaki drugi element u igri. u glavni element, definirajte an h1 element s tekstom Dželat.

<h1class="title">
 Hangman
h1>

Napravite slogan i renderirajte figuru vješala u prvoj fazi samo ako je broj elemenata u vješalaPozornice niz je veći 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}

Nakon toga implementirajte logiku za prikaz poruke koja pokazuje je li igrač pobijedio ili izgubio:

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

Zatim generirajte izlaz i obrazac za prihvaćanje unosa od korisnika. Ispis i obrazac trebali bi se prikazati samo ako element s klasom "message" nije na ekranu.

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

Sada aplikaciji možete dodati odgovarajući stil. Stvoriti stil oznaku i u nju dodajte sljedeće:

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

Napravili ste igru ​​vješala sa Svelteom. Odličan posao!

Što Svelte čini nevjerojatnim?

Svelte je okvir koji je relativno lako odabrati i naučiti. Budući da je Svelteova logička sintaksa slična Vanilla JavaScriptu, to je čini savršenim izborom ako želite okvir koji može držati složene stvari poput reaktivnosti, a istovremeno vam daje priliku za rad s Vanillom JavaScript. Za složenije projekte možete koristiti SvelteKit—meta framework koji je razvijen kao Svelteov odgovor na Next.js.