113 lines
6.4 KiB
Markdown
113 lines
6.4 KiB
Markdown
# 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
|