Kaip sukurti pakaruoklio žaidimą su Svelte

Svelte yra radikaliai nauja JavaScript sistema, kuri užkariauja kūrėjų širdis. Dėl paprastos sintaksės jis yra puikus kandidatas pradedantiesiems, norintiems pasinerti į „JavaScript“ sistemų pasaulį. Vienas geriausių mokymosi būdų yra kurti, todėl šiame vadove sužinosite, kaip naudotis „Svelte“ siūlomomis funkcijomis kuriant paprastą pakaruoklio žaidimą.

Kaip veikia Hangmanas

Hangman yra žodžių atspėjimo žaidimas, paprastai žaidžiamas tarp dviejų žmonių, kai vienas žaidėjas galvoja apie žodį, o kitas žaidėjas bando atspėti tą žodį raidė po raidės. Spėliojančio žaidėjo tikslas yra išsiaiškinti slaptą žodį, kol jam pritrūks neteisingų spėjimų.

Kai žaidimas prasideda, šeimininkas pasirenka slaptą žodį. Žodžio ilgis paprastai nurodomas kitam žaidėjui (spėliotojui) naudojant brūkšnelius. Spėliotojui neteisingai spėjant, nubrėžiamos papildomos pakaruoklio dalys, einančios nuo galvos, kūno, rankų ir kojų.

Spėliotojas laimi žaidimą, jei jam pavyksta atspėti visas žodžio raides dar nepasibaigus lazdelės figūrėlės piešimui. Hangman yra puikus būdas patikrinti žodyną, samprotavimus ir išskaičiavimo įgūdžius.

Plėtros aplinkos nustatymas

Norint, kad „Svelte“ būtų sukurtas ir paleistas jūsų kompiuteryje, patartina projektą sujungti su Vite.js. Norėdami naudoti Vite, įsitikinkite, kad turite Mazgo paketų tvarkyklė (NPM) ir Jūsų kompiuteryje įdiegtas Node.js. Taip pat galite naudoti alternatyvų paketų tvarkyklę, pvz., „Yarn“. Dabar atidarykite terminalą ir paleiskite šią komandą:

npm create vite

Tai pradės naują projektą su Vite Komandinės eilutės sąsaja (CLI). Pavadinkite savo projektą, pasirinkite Svelte kaip karkasą ir nustatykite variantą į JavaScript. Dabar cd į projekto katalogą ir paleiskite šią komandą, kad įdiegtumėte priklausomybes:

npm install

Dabar atidarykite projektą ir į src aplanką, sukurkite a hangmanArt.js failą ir ištrinkite turto ir lib aplanką. Tada išvalykite turinį App.svelte ir App.css failus. Viduje App.css failą, pridėkite šiuos dalykus;

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

Nukopijuokite turinį pakaruoklisArt.js failą iš šio projekto GitHub saugykla, tada įklijuokite jį į savo hangmanArt.js failą. Kūrimo serverį galite paleisti naudodami šią komandą:

npm run dev

Programos logikos apibrėžimas

Atidaryk App.svelte failą ir sukurkite a scenarijus žyma, kurioje bus dauguma programos logikos. Sukurti žodžius masyvas, skirtas laikyti žodžių sąrašą.

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

Tada importuokite pakaruoklisArt masyvas iš hangmanArt.js failą. Tada sukurkite kintamąjį vartotojo įvestis, kintamasis atsitiktinis skaičius, ir kitas kintamasis, skirtas laikyti atsitiktinai pasirinktą žodį iš žodžius masyvas.

Priskirkite pasirinktasWord į kitą kintamąjį pradinė. Be kitų kintamųjų, sukurkite šiuos kintamuosius: rungtynės, žinutę, pakaruoklisStages, ir išvestis. Išvesties kintamąjį inicijuokite su brūkšnelių eilute, atsižvelgiant į ilgį pasirinktasWord. Priskirkite pakaruoklisArt masyvas į pakaruoklisStages kintamasis.

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;

Būtinų funkcijų pridėjimas

Kai žaidėjas spėja, norite žaidėjui parodyti išvestį. Ši išvestis padės žaidėjui žinoti, ar jis spėjo teisingai, ar neteisingai. Sukurkite funkciją generuoti išvestį atlikti produkcijos generavimo užduotį.

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

Už kiekvieną žaidėjo pateiktą spėjimą programa turės nustatyti, ar tai teisinga. Sukurti an įvertinti funkcija, kuri perkels pakaruoklio piešinį į kitą etapą, jei žaidėjas atspėtų neteisingai, arba paskambins generuoti išvestį funkcija, jei žaidėjas teisingai spėja.

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

Ir tuo jūs užbaigėte programos logiką. Dabar galite pereiti prie žymėjimo nustatymo.

Projekto žymėjimo apibrėžimas

Sukurti pagrindinis elementas, kuriame bus visi kiti žaidimo elementai. Viduje pagrindinis elementą, apibrėžkite an h1 elementas su tekstu Pakaruoklis.

<h1class="title">
 Hangman
h1>

Pirmajame etape sukurkite žymos eilutę ir pakaruoklio figūrą pateikite tik tuo atveju, jei elementų skaičius pakaruoklisStages masyvas yra didesnis nei 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}

Vėliau įgyvendinkite logiką, kad būtų rodomas pranešimas, nurodantis, ar žaidėjas laimėjo, ar pralaimėjo:

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

Tada pateikite išvestį ir formą, kad priimtumėte vartotojo įvestį. Išvestis ir forma turėtų būti rodomos tik tuo atveju, jei elemento su klase "pranešimas" nėra ekrane.

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

Dabar prie programos galite pridėti atitinkamą stilių. Sukurti stilius žymą ir joje pridėkite:

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

Su Svelte sukūrėte pakaruoklio žaidimą. Puikus darbas!

Kas daro Svelte nuostabią?

Svelte yra sistema, kurią gana lengva pasiimti ir išmokti. Kadangi Svelte loginė sintaksė yra panaši į Vanilla JavaScript, tai yra puikus pasirinkimas, jei norite sistemą, kuri gali turėti sudėtingų dalykų, pvz., reaktyvumo, ir suteikia galimybę dirbti su Vanilla JavaScript. Sudėtingesniems projektams galite naudoti SvelteKit – metasistemą, kuri buvo sukurta kaip Svelte atsakymas į Next.js.