“Snake” in an Email: How We Created a Game for an AMP Newsletter with Altcraft

Picture this: you open an email, and instead of just text or images, you find a classic game of Snake that you can play right there in the message. That’s exactly the kind of experiment we decided to try—to breathe new life into our emails and surprise our subscribers.

In this article, we’ll walk you through how we created an interactive AMP email with a game for Altcraft’s New Year newsletter, the challenges we encountered along the way, and the results we achieved. If you’re curious about how to add interactivity to your email campaigns and captivate your audience, read on.

The Idea

2025 is the Year of the Snake in the Eastern zodiac, so when we began brainstorming concepts for an interactive AMP email, the idea of a Snake game felt like a natural fit.

We started with the classic gameplay mechanics: the snake moves forward continuously, and the player changes its direction to avoid crashing into the walls or its own tail. The goal is simple—collect the blinking dots to grow the snake longer, one square at a time.

However, AMP emails come with certain limitations: the only way to automatically change the display is by using a carousel with autoplay. This would have added unnecessary scrolling animations, making the game less user-friendly.

As a result, we reimagined the concept and decided to tie the snake’s movement to user clicks. Now, the player’s goal is to guide the snake through a maze, find a key, and reach the exit.

You can try the game here.

The Development Process

Gameplay

When creating a game for an AMP email, it’s crucial to consider how users will play on different devices: on a computer, they’ll use a mouse, while on a smartphone, they’ll rely on touch controls. These two scenarios are quite different and come with their own constraints. For example, on mobile devices, buttons need to be large enough to tap easily with a finger, but they also shouldn’t take up too much space, so the game field can fit on the screen as well.

After several experiments, we settled on a 10x10 grid. It turned out to be ideal: compact enough to prevent the game from becoming tedious due to an overly large maze, yet spacious enough to keep everything clearly visible even on a small phone screen.

The next step was designing the game map. We added dead ends, loops, and decorative elements to make the map feel more dynamic and engaging.

The character controlled by the user is the snake. It consists of several cells and changes its position based on the direction of movement. The head and tail don’t “bend” as the snake moves. Because of this, we decided that the snake’s minimum length should be 4 cells.

The controls are implemented using buttons: each click moves the snake one cell in the chosen direction. We also added a hint for users: “Control the snake using these buttons.”

Technical Details

To enable the snake to move across the entire game area, we used relative coordinates — from the left and from the top. These coordinates are defined using CSS classes, which determine the snake's position on the grid. For rendering, we created ten classes for horizontal and vertical offsets. The snake's position is set as follows:

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

When the player presses a control button, the snake's head turns in the chosen direction. Since the snake consists of four segments, each segment must shift to the position of the previous one. This is implemented through state updates:

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>

Note that we have two directions — direction1 and direction2. These are necessary to correctly bend the snake's body during turns.

Another important aspect is ensuring the snake stays within the game area. Since it only moves forward, it is sufficient to check the coordinates of its head (playerState). The left and top coordinates must not exceed 10 to keep the snake within the game boundaries.

To validate the coordinates, we use an array that lists all permitted points on the map:

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 },
    ...
]

To check if the snake is within the allowed area, we use the filter method:

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

If the result is zero, it means the snake has moved outside the game area.

Results

The experiment with an interactive AMP email that included a game yielded excellent results, confirming that this approach works effectively.

Engagement and Metrics: We observed that users actively interacted with the game. Nearly 30% of those who opened the email reached the end of the game—a great metric for interactive content. Users not only opened the email but also spent more time engaging with it than they typically would.

Mobile Audience: The majority of users played the game on mobile devices, and the on-screen controls proved to be user-friendly and convenient.

Technical Outcomes: The email displayed correctly in AMP-compatible email clients, and for those without AMP support, a fallback HTML version was seamlessly provided.

Conclusion

The experiment demonstrated that emails with interactive elements are a genuine way to captivate an audience. Users eagerly engaged with the game, especially when it offered something unique, like playing Snake directly within the email. The AMP format proved to be an ideal choice for implementing this idea.

People are willing to interact with content if it is interesting and user-friendly. However, for everything to run smoothly, every detail must be considered—from compatibility with email clients to providing fallback solutions for those without AMP support.