«Змейка» в письме: как мы с Altcraft создали игру для AMP-рассылки

Представьте: вы открываете емейл, а там не просто текст или картинки, а классическая «Змейка», в которую можно поиграть прямо в письме. Именно такой эксперимент мы решили провести, чтобы оживить рассылку и удивить подписчиков.

В этой статье мы расскажем, как создавали интерактивное AMP-письмо с игрой для новогодней рассылки Altcraft, с какими проблемами столкнулись и какие результаты получили. Если вам интересно, как добавить интерактивности в рассылки и увлечь аудиторию, — читайте дальше.

Как придумывали

2025 год — год Змеи по восточному календарю, и когда мы начали обсуждать концепт для интерактивного AMP-письма, идея игры «Змейка» возникла сама собой.

Изначально мы думали о классической механике: змейка движется вперёд, а игрок меняет её направление, чтобы избежать столкновений с границами поля или собственным телом. Цель — «съесть» мигающую точку, после чего длина змейки увеличивается на один квадратик.

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

Поэтому мы переосмыслили концепцию и решили связать передвижение змейки с кликами пользователя. Теперь задача игрока — провести змейку через лабиринт, найти ключ и добраться до выхода.

С творческим процессом создания статьи можно ознакомиться в статье Altcraft.

А поиграть в «Змейку» можно здесь.

Как разрабатывали

Геймплей

При создании игры для AMP-письма важно учитывать, как пользователи будут играть на разных устройствах: на компьютере — с помощью мыши, а на смартфоне — с использованием сенсорного управления. Эти два сценария сильно отличаются друг от друга и накладывают свои ограничения. Например, на мобильном устройстве кнопки должны быть достаточно крупными, чтобы по ним было удобно попадать пальцем, но при этом они не должны занимать слишком много места, чтобы игровое поле тоже уместилось на экране.

После нескольких экспериментов мы остановились на сетке 10х10. Она оказалась идеальной: компактной, чтобы игра не надоедала из-за слишком большого поля с лабиринтом, но при этом достаточно крупной, чтобы всё оставалось хорошо видимым даже на маленьком экране телефона.

Следующим шагом стала разработка игровой карты. Мы добавили тупики, петли и расставили декоративные объекты, чтобы карта выглядела более живой и интересной.

Персонаж, которым управляет пользователь, — змейка. Она состоит из нескольких клеток и меняет своё положение в зависимости от направления движения. Голова и хвост при движении никак не «гнутся». Поэтому мы решили, что минимальная длина змейки должна составлять 4 клетки.

Управление реализовано через кнопки: каждое нажатие продвигает змейку на одну клетку в выбранном направлении. Рядом добавили подсказку для пользователей: «Управляй змейкой, используя эти кнопки».

Технические тонкости

Чтобы змейка могла перемещаться по всей игровой зоне, мы использовали условные координаты — слева и сверху. Эти координаты задаются через CSS-классы, которые определяют положение змейки на сетке. Для отображения мы создали по десять классов для смещения по горизонтали и вертикали. Положение змейки задаётся так:

1
<div [class]=”'translate-left-' + playerState.left + ' translate-top-' + playerState.top + ' head_snake_' + playerState.direction_1”></div>

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

1
2
3
4
5
6
<button class="button_up" on="tap:AMP.setState({
    playerState3: {direction_1:playerState2.direction_1, direction_2:playerState2.direction_2 ,left: playerState2.left, top: playerState2.top},
    playerState2: {direction_1:playerState1.direction_1, direction_2:playerState1.direction_2 ,left: playerState1.left, top: playerState1.top},
    playerState1: {direction_1:playerState.direction_1, direction_2:playerState.direction_2 ,left: playerState.left, top: playerState.top},
    playerState: { direction_2:playerState.direction_1, direction_1: 'up', left: playerState.left, top: playerState.top - 1 }
})"></button>

Обратите внимание, что у нас есть два направления — direction1 и direction2. Они нужны, чтобы правильно изгибать тело змейки при поворотах.

