shooting-word/README.md

Shooting Word

Twitch-интерактивная игра, где зрители чата стреляют по врагам, печатая слова.

Shooting Word — это browser-source виджет для стримов, превращающий Twitch-чат в аркадный шутер. Зрители пишут слова в чате, а на экране сначала появляется слово, потом снаряд, и если слово совпадает с врагом — враг уничтожается. Простая механика, высокая вовлечённость, нулевая настройка.

Как это работает

1. Стример добавляет виджет в OBS как Browser Source или открывает у себя в браузере.
2. Зрители пишут !play в чат, чтобы начать игру.
3. На экране появляются враги с подписанными словами.
4. Зрители печатают совпавшее слово — снаряд летит в цель и уничтожает врага
5. Игра идёт по волнам, сложность растёт, каждые 10 волн — босс.

Типы врагов

Тип	Описание	Очки
Обычный	Одно слово (hack, code, data, git...)	10
Тяжёлый	Два слова-слоя подряд (fire → wall, null → pointer...)	50
Босс	3 слоя по 3 слова, появляется каждые 10 волн	200

Броня отображается и пробивается только по текущему (верхнему) слою. Слова — IT/хакерская тематика: названия языков, протоколов, уязвимостей, команд терминала.

Возможности

• Волны — количество врагов и их скорость растут с каждой волной
• Боссы — multi-layer враги со слоями защиты
• Статистика — таблица лидеров по уничтоженным врагам и «Мазила» за много промахов
• Визуальные эффекты — частицы, трейлы, screen shake, glitch при уроне
• Режим single play — скрытие виджета после одной партии (для автоматизации через Streamer.bot)
• Локальный ввод — можно тестировать без Twitch, просто печатая в браузере

Установка

Сборка из исходников

pnpm install
pnpm build     # typecheck + сборка в dist/
pnpm serve     # локальный сервер на dist/

Для разработки: pnpm dev — esbuild watch, пересобирает dist при изменениях в src/.

Быстрый старт

1. Открой страницу настройки
2. Введи имя twitch канала
3. Нажми СКОПИРОВАТЬ ССЫЛКУ
4. В OBS: Sources → Browser → вставь ссылку
5. Рекомендуемая высота — не менее 800px

Прямая ссылка

https://xboctuk.duckdns.org/shooting-word/game.html?channel=ИМЯ_КАНАЛА

Параметры URL

Параметр	Описание
channel	Имя канала Twitch (без @)
singlePlay=1	После game over виджет скрывается (для автоматизации)

Автоматизация с Streamer.bot

Включи «Отключать источник, когда он не виден» в настройках Browser Source в OBS. Через Streamer.bot скрывай/показывай источник по расписанию или триггерам — игра будет запускаться заново при каждом появлении. Триггер можно настроить на команду или награду за баллы канала. Полноценной автоматизации без перехода на twitch auth невозможна

Технологии

• TypeScript (strict), сборка esbuild
• PixiJS v8 для рендера (WebGL/WebGPU)
• miniplex — ECS-ядро
• TMI.js для подключения к Twitch IRC
• Хостится на GitHub Pages

Архитектура описана в ecs-refactoring.md: ввод отделён интерфейсом InputSource (переход на Twurple и запуск через баллы канала = новый источник без правок игры), логика отделена от рендера, сущности и системы — на miniplex.

Структура проекта

├── index.html            # Страница настройки (выбор канала)
├── game.html             # Игровой экран
├── style.css             # Стили (cyberpunk-тема: чёрный фон, зелёный неон)
├── build.js              # esbuild-сборка двух бандлов + копирование статики в dist/
├── src/
│   ├── entries/          # Точки входа: game.ts (игра), index.ts (настройки)
│   ├── app/              # GameApp — сборка приложения, фазы, такт
│   ├── config/           # gameConfig.ts (константы), words.ts (словарь слов)
│   ├── core/             # Шина событий, игровой цикл, метрики, измеритель текста
│   ├── ecs/              # Компоненты, мир miniplex, спавн-функции
│   ├── systems/          # Системы: волны, fuse, наведение, интеграция, побег, lifetime
│   ├── game/             # Simulation (урон/оркестрация), GameStore, события, статистика
│   ├── input/            # InputSource-интерфейс, роутер, источники: tmi.js + клавиатура
│   ├── render/           # Pixi: сетка, частицы, враги, снаряды, баннер, интро
│   └── ui/               # DOM: HUD, экраны, статистика, фидбек ввода, скейлинг
├── img/
│   └── sprite.svg        # Иконки (GitHub, Twitch)
└── LICENSE               # MIT

Добавление своих слов

Отредактируй src/config/words.ts:

• SIMPLE_WORDS — простые враги из одного слова
• HEAVY_WORDS — бронированные враги: пары слов, каждое слово — отдельный слой брони

Лицензия

MIT

Связь

• Обратная связь - telegram chat — баги и идеи
• Twitch — смотри игру в действии

Похожие проекты

Этот репозиторий не будет активно развиваться. В дальнейшем функционал станет частью проекта более крупного проекта multi-widget