Гид по технологиям

Создаём игру «Виселица» на Svelte

• 5 min read • Frontend • Обновлено 31 Dec 2025
Виселица на Svelte — полное руководство
Виселица на Svelte — полное руководство

Логотип Svelte на фоне ноутбука MacBook

Краткое описание (что вы получите)

  • Минимальный проект Svelte с логикой игры «Виселица».
  • Обработка ввода пользователя, проверка букв, отрисовка этапов виселицы.
  • Стили и простая улучшенная структура для обучения и расширения.

Что такое «Виселица»

Виселица — это простая словесная игра: один игрок задумывает слово, другой пытается угадать его по буквам. За каждую ошибку домальовывается новая часть человечка. Цель — открыть все буквы до того, как рисунок будет завершён.

Важно: в этом руководстве мы реализуем одиночную версию игры в браузере с набором слов и текстовым вводом.

Подготовка окружения

  1. Установите Node.js и npm (или Yarn).
  2. Создайте проект Vite с шаблоном Svelte.

В терминале выполните:

npm create vite
# Затем выберите Svelte и вариант JavaScript
cd 
npm install
npm run dev

Откройте проект в редакторе. В папке src создайте файл hangmanArt.js. Удалите (по желанию) директории assets и lib и очистите App.svelte и App.css, чтобы начать с нуля.

В App.css добавьте базовую тему:

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

Скопируйте массив hangmanArt из репозитория проекта и вставьте в src/hangmanArt.js.

Логика приложения — скрипт в App.svelte

Откройте App.svelte и создайте тег