ГлавнаяБлогКак создать игру, в которую играют люди и ИИ: WebMCP и Tower Before Dusk
Алгоритмы

Как создать игру, в которую играют люди и ИИ: WebMCP и Tower Before Dusk

Узнайте, как интегрировать WebMCP в браузерную игру, чтобы AI и люди решали одни и те же головоломки. Практический пример с кодом на TypeScript.

Al
Редакция Algolitalgolit.ru
8 мин чтения18 июня 2026 г.

Как создать игру, в которую играют люди и ИИ: WebMCP и Tower Before Dusk

Представьте: вы разрабатываете головоломку, и вдруг понимаете, что её можно сделать доступной не только для людей, но и для языковых моделей. В этом материале я покажу, как с помощью WebMCP превратить обычную браузерную игру в арену, где человек и AI соревнуются на равных. Вы увидите конкретные инструменты, код и уроки, которые я вынес из разработки Tower Before Dusk — игры с солнцестоянием, где каждый ход приближает закат.

Что такое Tower Before Dusk

Tower Before Dusk — это плиточная головоломка, в которой нужно добраться до башни до заката. Каждое действие тратит время, реки преграждают путь, скалы заставляют искать обход. Чтобы перейти воду, нужно собрать дерево и построить мосты. Цель — не просто решить головоломку, а сделать это оптимально. Игра написана на TypeScript с использованием HTML Canvas и Vite.

Почему WebMCP?

WebMCP — это протокол, позволяющий AI взаимодействовать с веб-приложениями через инструменты. Вместо того чтобы давать модели доступ к DOM или эмулировать клики, я создал два чётких инструмента: getGameState и submitPlan. AI получает полную карту, правила и бюджет ходов, а затем возвращает последовательность действий. Игровой цикл проигрывает этот план с задержкой, создавая иллюзию реального времени.

Инструмент getGameState

Возвращает состояние уровня: цель, легенду карты, правила, доступные действия, оставшиеся ходы и видимую карту. Пример ответа:

{
  "objective": "Reach G before sunset using as few moves as possible. Do not collect unnecessary wood.",
  "legend": {
    "P": "player start position",
    ".": "land / walkable tile",
    "W": "wood / walkable tile, can be collected",
    "~": "water / blocked unless player has enough wood",
    "R": "rock / blocked tile",
    "B": "bridge / walkable tile created after entering water",
    "G": "goal / walkable tile"
  },
  "rules": { ... },
  "actions": ["MOVE_UP", "MOVE_DOWN", "MOVE_LEFT", "MOVE_RIGHT"],
  "remainingMoves": 30,
  "wood": 0,
  "visibleMap": [
    "P . W W W W ~ ~ G"
  ]
}

Инструмент submitPlan

Принимает массив действий от AI и воспроизводит их в игровом цикле. Пример вызова:

{
  "actions": ["MOVE_RIGHT", "MOVE_RIGHT", "MOVE_UP"],
  "summary": "План: собрать дерево, построить мост, дойти до башни."
}

Архитектура интеграции

Вместо того чтобы позволить AI играть пошагово (что сожгло бы много токенов), я решил: AI получает полное состояние и возвращает полный план. Игровой цикл проигрывает этот план с задержкой 500 мс между ходами. Так выглядит, будто AI думает и играет в реальном времени.

Ключевой момент: человеческие игроки тоже вводят действия с клавиатуры, которые изменяют состояние игры. Таким образом, и AI, и люди используют один и тот же интерфейс — разница только в источнике команд.

Проблемы и неожиданные открытия

Самое сложное оказалось не в интеграции WebMCP, а в дизайне уровней. Даже простой первый уровень оказался нелёгким для тестируемых моделей: Gemini 3 Flash Preview, Gemini 3.1 Flash-Lite и Gemini 3.5 Flash. Все три правильно вызывали инструменты, но ни одна не смогла сгенерировать валидное решение для первого уровня. Пришлось снижать сложность.

Это заставило задуматься: головоломки, которые кажутся нам лёгкими, часто опираются на интуицию и паттерны рассуждения, неочевидные для языковых моделей.

Практический вывод

Хотите попробовать сами? Используйте этот промпт:

You are playing Tower Before Dusk.

First call getGameState. Study the objective, legend, rules, remainingMoves, wood, and visibleMap.

Create one complete plan to reach G before sunset. Use only the listed actions. Account for move costs, automatic bridge building, wood collection, rocks, water, and remainingMoves.

Then call submitPlan exactly once with the full action list. Do not submit partial plans.

Создайте свою версию: возьмите любую пошаговую игру, определите два инструмента — получение состояния и отправку плана — и позвольте AI соревноваться с игроками. Это не только увлекательно, но и открывает новые горизонты для тестирования и геймдизайна.

#WebMCP#игры с AI#TypeScript#головоломки#интеграция AI
Al
Редакция Algolit

Пишем про алгоритмы, подготовку к собеседованиям и карьеру в IT — так, чтобы было понятно и полезно.

Хочешь закрепить знания на практике?

Решай задачи на Algolit — интерактивная платформа для обучения

Начать бесплатно →