Svelte — радикально новий фреймворк JavaScript, який завойовує серця розробників. Його простий синтаксис робить його чудовим кандидатом для початківців, які хочуть зануритися у світ фреймворків JavaScript. Один із найкращих способів навчання — це створення, тому в цьому посібнику ви дізнаєтеся, як використовувати функції, які пропонує Svelte, щоб створити просту гру-ката.
Як працює Шибениця
«Шибениця» — це гра у відгадування слів, у яку зазвичай грають двоє, де один гравець думає про слово, а інший гравець намагається відгадати це слово буква за літерою. Мета гравця, який вгадує, — з’ясувати таємне слово, перш ніж у нього закінчаться неправильні відгадки.
Коли гра починається, ведучий вибирає секретне слово. Довжина слова зазвичай вказується іншому гравцеві (відгадувачу) за допомогою тире. Коли вгадувач робить неправильні припущення, малюються додаткові частини ката, які просуваються від голови, тіла, рук і ніг.
Відгадувач виграє гру, якщо йому вдасться вгадати всі літери в слові до завершення малювання фігурки круп’я. Hangman — чудовий спосіб перевірити словниковий запас, навички міркування та дедукції.
Налаштування середовища розробки
Код, використаний у цьому проекті, доступний у a Репозиторій GitHub і є безкоштовним для використання за ліцензією MIT. Якщо ви хочете переглянути живу версію цього проекту, ви можете перевірити ця демонстрація.
Щоб запустити Svelte на вашій машині, радимо розмістити проект за допомогою Vite.js. Щоб використовувати Vite, переконайтеся, що на вашій машині встановлено Node Package Manager (NPM) і Node.js. Ви також можете використовувати альтернативний менеджер пакунків, наприклад Yarn. Тепер відкрийте термінал і виконайте таку команду:
npm create vite
Це розпочне новий проект з інтерфейсом командного рядка Vite (CLI). Назвіть свій проект, виберіть Svelte як фреймворк і встановіть варіант JavaScript. Тепер перейдіть у каталог проекту та виконайте таку команду, щоб встановити залежності:
npm install
Тепер відкрийте проект і в папці src створіть файл hangmanArt.js і видаліть папку assets і lib. Потім очистіть вміст файлів App.svelte та App.css. У файлі App.css додайте наступне;
:root{
background-color: rgb(0, 0, 0);
color:green;
font-family: monospace;
}
Скопіюйте вміст файлу hangmanArt.js із цього проекту Репозиторій GitHub, а потім вставте його у свій власний файл hangmanArt.js. Сервер розробки можна запустити такою командою:
npm run dev
Визначення логіки програми
Відкрийте файл App.svelte і створіть тег сценарію, який буде містити більшу частину логіки програми. Створіть масив слів для зберігання списку слів.
let words = [
"appetizer",
"roommates",
"shrinking",
"freedom",
"happiness",
"development",
];
Потім імпортуйте масив hangmanArt із файлу hangmanArt.js. Потім створіть змінну userInput, змінну randomNumber та іншу змінну для зберігання випадково вибраного слова з масиву слів.
Призначте вибране Слово до іншої змінної. На додаток до інших змінних створіть такі змінні: match, message, hangmanStages і output. Ініціалізуйте вихідну змінну рядком тире залежно від довжини вибраного слова. Призначте масив hangmanArt змінній hangmanStages.
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;
Додавання необхідних функцій
Коли гравець робить припущення, ви хочете показати результат гравцеві. Цей висновок допоможе гравцеві зрозуміти, чи він зробив правильну чи неправильну припущення. Створіть функцію generateOutput для обробки завдання генерації виводу.
function generateOutput(input1, input2) {
output = "";
for (let i = 0; i < input1.length; i++) {
if (input2[i] === "-") {
output += input1[i];
} else {
output += "-";
}
}
}
Для кожного припущення, поданого гравцем, програма має визначити, чи це припущення правильне. Створіть функцію оцінки, яка перенесе малюнок ката на наступний етап, якщо гравець вгадає неправильно, або викличте функцію generateOutput, якщо гравець правильно вгадає.
function evaluate() {
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 = "";
}
І на цьому ви завершили логіку програми. Тепер можна переходити до визначення розмітки.
Визначення розмітки проекту
Створіть основний елемент, у якому будуть розташовані всі інші елементи гри. У основному елементі визначте елемент h1 із текстом «Шибениця».
<h1 class="title">
Hangman
</h1>
Створіть слоган і відобразіть фігуру ката на першому етапі, лише якщо кількість елементів у масиві hangmanStages більше 0.
<div class="tagline">
I'm thinking of a word. Could you guess the letters in that word?
</div>
{#if hangmanStages.length > 0}
<pre class="hangman">
{hangmanStages[0]}</pre>
{/if}
Після цього реалізуйте логіку, щоб показати повідомлення про те, виграв чи програв гравець:
{#if hangmanStages.length === 1}
<div class="message" bind:this={message}>You Lose...</div>
{/if}
{#if selectedWord === match}
<div class="message" bind:this={message}>You Win...</div>
{/if}
Далі візуалізуйте вихідні дані та форму для прийняття введених даних від користувача. Вивід і форма повинні відображатися, лише якщо на екрані немає елемента з класом «message».
{#if !message}
<div class="output">
{#each output as letter}
{#if letter !== "-"}
<span class="complete box">{letter}</span>
{:else}
<span class="incomplete box" />
{/if}
{/each}
</div>
<form on:submit|preventDefault={() => evaluate()}>
<input
type="text"
placeholder="Enter a letter"
maxlength="1"
bind:value={userInput}
/>
<button type="submit">Submit</button>
</form>
{/if}
Тепер ви можете додати до програми відповідний стиль. Створіть тег стилю та додайте в нього наступне:
* {
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.2px green;
height:40px;
font-size: 15px;
}
.box {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: inherit;
border: dotted 1.2px green;
}
.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.