Как создать игру Hangman с помощью Svelte
Svelte — это совершенно новый фреймворк JavaScript, завоевавший сердца программистов. Вы можете использовать Svelte, чтобы очень просто создать увлекательную игру «Виселица».
Простой синтаксис Svelte делает его отличным кандидатом для новичков, погружающихся в мир JavaScript-фреймворков. Один из лучших способов изучить Svelte — создать простое приложение или игру, например Hangman.
Что такое игра «Виселица»?
Палач — это игра в угадывание слов, в которую обычно играют 2 человека. В нем один игрок называет секретное слово, другому нужно угадать каждую букву в этом слове. Цель отгадывающего — найти секретное слово до того, как закончатся все неправильные предположения.
Когда игра начинается, ведущий игры выбирает секретное слово. Длина слова часто выражается количеством тире. Если человек неправильно угадает букву, нарисуйте часть палача от головы, туловища, рук до ног.
Отгадывающий выигрывает, если правильно угадает все буквы секретного слова до завершения процесса рисования крупье. Hangman — отличный способ проверить словарный запас, мышление и навыки рассуждения.
Настройка среды разработки
Чтобы запустить Svelte на вашем компьютере, вам следует собрать проект с помощью Vite.js. Чтобы использовать Vite, убедитесь, что на вашем компьютере установлены Node Package Manager (NPM) и Node.js. Вы также можете использовать альтернативный менеджер пакетов, например Yarn. Теперь откройте терминал и выполните следующую команду:
npm создать вайт
Это действие запустит новый проект с интерфейсом командной строки (CLI) Vite. Назовите свой проект, выберите Svelte в качестве платформы и установите для переменных значение JavaScript. Теперь перейдите в каталог проекта и выполните следующую команду, чтобы установить зависимости:
npm создать вайт
Теперь откройте проект и в папке src создайте файл HangmanArt.js, удалите папки assets и lib. Затем удалите содержимое файлов App.svelte, App.css. В файл App.css добавьте:
:root{цвет фона: rgb(0, 0, 0); цвет:зеленый; семейство шрифтов: моноширинный; }
Скопируйте содержимое HangmanArt.js из репозитория GitHub этого проекта, а затем вставьте его в файл HangmanArt.js. Вы можете запустить сервер программирования с помощью следующей команды:
npm run dev
Определить логику приложения
Откройте файл App.svelte и создайте скрипт тегов, который будет содержать большую часть логики приложения. Создайте массив слов, содержащий список слов.
letwords = (“закуска”, “соседи по комнате”, “сокращение”, “свобода”, “счастье”, “развитие”, );
Затем импортируйте массив HangmanArt из файла HangmanArt.js. Затем создайте переменную userInput, переменную randomNumber и еще одну переменную для хранения случайно выбранного слова из массива слов.
Прикрепите выбранное слово к переменной, отличной от начальной. В дополнение к другим переменным создайте следующие переменные: match, message, HangmanStages и output. Инициализируйте переменную результата строкой дефисов, в зависимости от длины selectedWord . Назначьте массив HangmanArt переменной HangmanStages.
импортировать { HangmanArt } из “./hangmanArt”; пусть userInput; let randomNum = Math.floor(Math.random() * (words.length – 1)); пусть selectedWord = word(randomNum).toUpperCase(); пусть начальный = выбранноеСлово; пусть совпадет; пусть сообщение; пусть HangmanStages = HangmanArt; пусть вывод = “”; (.selectedWord).forEach(() => (вывод += “-“)); совпадение = вывод;
Добавьте необходимые функции
Когда игроки угадывают слово, вы хотите отображать результаты, показывающие, правильно или неправильно они угадали. Создайте функцию GenerateOutput для решения задачи создания выходных данных.
функцияgenerateOutput(input1, input2) {output = “”; для (пусть я = 0; я
Для каждой догадки, которую делает игрок, программа должна определить, правильная она или неправильная. Создайте функцию оценки, которая перемещает рисунок игрока на следующий этап, если игрок угадает неправильно, или вызовите функциюgenerOuput, если игрок угадает правильно.
функция Assessment() { пусть догадывается = userInput.toUpperCase().trim(); если (!угадай) {возвращение; } if (selectedWord.includes(guess)) { selectedWord = selectedWord.replaceAll(guess, “-“); генерироватьВыход(начальный, выбранноеСлово); } Еще { HangmanStages.shift(); HangmanStages = HangmanStages; } UserInput = “”; }
В результате вы завершили логику приложения. Теперь можно перейти к определению разметки.
Определить наценку проекта
Создайте главный элемент, содержащий все элементы игры. В основном элементе определите h1 с текстом Hangman.
Создайте слоган и отобразите палача на первом этапе, если количество элементов в массиве HangmanStages больше 0.
Я думаю о слове. Сможете ли вы угадать буквы в этом слове? {#if HangmanStages.length > 0} {hangmanStages(0)} {/if}
Затем реализуйте логику, которая теперь сообщает игроку, выиграл он или проиграл:
{#if HangmanStages.length === 1} Вы проиграли. {/if} {#if selectedWord === match} Вы выиграли. {/если}
Затем отобразите результаты и форму, принимающую ввод пользователя. Этот результат и форма будут отображаться только в том случае, если элемент, содержащий класс «сообщение», отсутствует на экране.
{#if !message} {#each выводится как буква} {#if Letter !== “-“} {letter} {:else} {/if} {/each} Assessment()}> Отправить {/if}
Теперь вы можете добавить соответствующие стили в свое приложение. Создайте тег стиля и добавьте в него следующий код:
* { цвет: зеленый; выравнивание текста: по центру; } Main { display: flex; ширина: 100%; гибкое направление: столбец; оправдание-содержание: центр; выровнять-элементы: по центру; } ввод, кнопка {текстовое преобразование: верхний регистр; цвет фона: прозрачный; граница: сплошная зеленая, 1,2 пикселя; высота: 40 пикселей; размер шрифта: 15 пикселей; } .box { display: flex; выровнять-элементы: по центру; оправдание-содержание: центр; ширина: 45 пикселей; высота: наследовать; граница: зеленая пунктирная, 1,2 пикселя; } .output { display: flex; размер шрифта: 23 пикселя; вес шрифта: 600; высота: 45 пикселей; разрыв: 10 пикселей; оправдание-содержание: центр; } .hangman { размер шрифта: 32px; } Форма {margin-top: 50px; } .tagline, .message { размер шрифта: 20 пикселей; }
Вы успешно создали игру Hangman с помощью Svelte.
В приведенной выше статье вы познакомились с «Как создать игру Hangman с помощью Svelte». СоветыНадейтесь, что эта статья вам поможет! Если эта статья кажется вам интересной и полезной, не забудьте поделиться ею. Спасибо!
