Files
shooting-word/README.md
T

126 lines
7.8 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 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, просто печатая в браузере
## Установка
### Сборка из исходников
```bash
pnpm install
pnpm build # typecheck + сборка в dist/
pnpm serve # локальный сервер на dist/
```
Для разработки: `pnpm dev` — esbuild watch, пересобирает dist при изменениях в src/.
### Быстрый старт
1. Открой [страницу настройки](https://xboctuk.duckdns.org/shooting-word/)
2. Введи имя twitch канала
3. Нажми **СКОПИРОВАТЬ ССЫЛКУ**
4. В OBS: Sources → Browser → вставь ссылку
5. Рекомендуемая высота — не менее 800px
### Прямая ссылка
```txt
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](https://pixijs.com/) для рендера (WebGL/WebGPU)
- [miniplex](https://github.com/hmans/miniplex) — ECS-ядро
- [TMI.js](https://github.com/tmijs/tmi.js) для подключения к Twitch IRC
- Хостится на GitHub Pages
Архитектура описана в [ecs-refactoring.md](ecs-refactoring.md): ввод отделён интерфейсом
`InputSource` (переход на Twurple и запуск через баллы канала = новый источник без правок
игры), логика отделена от рендера, сущности и системы — на miniplex.
## Структура проекта
```txt
├── 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](https://t.me/Ku6epXBOCTuK_chat) — баги и идеи
- [Twitch](https://www.twitch.tv/ku6epxboctuk) — смотри игру в действии
## Похожие проекты
Этот репозиторий не будет активно развиваться. В дальнейшем функционал станет частью проекта более крупного проекта multi-widget