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

Установка

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

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

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

http://ku6epxboctuk.is-a.dev/shooting-word-html/game.html?channel=ИМЯ_КАНАЛА

Параметры URL

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

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

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

Технологии

• Vanilla JavaScript (ES6+), без фреймворков и сборщиков
• Canvas 2D для рендеринга
• TMI.js для подключения к Twitch IRC
• Один HTML-файл + CSS + JS модули
• Хостится на GitHub Pages

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

├── index.html          # Страница настройки (выбор канала)
├── game.html           # Игровой экран
├── style.css           # Стили ( cyberpunk-тема: чёрный фон, зелёный неон)
├── js/
│   ├── config.js       # Конфигурация и словарь слов
│   ├── game.js         # Основной игровой цикл
│   ├── enemy.js        # Класс врага (обычный / тяжёлый / босс)
│   ├── projectile.js   # Снаряды
│   ├── particle.js     # Система частиц
│   ├── input.js        # Обработка ввода (чат + локальный)
│   ├── intro.js        # Заставка
│   ├── utils.js        # Утилиты
│   ├── main.js         # Точка входа
│   └── tmi.min.js      # Twitch Messaging Interface
├── img/
│   └── sprite.svg      # Иконки (GitHub, Twitch)
└── LICENSE             # MIT

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

Отредактируй js/config.js:

WordGenerator.simpleWords - простые враги из одного слова

WordGenerator.heavyWords - бронированные враги - два слова

Лицензия

MIT

Связь

• GitHub Issues — баги и идеи
• Twitch — смотри игру в действии

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

Этот репозиторий не будет активно развиваться. В дальнейшем функционал станет частью проекта multi-widget. Пока что ожидается перенос на sveltekit + miniplex ecs и возможно pixi.js\konva