Як створити гру «Шибениця» за допомогою Svelte

Автор

Svelte: Інноваційний Фреймворк для Розробки Інтерактивних Веб-Додатків

Svelte – це радикально новий фреймворк JavaScript, який стрімко набирає популярність серед розробників. Завдяки своєму простому і зрозумілому синтаксису, він є чудовим варіантом для початківців, які бажають глибше зануритися у світ JavaScript-фреймворків. Одним з найкращих методів навчання є практика, тому в цьому посібнику ми розглянемо, як використовувати можливості Svelte для створення простої гри “Шибениця”.

Принцип Роботи Гри “Шибениця”

“Шибениця” – це гра в слова, де один гравець загадує слово, а інший намагається його відгадати, називаючи літери. Мета гравця, що відгадує, – вгадати секретне слово до того, як у нього закінчаться спроби.

На початку гри, гравець, що загадує, вибирає таємне слово. Довжина слова зазвичай показується іншому гравцеві (відгадувачу) за допомогою дефісів. Коли відгадувач робить помилкові припущення, поступово малюється фігура шибениці, починаючи з голови і закінчуючи ногами.

Відгадувач перемагає, якщо йому вдається вгадати всі літери в слові до того, як буде повністю намальована фігура на шибениці. Гра “Шибениця” – це чудовий спосіб перевірити словниковий запас, навички міркування та дедукції.

Налаштування Середовища Розробки

Вихідний код цього проєкту доступний у репозиторії 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 і створіть тег <script>, у якому буде зберігатися більша частина логіки програми. Створіть масив слів для зберігання їх списку:

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

Імпортуйте масив hangmanArt з файлу hangmanArt.js. Створіть змінні userInput, randomNumber і змінну для зберігання випадково вибраного слова з масиву. Присвойте вибране слово іншій змінній. Також створіть змінні: match, message, hangmanStages та output. Ініціалізуйте змінну 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 += "-";
    }
  }
}

Для кожного припущення програма повинна визначити, чи є воно правильним. Створіть функцію evaluate, яка буде переносити малюнок шибениці на наступний етап, якщо гравець зробив помилку, або викликати функцію 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}

Тепер додайте відповідні стилі до програми. Створіть тег <style> та додайте наступне:

  * {
    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 – це фреймворк, який відносно легко освоїти та вивчити. Завдяки тому, що його логічний синтаксис схожий на Vanilla JavaScript, він є ідеальним вибором, якщо вам потрібен фреймворк, який підтримує складні речі, наприклад, реактивність, і водночас дає вам можливість працювати з чистим JavaScript. Для складніших проєктів можна використовувати SvelteKit – метафреймворк, розроблений як відповідь Svelte на Next.js.