Ещё один важный момент — контролировать, чтобы змейка оставалась внутри игровой области. Поскольку она движется только вперёд, достаточно проверять координаты её головы (playerState). Координаты left и top не должны превышать 10, чтобы змейка оставалась в пределах игрового поля.

Для проверки допустимых координат мы используем массив coordinates, в котором перечислены все разрешённые точки на карте:

1
2
3
4
5
6
7
8
9
10
11
coordinates: [
    { left: 0, top: 6 },
    { left: 1, top: 0 },
    { left: 1, top: 1 },
    { left: 1, top: 2 },
    { left: 1, top: 3 },
    { left: 1, top: 5 },
    { left: 1, top: 6 },
    { left: 1, top: 8 },
    ...
]

Чтобы проверить, находится ли змейка в допустимой зоне, мы используем метод filter:

1
coordinates.filter(c => c.left == playerState.left && c.top == playerState.top).length

Если результат равен нулю, значит, змейка вышла за пределы игровой области.

Сложности

Известно, что почтовый клиент Mail.ru не поддерживает состояния, заданные по умолчанию через <amp-state>. Например, если мы задаём начальное состояние следующим образом:

1
2
3
4
5
6
7
<amp-state id="myDefinedState">
    <script type="application/json">
    {
        "foo": "bar"
    }
    </script>
</amp-state>

Mail.ru просто игнорирует это. Чтобы обойти данное ограничение, мы использовали небольшой хак: состояние задаётся только после действия пользователя. Например, при нажатии на кнопку:

1
<button on="tap:AMP.setState({ myDefinedState: { foo: 'bar' } })">Старт</button>

Этот подход отлично работает как в Mail.ru, так и в Gmail. Однако мы столкнулись с новой проблемой: в Mail.ru существует ограничение на длину выражения — не более 100. Наши выражения, необходимые для работы игры, превышали этот лимит, что вызывало ошибку:

amp-bind: Expression eval failed. Expression size (194) exceeds max (100). Please reduce number of operands.

Чтобы решить эту проблему, мы использовали <amp-state> для проверки, где открыта игра, и предложили пользователям Mail.ru перейти на веб-версию. Также мы сообщили о проблеме в поддержку Mail.ru, чтобы они могли рассмотреть возможность увеличения лимита.

Таким образом, несмотря на технические сложности, мы нашли рабочие решения, чтобы игра оставалась доступной для всех пользователей.

Какие результаты получили

Эксперимент с интерактивным AMP-письмом, включающим игру, дал отличные результаты, подтвердив, что такой подход работает.

• Вовлечённость и метрики. Мы увидели, что пользователи активно взаимодействовали с игрой. Почти 30% тех, кто открыл письмо, дошли до завершения игры — это отличный показатель для интерактивного контента. Люди не только открывали письмо, но и проводили с ним больше времени, чем обычно.
• Мобильная аудитория. Большинство пользователей играли с мобильных устройств, и управление с помощью экранных кнопок оказалось удобным.
• Технические итоги. Письмо корректно отображалось в AMP-совместимых почтовых клиентах, а для тех, где поддержка AMP отсутствовала, срабатывал резервный HTML-вариант.

Заключение

Эксперимент показал, что электронные письма с интерактивными элементами — это реальный способ зацепить аудиторию. Пользователи с удовольствием включаются в игру, особенно если это что-то необычное, вроде «Змейки» прямо в письме. Формат AMP идеально подошёл для реализации такой идеи.

Главный вывод: люди охотно взаимодействуют с контентом, если он интересный и удобный. Но чтобы всё прошло успешно, необходимо учитывать каждую деталь — от совместимости с почтовыми клиентами до резервных решений для тех, кто не поддерживает AMP.

Кстати, если вы хотите прокачать навыки в email-маркетинге, загляните в наш Telegram-канал. Там делимся полезными материалами, лайфхаками и идеями для работы.