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

Ключевые варианты поиска

• Создать виселицу на Svelte
• Svelte урок по проекту
• Виселица JavaScript
• Vite + Svelte стартовый проект
• Реактивность в Svelte

Зачем выбирать Svelte

Svelte компилирует компоненты в минимальный JavaScript. Это уменьшает объём рантайма и упрощает логику. Если вы знакомы с ванильным JavaScript, Svelte быстро освоите. Для крупных проектов используйте SvelteKit.

Важно: Svelte не заменяет архитектуру приложения. Он упрощает шаблоны и реактивность, но архитектурные решения остаются за вами.

Как работает игра «Виселица»

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

Игровая логика в нашем примере:

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

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

Репозиторий с примером доступен с лицензией MIT. Есть также демо версии.

Рекомендуемый стек для разработки: Node.js + npm (или Yarn) и Vite для шаблона Svelte.

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

npm create vite  

Во время создания проекта укажите имя, выберите фреймворк 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 из репозитория проекта в созданный файл. После этого запустите сервер разработки:

npm run dev  

Совет: используйте короткие имена и понятную структуру папок. Это упростит масштабирование.

Определение логики приложения

Откройте App.svelte и в теге