Узнайте, как интегрировать WebMCP в браузерную игру, чтобы AI и люди решали одни и те же головоломки. Практический пример с кодом на TypeScript.
Представьте: вы разрабатываете головоломку, и вдруг понимаете, что её можно сделать доступной не только для людей, но и для языковых моделей. В этом материале я покажу, как с помощью WebMCP превратить обычную браузерную игру в арену, где человек и AI соревнуются на равных. Вы увидите конкретные инструменты, код и уроки, которые я вынес из разработки Tower Before Dusk — игры с солнцестоянием, где каждый ход приближает закат.
Tower Before Dusk — это плиточная головоломка, в которой нужно добраться до башни до заката. Каждое действие тратит время, реки преграждают путь, скалы заставляют искать обход. Чтобы перейти воду, нужно собрать дерево и построить мосты. Цель — не просто решить головоломку, а сделать это оптимально. Игра написана на TypeScript с использованием HTML Canvas и Vite.
WebMCP — это протокол, позволяющий AI взаимодействовать с веб-приложениями через инструменты. Вместо того чтобы давать модели доступ к DOM или эмулировать клики, я создал два чётких инструмента: getGameState и submitPlan. AI получает полную карту, правила и бюджет ходов, а затем возвращает последовательность действий. Игровой цикл проигрывает этот план с задержкой, создавая иллюзию реального времени.
Возвращает состояние уровня: цель, легенду карты, правила, доступные действия, оставшиеся ходы и видимую карту. Пример ответа:
{
"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"
]
}Принимает массив действий от 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 соревноваться с игроками. Это не только увлекательно, но и открывает новые горизонты для тестирования и геймдизайна.
Хочешь закрепить знания на практике?
Решай задачи на Algolit — интерактивная платформа для обучения
Начать бесплатно →