Kā izveidot bendes spēli ar Svelte

Svelte ir radikāli jauns JavaScript ietvars, kas iekaro izstrādātāju sirdis. Tā vienkāršā sintakse padara to par lielisku kandidātu iesācējiem, kuri vēlas ienirt JavaScript ietvaru pasaulē. Viens no labākajiem veidiem, kā mācīties, ir konstruēšana, tāpēc šajā rokasgrāmatā jūs uzzināsit, kā izmantot Svelte piedāvātās funkcijas, lai izveidotu vienkāršu bendes spēli.

Kā darbojas Hangman

Hangman ir vārdu minēšanas spēle, ko parasti spēlē divi cilvēki, kur viens spēlētājs izdomā vārdu, bet otrs mēģina uzminēt šo vārdu burtu pa burtam. Minētā spēlētāja mērķis ir izdomāt slepeno vārdu, pirms viņam beigušies nepareizi minējumi.

Kad spēle sākas, saimnieks izvēlas slepeno vārdu. Vārda garums parasti tiek norādīts otram spēlētājam (uzminētājam), izmantojot domuzīmes. Tā kā minētājs izdara nepareizus minējumus, tiek uzzīmētas papildu bendes daļas, kas virzās no galvas, ķermeņa, rokām un kājām.

Uzminētājs uzvar spēli, ja viņam izdodas uzminēt visus vārda burtus, pirms nūjiņcilvēka figūras zīmējums ir pabeigts. Hangman ir lielisks veids, kā pārbaudīt vārdu krājumu, argumentāciju un dedukcijas prasmes.

Attīstības vides izveide

Lai Svelte sāktu darboties savā datorā, ieteicams projektu izveidot ar Vite.js. Lai izmantotu Vite, pārliecinieties, ka jums ir Mezglu pakotņu pārvaldnieks (NPM) un Node.js ir instalēts jūsu datorā. Varat arī izmantot alternatīvu pakotņu pārvaldnieku, piemēram, Yarn. Tagad atveriet savu termināli un palaidiet šādu komandu:

npm create vite

Tas sāks jaunu projektu ar Vite Komandrindas interfeiss (CLI). Nosauciet savu projektu, atlasiet Svelte kā ietvaru un iestatiet variantu uz JavaScript. Tagad cd projekta direktorijā un palaidiet šo komandu, lai instalētu atkarības:

npm install

Tagad atveriet projektu un sadaļā src mapi, izveidojiet a hangmanArt.js failu un izdzēsiet aktīviem un lib mapi. Pēc tam notīriet tās saturu App.svelte un App.css failus. Iekš App.css failu, pievienojiet sekojošo;

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

Kopējiet saturu bendeArt.js failu no šī projekta GitHub repozitorijs, un pēc tam ielīmējiet to savā hangmanArt.js failu. Izstrādes serveri var palaist ar šādu komandu:

npm run dev

Lietojumprogrammas loģikas noteikšana

Atveriet App.svelte failu un izveidot a skripts tagu, kas satur lielāko daļu lietojumprogrammas loģikas. Izveidot a vārdus masīvs, lai saglabātu vārdu sarakstu.

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

Pēc tam importējiet bendeArt masīvs no hangmanArt.js failu. Pēc tam izveidojiet mainīgo lietotāja ievade, mainīgais randomNumber, un vēl viens mainīgais, kas satur nejauši atlasītu vārdu no vārdus masīvs.

Piešķirt atlasītaisWord uz citu mainīgo sākotnējā. Papildus citiem mainīgajiem izveidojiet šādus mainīgos: atbilst, ziņa, bendeSkatuves, un izvade. Inicializējiet izvades mainīgo ar domuzīmju virkni atkarībā no garuma atlasītaisWord. Piešķirt bendeArt masīvs uz bendeStages mainīgs.

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;

Nepieciešamo funkciju pievienošana

Kamēr spēlētājs izdara minējumu, jūs vēlaties spēlētājam parādīt rezultātu. Šī izvade palīdzēs spēlētājam uzzināt, vai viņš ir izdarījis pareizo vai nepareizo minējumu. Izveidojiet funkciju ģenerētIzvade veikt izvades ģenerēšanas uzdevumu.

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

Par katru spēlētāja minējumu programmai būs jānosaka, vai tas ir pareizs minējums. Izveidojiet an novērtēt funkcija, kas pārvietos bendes zīmējumu uz nākamo posmu, ja spēlētājs uzminēs nepareizi, vai izsauc bendes zīmējumu ģenerētIzvade funkcija, ja spēlētājs izdara pareizu minējumu.

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

Un līdz ar to jūs esat pabeidzis lietojumprogrammas loģiku. Tagad varat pāriet uz marķējuma definēšanu.

Projekta marķējuma noteikšana

Izveidot a galvenais elements, kurā būs visi pārējie spēles elementi. Iekš galvenais elementu, definējiet an h1 elements ar tekstu Hangman.

<h1class="title">
 Hangman
h1>

Izveidojiet saukli un atveidojiet bendes figūru pirmajā posmā tikai tad, ja elementu skaits bendeStages masīvs ir lielāks par 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}

Pēc tam ieviesiet loģiku, lai parādītu ziņojumu, kas norāda, vai spēlētājs ir uzvarējis vai zaudējis:

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

Pēc tam renderējiet izvadi un veidlapu, lai pieņemtu lietotāja ievadi. Izvade un forma ir jāparāda tikai tad, ja ekrānā nav redzams elements ar klasi "ziņojums".

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

Tagad lietojumprogrammai varat pievienot atbilstošu stilu. Izveidot a stils tagu un pievienojiet tam:

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

Ar Svelti esat izveidojis bendes spēli. Lielisks darbs!

Kas padara Svelte pārsteidzošu?

Svelte ir ietvars, ko ir samērā viegli uzņemt un apgūt. Tā kā Svelte loģiskā sintakse ir līdzīga Vanilla JavaScript, tas padara to par perfektu izvēli, ja vēlaties sistēma, kas var saturēt sarežģītas lietas, piemēram, reaktivitāti, vienlaikus sniedzot iespēju strādāt ar Vanilla JavaScript. Sarežģītākiem projektiem varat izmantot SvelteKit — meta ietvaru, kas tika izstrādāts kā Svelte atbilde uz Next.js.