Kuidas luua Svelte'iga timukamängu

Svelte on radikaalselt uus JavaScripti raamistik, mis võidab arendajate südameid. Selle lihtne süntaks muudab selle suurepäraseks kandidaadiks algajatele, kes soovivad sukelduda JavaScripti raamistike maailma. Üks parimaid õppimisviise on ehitamine, nii et sellest juhendist saate teada, kuidas kasutada Svelte pakutavaid funktsioone lihtsa timukamängu loomiseks.

Kuidas Hangman töötab

Hangman on sõnade äraarvamise mäng, mida tavaliselt mängitakse kahe inimese vahel, kus üks mängija mõtleb sõna ja teine ​​mängija püüab seda sõna täht-tähe haaval ära arvata. Arvava mängija eesmärk on mõistatada salasõna enne, kui tal valedest arvamistest otsa saavad.

Kui mäng algab, valib peremees salasõna. Sõna pikkus näidatakse tavaliselt teisele mängijale (arvajale) sidekriipsudega. Kuna arvaja teeb valesid oletusi, joonistatakse timukale täiendavaid osi, mis edenevad peast, kehast, kätest ja jalgadest.

Arvaja võidab mängu, kui ta suudab ära arvata kõik sõnas olevad tähed enne, kui pulgamehe kujundi joonistamine on valmis. Hangman on suurepärane viis sõnavara, arutlusvõime ja deduktsioonioskuste testimiseks.

Arenduskeskkonna loomine

Svelte'i oma masinas käivitamiseks on soovitatav projekt Vite.js-iga karkassi panna. Vite kasutamiseks veenduge, et teil on Sõlme paketihaldur (NPM) ja Teie arvutisse installitud Node.js. Võite kasutada ka alternatiivset paketihaldurit, näiteks Yarn. Nüüd avage oma terminal ja käivitage järgmine käsk:

npm create vite

See alustab Vitega uut projekti Käsurea liides (CLI). Nimetage oma projekt, valige Svelte raamistikuks ja määrake variandiks JavaScript. Nüüd cd projekti kataloogi ja käivitage sõltuvuste installimiseks järgmine käsk:

npm install

Nüüd avage projekt ja avage src kaust, loo a hangmanArt.js faili ja kustutage varasid ja lib kausta. Seejärel tühjendage sisu App.svelte ja App.css failid. Aastal App.css faili, lisage järgmine;

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

Kopeerige faili sisu timukas Art.js faili sellest projektist GitHubi hoidlaja seejärel kleepige see enda omasse hangmanArt.js faili. Arendusserveri saate käivitada järgmise käsuga:

npm run dev

Rakenduse loogika määratlemine

Ava App.svelte faili ja loo a stsenaarium silt, mis mahutab suurema osa rakenduse loogikast. Loo sõnad massiiv sõnade loendi hoidmiseks.

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

Järgmisena importige timukas Art massiiv alates hangmanArt.js faili. Seejärel looge muutuja kasutaja sisend, muutuja juhuslik arv, ja veel üks muutuja, mis sisaldab loendist juhuslikult valitud sõna sõnad massiivi.

Määrake valitudWord teisele muutujale esialgne. Lisaks muudele muutujatele looge järgmised muutujad: vaste, sõnum, timukas Lavad, ja väljund. Lähtestage väljundmuutuja kriipsude jadaga, olenevalt selle pikkusest valitudWord. Määrake timukas Art massiivi juurde timukasLavad muutuv.

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;

Vajalike funktsioonide lisamine

Kui mängija arvab, soovite mängijale näidata väljundit. See väljund aitab mängijal teada, kas ta on teinud õige või vale arvamise. Looge funktsioon genereerida Väljund väljundi genereerimise ülesandega toimetulemiseks.

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

Iga mängija esitatud oletuse puhul peab programm kindlaks tegema, kas see on õige oletus. Loo an hinnata funktsioon, mis viib timuka joonise järgmisse etappi, kui mängija arvab valesti, või helistab genereerida Väljund funktsioon, kui mängija teeb õige oletuse.

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

Ja sellega olete rakenduse loogika lõpetanud. Nüüd saate liikuda märgistuse määratlemise juurde.

Projekti märgistuse määratlemine

Loo peamine element, mis sisaldab kõiki teisi mängu elemente. Aastal peamine element, määratlege an h1 element koos tekstiga Hangman.

<h1class="title">
 Hangman
h1>

Looge tunnuslause ja renderdage timuka kuju esimeses etapis ainult siis, kui elementide arv on timukasLavad massiiv on suurem kui 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}

Seejärel rakendage loogikat, et kuvada teade, mis näitab, kas mängija on võitnud või kaotanud:

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

Järgmisena renderdage kasutaja sisendi vastuvõtmiseks väljund ja vorm. Väljundit ja vormi tuleks kuvada ainult siis, kui elementi klassiga "sõnum" pole ekraanil.

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

Nüüd saate rakendusele lisada sobiva stiili. Loo stiilis silt ja lisage sellele järgmine:

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

Olete Sveltega loonud timukamängu. Suurepärane töö!

Mis teeb Svelte'i hämmastavaks?

Svelte on raamistik, mida on suhteliselt lihtne kätte saada ja õppida. Kuna Svelte loogika süntaks sarnaneb Vanilla JavaScriptiga, on see ideaalne valik, kui soovite raamistik, mis mahutab keerulisi asju, nagu reaktsioonivõime, andes samal ajal võimaluse töötada Vanillaga JavaScript. Keerulisemate projektide jaoks saate kasutada SvelteKiti – metaraamistikku, mis töötati välja Svelte vastusena Next.js-ile.