Изучите основы Svelte, создав простую игру Hangman.

Svelte — это радикально новый фреймворк JavaScript, завоевавший сердца разработчиков. Его простой синтаксис делает его отличным кандидатом для новичков, которые хотят погрузиться в мир фреймворков JavaScript. Один из лучших способов обучения — это сборка, поэтому в этом руководстве вы узнаете, как использовать функции, предлагаемые Svelte, для создания простой игры с палачом.

Как работает Палач

Палач — это игра на угадывание слов, в которую обычно играют два человека, в которой один игрок загадывает слово, а другой пытается угадать это слово по буквам. Цель отгадывающего игрока — угадать секретное слово до того, как у него закончатся неправильные предположения.

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

Угадывающий выиграет игру, если ему удастся угадать все буквы в слове до того, как рисунок фигурки человечка будет завершен. Hangman — отличный способ проверить словарный запас, навыки рассуждения и дедукции.

instagram viewer

Настройка среды разработки

Код, используемый в этом проекте, доступен в Репозиторий GitHub и вы можете бесплатно использовать его по лицензии MIT. Если вы хотите взглянуть на живую версию этого проекта, вы можете проверить это демо.

Чтобы запустить Svelte на вашем компьютере, рекомендуется создать проект с помощью Vite.js. Чтобы использовать Vite, убедитесь, что у вас есть Менеджер пакетов узлов (NPM) и Node.js установлен на вашем компьютере. Вы также можете использовать альтернативный менеджер пакетов, например Yarn. Теперь откройте терминал и выполните следующую команду:

npm create vite

Это положит начало новому проекту с Vite. Интерфейс командной строки (CLI). Назовите свой проект, выберите стройный в качестве основы и установите вариант на JavaScript. Сейчас CD в каталог проекта и выполните следующую команду, чтобы установить зависимости:

npm install

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

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

Далее импортируйте ПалачИскусство массив из HangmanArt.js файл. Затем создайте переменную пользовательский ввод, Переменная случайное числои еще одну переменную для хранения случайно выбранного слова из слова множество.

Назначьте выбранноеСлово в другую переменную исходный. В дополнение к другим переменным создайте следующие переменные: соответствовать, сообщение, палачЭтапы, и выход. Инициализируйте выходную переменную строкой тире, в зависимости от длины выбранноеСлово. Назначьте ПалачИскусство массив в ПалачЭтапы переменная.

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

На этом вы завершили логику приложения. Теперь вы можете перейти к определению разметки.

Определение разметки проекта

Создать основной элемент, в котором будут размещаться все остальные элементы игры. в основной элемент, определить ч1 элемент с текстом Палач.

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

Затем визуализируйте вывод и форму для приема ввода от пользователя. Вывод и форма должны отображаться только в том случае, если элемент с классом «сообщение» отсутствует на экране.

{#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 аналогичен ванильному JavaScript, это делает его идеальным выбором, если вам нужен фреймворк, который может поддерживать сложные вещи, такие как реактивность, и в то же время дает вам возможность работать с Vanilla. JavaScript. Для более сложных проектов вы можете использовать SvelteKit — метафреймворк, разработанный как ответ Svelte на Next.js.