Kuinka luoda Hangman-peli Svelten kanssa

Svelte on radikaalisti uusi JavaScript-kehys, joka valloittaa kehittäjien sydämet. Sen yksinkertainen syntaksi tekee siitä loistavan ehdokkaan aloittelijoille, jotka haluavat sukeltaa JavaScript-kehysten maailmaan. Yksi parhaista tavoista oppia on rakentaminen, joten tässä oppaassa opit käyttämään Svelten tarjoamia ominaisuuksia yksinkertaisen pyövelipelin luomiseen.

Kuinka Hangman toimii

Hangman on tyypillisesti kahden ihmisen välinen sanojen arvauspeli, jossa toinen pelaaja ajattelee sanaa ja toinen yrittää arvata sanan kirjain kirjaimelta. Arvaavan pelaajan tavoitteena on selvittää salainen sana ennen kuin heiltä loppuvat väärät arvaukset.

Kun peli alkaa, isäntä valitsee salaisen sanan. Sanan pituus ilmoitetaan yleensä toiselle pelaajalle (arvaajalle) väliviivojen avulla. Kun arvaaja tekee vääriä arvauksia, pyövelistä piirretään lisäosia, jotka etenevät päästä, vartalosta, käsistä ja jaloista.

Arvaaja voittaa pelin, jos hän onnistuu arvaamaan sanan kaikki kirjaimet ennen kuin tikkuhahmon piirustus on valmis. Hangman on loistava tapa testata sanastoa, päättelyä ja päättelytaitoja.

Kehitysympäristön perustaminen

Jotta Svelte saadaan toimimaan koneellasi, on suositeltavaa rakentaa projekti Vite.js: n avulla. Käytä Vitea varmistamalla, että sinulla on Node Package Manager (NPM) ja Node.js asennettuna koneellesi. Voit myös käyttää vaihtoehtoista paketinhallintaa, kuten Yarn. Avaa nyt pääte ja suorita seuraava komento:

npm create vite

Tämä aloittaa uuden projektin Viten kanssa Command Line Interface (CLI). Nimeä projektisi, valitse Hoikka kehykseksi ja aseta variantiksi JavaScript. Nyt CD projektihakemistoon ja suorita seuraava komento asentaaksesi riippuvuudet:

npm install

Avaa nyt projekti ja src kansio, luo a hangmanArt.js tiedosto ja poista omaisuutta ja lib kansio. Tyhjennä sitten tiedoston sisältö App.svelte ja App.css tiedostot. Vuonna App.css tiedosto, lisää seuraavat;

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

Kopioi tiedoston sisältö hangmanArt.js tiedosto tästä projektista GitHub-arkistoja liitä se sitten omaasi hangmanArt.js tiedosto. Voit käynnistää kehityspalvelimen seuraavalla komennolla:

npm run dev

Sovelluksen logiikan määrittäminen

Avaa App.svelte tiedosto ja luo a käsikirjoitus tunniste, joka sisältää suurimman osan sovelluksen logiikasta. Luo sanat matriisi, jossa on sanaluettelo.

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

Tuo seuraavaksi hangmanArt joukko alkaen hangmanArt.js tiedosto. Luo sitten muuttuja userInput, muuttuja satunnaisluku, ja toinen muuttuja, joka sisältää satunnaisesti valitun sanan sanat joukko.

Määritä valittuWord toiseen muuttujaan alkukirjain. Luo muiden muuttujien lisäksi seuraavat muuttujat: ottelu, viesti, hangmanStages, ja ulostulo. Alusta tulosmuuttuja viivamerkkijonolla merkin pituudesta riippuen valittuWord. Määritä hangmanArt joukkoon hangmanStages muuttuja.

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;

Tarvittavien toimintojen lisääminen

Kun pelaaja arvaa, haluat näyttää tuloksen pelaajalle. Tämä tulos auttaa pelaajaa tietämään, onko hän arvannut oikean vai väärän. Luo funktio generoi Output hoitaakseen tulosteen luomisen.

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

Jokaisesta pelaajan tekemästä arvauksesta ohjelman on määritettävä, onko se oikea arvaus. Luo an arvioida toiminto, joka siirtää pyövelipiirustuksen seuraavaan vaiheeseen, jos pelaaja arvaa väärin, tai soittaa generoi Output toiminto, jos pelaaja arvaa oikean.

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 sillä olet suorittanut sovelluksen logiikan. Voit nyt siirtyä merkinnän määrittämiseen.

Projektin merkinnän määrittäminen

Luo pää elementti, joka sisältää kaikki muut pelin elementit. Vuonna pää elementti, määritä an h1 elementti tekstin kanssa Pyöveli.

<h1class="title">
 Hangman
h1>

Luo tunnuslause ja renderöi pyövelihahmo ensimmäisessä vaiheessa vain, jos elementtien määrä on hangmanStages matriisi on suurempi kuin 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}

Tämän jälkeen toteuta logiikka näyttääksesi viestin, joka osoittaa, onko pelaaja voittanut vai hävinnyt:

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

Suorita seuraavaksi tuloste ja lomake hyväksymään käyttäjän syötteet. Tulos ja lomake tulee näyttää vain, jos elementtiä luokan "message" kanssa ei ole näytöllä.

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

Nyt voit lisätä sopivan tyylin sovellukseen. Luo tyyli -tunniste ja lisää siihen seuraava:

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

Olet luonut pyövelipelin Svelten kanssa. Hyvää työtä!

Mikä tekee Sveltestä hämmästyttävän?

Svelte on kehys, joka on suhteellisen helppo ottaa käyttöön ja oppia. Koska Svelten logiikkasyntaksi on samanlainen kuin Vanilla JavaScript, tämä tekee siitä täydellisen valinnan, jos haluat kehys, joka voi sisältää monimutkaisia ​​asioita, kuten reaktiivisuutta, ja antaa sinulle mahdollisuuden työskennellä Vanillan kanssa JavaScript. Monimutkaisemmissa projekteissa voit käyttää SvelteKit-metakehystä, joka kehitettiin Svelten vastaukseksi Next.js: ään.