Разберете основите на Svelte, като създадете проста игра Hangman.

Svelte е радикално нова JavaScript рамка, която печели сърцата на разработчиците. Неговият прост синтаксис го прави чудесен кандидат за начинаещи, които искат да се потопят в света на JavaScript рамките. Един от най-добрите начини за учене е чрез изграждане, така че в това ръководство ще научите как да използвате функциите, предлагани от Svelte, за да създадете проста игра на палач.

Как работи палачът

Hangman е игра за отгатване на думи, която обикновено се играе между двама души, при която единият играч се сеща за дума, а другият се опитва да отгатне тази дума буква по буква. Целта на познатия играч е да разбере тайната дума, преди да му свършат неправилните предположения.

Когато играта започне, домакинът избира тайна дума. Дължината на думата обикновено се посочва на другия играч (отгатващия) с помощта на тирета. Тъй като гадаещият прави неправилни предположения, се рисуват допълнителни части на палач, които се развиват от главата, тялото, ръцете и краката.

instagram viewer

Познаващият печели играта, ако успее да отгатне всички букви в думата, преди рисуването на фигурата на стикман да приключи. Hangman е чудесен начин за тестване на речников запас, умения за разсъждение и дедукция.

Настройване на средата за разработка

Кодът, използван в този проект, е наличен в a GitHub хранилище и е безплатен за използване под лиценза на MIT. Ако искате да разгледате версия на живо на този проект, можете да проверите това демо.

За да накарате Svelte да работи на вашата машина, препоръчително е да създадете скеле на проекта с Vite.js. За да използвате Vite, уверете се, че имате Мениджър на пакети на възли (NPM) и Node.js инсталиран на вашата машина. Можете също да използвате алтернативен мениджър на пакети като Yarn. Сега отворете вашия терминал и изпълнете следната команда:

npm create vite

Това ще започне нов проект с Vite Интерфейс на командния ред (CLI). Дайте име на вашия проект, изберете Изящен като рамка и задайте варианта на JavaScript. Сега cd в директорията на проекта и изпълнете следната команда, за да инсталирате зависимостите:

npm install

Сега отворете проекта и в src папка, създайте a hangmanArt.js файл и изтрийте активи и либ папка. След това изчистете съдържанието на App.svelte и App.css файлове. В App.css файл, добавете следното;

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

Копирайте съдържанието на палачАрт.js файл от този проект GitHub хранилищеи след това го поставете във вашия собствен hangmanArt.js файл. Можете да стартирате сървъра за разработка със следната команда:

npm run dev

Определяне на логиката на приложението

Отвори App.svelte файл и създайте a сценарий таг, който ще съдържа по-голямата част от логиката на приложението. Създавам думи масив за съхранение на списък с думи.

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

След това импортирайте палачАрт масив от hangmanArt.js файл. След това създайте променлива userInput, променлива произволноЧисло, и друга променлива за задържане на произволно избрана дума от думи масив.

Присвояване на избрана Дума към друга променлива начален. В допълнение към другите променливи, създайте следните променливи: съвпада, съобщение, палачЕтапи, и изход. Инициализирайте изходната променлива с низ от тирета, в зависимост от дължината на избрана Дума. Присвояване на палачАрт масив към палачЕтапи променлива.

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;

Добавяне на необходимите функции

Докато играчът прави предположения, вие искате да покажете резултата на играча. Този резултат ще помогне на играча да разбере дали е направил правилно или грешно предположение. Създайте функция генериране на изход да се справи със задачата за генериране на изход.

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

За всяко предположение, което играчът изпрати, програмата ще трябва да определи дали това е правилното предположение. Създайте оценявам функция, която ще премести рисунката на палач на следващия етап, ако играчът познае грешно, или извикайте генериране на изход функция, ако играчът направи правилно предположение.

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

И с това завършихте логиката на приложението. Сега можете да преминете към дефиниране на маркирането.

Дефиниране на маркирането на проекта

Създавам основен елемент, който ще приюти всеки друг елемент в играта. В основен елемент, дефинирайте an h1 елемент с текста палач.

<h1class="title">
 Hangman
h1>

Създайте слоган и изобразете фигурата на палач на първия етап само ако броят на елементите в палачЕтапи масивът е по-голям от 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}

След това приложете логиката, за да покажете съобщение, показващо дали играчът е спечелил или загубил:

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

След това изобразете изхода и формуляр за приемане на вход от потребителя. Изходът и формулярът трябва да се показват само ако елементът с класа "message" не е на екрана.

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

Сега можете да добавите подходящия стил към приложението. Създавам стил таг и в него добавете следното:

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

Създадохте игра на палач със Svelte. Добра работа!

Какво прави Svelte удивителен?

Svelte е рамка, която е относително лесна за взимане и научаване. Тъй като логическият синтаксис на Svelte е подобен на Vanilla JavaScript, това го прави идеалният избор, ако искате рамка, която може да съдържа сложни неща като реактивност, като същевременно ви дава възможност да работите с Vanilla JavaScript. За по-сложни проекти можете да използвате SvelteKit — мета рамка, разработена като отговор на Svelte на Next.js.