# 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. Открой [страницу настройки](http://ku6epxboctuk.is-a.dev/shooting-word-html/)
2. Введи имя.twitch канала
3. Нажми **СКОПИРОВАТЬ ССЫЛКУ**
4. В OBS: Sources → Browser → вставь ссылку
5. Рекомендуемая высота — не менее 800px

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

```txt
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](https://github.com/tmijs/tmi.js) для подключения к Twitch IRC
- Один HTML-файл + CSS + JS модули
- Хостится на GitHub Pages

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

```txt
├── 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](https://github.com/Ku6epXBOCTuK/shooting-word-html/issues) — баги и идеи
- [Twitch](https://www.twitch.tv/ku6ep_xboctuk) — смотри игру в действии

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

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