Чтобы создать многопользовательскую браузерную игру с помощью ИИ, опишите правила, число игроков, как устроены раунды и подсчёт очков и какой нужен внешний вид. WisyLink соберёт игру как веб-страницу с живыми комнатами, списком игроков онлайн и счётом в реальном времени, сохранит рекорды в таблицу лидеров и выдаст ссылку, по которой игроки заходят из любого браузера.
- По описанию можно собрать самые разные браузерные игры: аркады и головоломки, пошаговые настольные игры, живые викторины и 3D-сцены.
- Мультиплеер добавляет комнаты, список «кто здесь» и общее живое состояние игры, а вместе с ними и то, что придётся тестировать. Выбирайте его, только если люди действительно играют вместе.
- Пусть ответы проверяет и очки начисляет сервер. Браузеры игроков отправляют ходы, а не счёт.
- Используйте свою графику, музыку и 3D-модели (до 25 МБ на файл) или попросите векторную графику, нарисованную кодом. ИИ-генерации изображений и музыки здесь нет.
- Игроки заходят по ссылке или QR-коду с любого телефона или ноутбука и ничего не устанавливают. Перед мероприятием проведите репетицию в полном составе в той же сети Wi-Fi.
Какие игры можно создать в браузере
Больше, чем многие думают: современный браузер тянет плавную 2D-анимацию, аркады и 3D-графику в реальном времени через WebGL — и на телефонах, и на ноутбуках. Может ли ИИ сделать игру, если вы не пишете код? Да: в ИИ-конструкторе приложений вы описываете правила и ощущения от игры, а конструктор пишет игру, размещает её и даёт вам ссылку. На вас остаются геймдизайн и тестирование. (Если эта категория сервисов для вас новая, начните со статьи о том, что такое ИИ-конструктор приложений.)
Масштаб хорошо видно по примерам запросов, которые предлагает сам WisyLink: неоновый арканоид с бонусами и уровнями, тест скорости печати с подсчётом слов в минуту в реальном времени, игра «найди пару» с переворотом карточек в 3D и интерактивная 3D-галактика из частиц. В таблице — популярные типы игр и то, что нужно прописать для каждого:
| Тип игры | Одиночная или мультиплеер | Что описать | Пример строки для запроса |
|---|---|---|---|
| Живая викторина или квиз-шоу | Мультиплеер: экран ведущего и телефоны игроков | Раунды, таймер, подсчёт очков, откуда берутся вопросы | «Игроки входят по коду комнаты и никнейму; 20 секунд на вопрос; за быстрый правильный ответ — больше очков». |
| Аркада (арканоид, раннер) | Одиночная с общей таблицей рекордов | Управление с клавиатуры и касанием, уровни, жизни, сложность | «Неоновый арканоид с бонусами, тремя жизнями и таблицей лучших 20 результатов». |
| Головоломка или «найди пару» | Одиночная или дуэль на двоих | Размер поля, таймер, счётчик ходов, экран победы | «Игра „найди пару“ с полями 4×4 и 6×6, счётчиком ходов и таймером». |
| Тест скорости печати или реакции | Одиночная, результатом можно поделиться | Что измеряется, лимит времени, карточка результата | «Тест печати: скорость и точность в реальном времени и карточка результата, которой можно поделиться». |
| Пошаговая настольная или словесная игра | От двух до четырёх игроков в комнате | Порядок ходов, условия победы, реванш, что происходит, если кто-то вышел | «Двое игроков заходят по одной ссылке на комнату; показывайте, чей сейчас ход, и предлагайте реванш». |
| Рисуй и угадывай | Мультиплеер в комнате | Кто рисует, список слов, как начисляются очки за догадки | «Один игрок рисует, остальные видят штрихи в реальном времени и вводят догадки». |
| 3D-сцена или исследование мира | Обычно одиночная | Камера, управление, ваши модели, скорость работы на телефонах | «Полёт сквозь 3D-галактику; плавно, а на телефонах — облегчённая версия». |
Одиночная игра или мультиплеер в реальном времени
Одиночная игра работает в браузере каждого игрока, а сервер хранит только то, что должно сохраниться, например счёт. В мультиплеере в реальном времени несколько браузеров делят одно живое состояние игры: когда один игрок отвечает, ходит или рисует, остальные видят это почти мгновенно.
Мультиплеер оправдан, когда весь интерес в общении: класс наперегонки отвечает на вопросы, двое друзей играют в настольную игру из разных комнат, зал голосует на большом экране. Зато его дольше тестировать: нужно проверить вход, выход, переподключение, задержки и честность. Многие игры с духом соревнования прекрасно работают как одиночные с общей таблицей рекордов: каждый играет сам, когда ему удобно, а потом все сравнивают результаты. Такую игру проще собрать, и никому не приходится ждать, пока наберётся комната.
Полезное правило: если игрокам нужно видеть ходы друг друга в тот момент, когда они происходят, делайте мультиплеер. Если достаточно видеть результаты друг друга, делайте одиночную игру с таблицей рекордов.
Собираем игру: шаблон запроса для живой викторины
Живая викторина — классическая многопользовательская браузерная игра для уроков, корпоративов и мероприятий: экран ведущего выводится на проектор, а игроки отвечают с телефонов. Вот как её собрать:
- Определите формат. Нужен ли экран ведущего или игра обходится без него? Сколько вопросов, сколько времени на каждый, как начисляются очки. Решите это до запроса: менять подсчёт очков после того, как люди уже сыграли, неудобно.
- Подготовьте вопросы в виде файла. Таблицу, сохранённую в CSV, со столбцами для вопроса, четырёх вариантов и правильного ответа легко проверить, а потом заменить. Прикрепите её к сообщению.
- Отправьте описание. Адаптируйте шаблон ниже. Wisy может сначала задать один короткий вопрос, а затем запускает сборку.
- Сыграйте на двух-трёх устройствах. Зайдите с телефона и с ноутбука, ответьте правильно и неправильно, выйдите и вернитесь, попробуйте подключиться посреди игры.
- Исправляйте, описывая то, что увидели. «Когда я переподключился, мой счёт обнулился; сохраняйте очки вернувшимся игрокам». Каждое исправление — новая сборка.
- Проведите репетицию в полном составе. Перед настоящей игрой сыграйте один раунд с тем числом участников, которое ожидаете, и в той сети, которой они будут пользоваться.
Само описание; то, что нужно заменить, — в квадратных скобках:
Сделайте живую викторину для [урока физики в 9 «Б»]. Два режима: экран ведущего для проектора и экран игрока для телефонов. Ведущий запускает игру, и на его экране появляются код комнаты из 4 букв, ссылка для входа и QR-код к ней. Игроки входят только с никнеймом, без аккаунтов. Ведущий видит, кто подключился, и может удалить игрока. Вопросы возьмите из прикреплённого CSV (вопрос, четыре варианта, правильный вариант). Каждый вопрос показывается [20] секунд; игроки нажимают один из четырёх цветных ответов. Ответы проверяет сервер и начисляет [1000 очков за правильный ответ, минус до 500 за медленный]. После каждого вопроса показывайте правильный ответ и пятёрку лидеров на экране ведущего, а на телефоне каждого игрока — его место. После последнего вопроса покажите пьедестал и сохраните итоговые очки в общую таблицу рекордов на отдельной странице. Игроки могут подключаться между вопросами, а игрок, у которого телефон переподключился, сохраняет свои очки. Яркое контрастное оформление, которое читается с последней парты.
Если квиз должен собирать email-адреса или подбирать товар, а не проводить живые раунды, он устроен иначе — см. статью о том, как сделать квиз-лендинг с ИИ. Другие формулировки для описаний можно взять из готовых шаблонов промптов.
Комнаты, присутствие и живой счёт
Технически многопользовательская игра в WisyLink работает на живых каналах — обычно по одному на комнату. Три понятия покрывают почти всё, что нужно описать:
- Комнаты
- Код комнаты отделяет один класс или один стол от другого. Попросите короткий код, который легко набрать, а также ссылку и QR-код, которые подставляют его автоматически.
- Присутствие
- Список «кто онлайн». Игроки появляются в нём, когда входят, и исчезают, когда выходят или теряют связь, так что ведущий понимает, когда начинать. Никнейм каждый вводит какой хочет, поэтому для класса попросите кнопку, которой ведущий может удалить игрока.
- Живое состояние
- Текущий вопрос, оставшееся время, полученные ответы, счёт. Экраны игроков обновляются почти сразу после каждого изменения.
Два решения отличают игру, которая выдержит настоящий урок, от игры, которая работает только на демо:
- Пусть счёт ведёт сервер. Живые каналы открыты всем игрокам комнаты, поэтому любопытный школьник с инструментами разработчика в браузере может отправить поддельные сообщения. Если каждый ответ проверяет и очки начисляет сервер, максимум, что сможет сделать жулик, — ответить, а это и так разрешено. Попросите отклонять ответы после окончания таймера.
- Сохраняйте то, что важно. Живые сообщения мимолётны: они не хранятся и не воспроизводятся повторно. Попросите сохранять состояние игры и счёт при каждом изменении, чтобы игрок, который обновил страницу или переключился с Wi-Fi на мобильный интернет, вернулся туда, где был, а экран ведущего мог восстановиться после обрыва связи.
Можно ли играть с телефона? Да, и на большинстве уроков и мероприятий так и будет. Подойдёт любой современный мобильный браузер — без приложения и без аккаунта, если вы сами не попросите аккаунты. Одна оговорка: живые подключения и запросы к страницам ограничены по частоте для каждого подключения и каждого сетевого адреса. Когда тридцать телефонов сидят в одной школьной или клубной сети Wi-Fi, они могут выглядеть как один адрес — именно поэтому так важна репетиция в полном составе.
Сохранение рекордов и таблицы лидеров
Таблица лидеров — это просто сохранённые данные: одна запись на результат, лучшие сверху. Сайты WisyLink хранят записи в собственном хранилище данных, и одновременные финиши не перезаписывают друг друга. Решите в запросе следующее:
- Какие таблицы. За всё время, за неделю или за конкретное мероприятие. Недельная таблица мотивирует новичков, общая вознаграждает постоянных игроков.
- Кто попадает в таблицу. Никнеймы — это быстро, но назваться «Сашей» может кто угодно. Если постоянные игроки должны закреплять результаты за собой, попросите регистрацию и вход: сайт ведёт собственные аккаунты, а для подтверждения email нужен ваш почтовый аккаунт (SMTP) в разделе «Интеграции».
- Только правдоподобные результаты. В одиночных играх счёт считается в браузере игрока, поэтому попросите сервер отклонять невозможные результаты (идеальное прохождение за две секунды) и принимать от одного игрока не больше нескольких результатов в минуту.
- Мгновенно или почти. Страница таблицы лидеров обновляется для посетителей примерно через минуту после нового результата. Если большой экран должен меняться мгновенно, попросите обновлять таблицу вживую через канал игры.
Графика и звук: ваши файлы или векторная графика в коде
WisyLink не генерирует изображения, музыку и видео с помощью ИИ. Внешний вид игры появляется одним из трёх способов:
- Векторная графика, нарисованная кодом. Фигуры, иконки, светящиеся частицы и неоновые эффекты рисует сам код игры, и они остаются чёткими на экране любого размера. Это идеально для арканоидов, карточек «найди пару» и экранов викторин.
- Ваши файлы. Загрузите спрайты, спрайт-листы, фоны, шрифты, музыку и звуковые эффекты в MP3 или 3D-модели в форматах .glb, .gltf и .fbx. Каждый файл — до 25 МБ. Используйте только материалы, на которые у вас есть права: собственные работы или наборы с лицензией на повторное использование.
- Стоковые фото. Подходят для фона или картинки к вопросу, но не для персонажей.
Со звуком связано одно браузерное правило, которое стоит знать: браузеры обычно блокируют аудио, пока игрок не коснётся страницы или не кликнет по ней (см. руководство MDN по автовоспроизведению, на английском). Попросите стартовый экран «Нажмите, чтобы начать», который включает звук, и кнопку отключения звука: многие будут играть в классе или в офисе.
Как поделиться: ссылка, QR-код, карточка для соцсетей
Каждая игра живёт по собственному адресу https://<id>.wisylink.com или на вашем домене — на любом тарифе. Три способа собрать игроков:
- Ссылка. Вставьте её в чат класса, письмо участникам или описание стрима. Проводите мероприятие? Поставьте ссылку на игру на его страницу; о регистрации участников рассказывает статья о том, как создать страницу регистрации на мероприятие с ИИ.
- QR-код. Для зала попросите выводить QR-код на экран ведущего, а для плакатов и слайдов сделайте его из ссылки в любом генераторе QR-кодов. Печатайте код только после того, как определитесь с окончательным адресом: перенос игры на ваш домен меняет адрес.
- Карточка для соцсетей. При первой сборке каждый сайт получает собственное изображение для превью и фавикон, поэтому ссылка красиво отображается в мессенджерах. Дайте игре понятное название и описание в запросе: они тоже попадают в превью.
Для планирования важен срок жизни ссылки. На бесплатном тарифе Community ссылка работает 30 дней, затем ещё неделю остаётся помеченной на удаление — этого хватит для разовой вечеринки или мероприятия. Игре, которую вы будете запускать каждую четверть, место на платном тарифе: там ссылки работают, пока действует подписка. Подробнее — на странице тарифов и цен.
Чего не ждать от браузерных игр
Если знать границы заранее, не придётся терять полдня:
- Это не игры для App Store или Google Play. Результат — веб-страница. Игроки могут добавить её на главный экран из браузера, но страницы в магазине приложений и встроенных покупок не будет.
- Это не огромные онлайн-миры. Игра рассчитана на класс, команду или зал на мероприятии, а не на тысячи одновременных игроков в постоянном мире.
- Это не динамичные шутеры. Обновления приходят почти мгновенно, и для викторин, настольных игр и рисования этого с запасом. Но играм, где честность между игроками решают доли секунды, нужны выделенные игровые серверы.
- Это не сервер, который крутит весь мир. Игровой цикл работает в браузерах игроков, а сервер отвечает на запросы и хранит результаты. Фоновые задачи есть, но они запускаются с интервалом от 30 до 60 минут: для ежедневной смены головоломки это подходит, для события, привязанного к точной минуте, — нет.
3D входит в возможности: в браузере работают WebGL-сцены, которые можно исследовать, просмотр 3D-объектов в духе витрины товара и полёты по космосу. Более широкий взгляд на то, как сгенерированный результат становится пространством, по которому можно перемещаться, — в статье «От промпта к миру».
Опишите игру и получите ссылку для игры
Выберите одну игру из таблицы, запишите её правила в пяти строках и отправьте Wisy. Вы получите размещённую ссылку на игру, которую сразу можно проверить на своём телефоне, а затем будете доводить её раунд за раундом в том же чате. Начните бесплатно на тарифе Community, без привязки карты; когда игра станет постоянной частью ваших уроков или мероприятий, переведите её на платный тариф, чтобы ссылка продолжала работать.
ЧАВО