Как перенести игру Chrome Dino в Telegram Mini App

22 Фев в 20:24 Прокомментировать Просмотры: 54

Приветственный экран бота с кнопкой запуска Mini App

Как запустить легендарного Dino из Chrome в Telegram за 60 минут: пошаговое руководство

Пока большинство пользователей просто проводят время в мессенджерах, разработчики видят в них безграничное поле для экспериментов. Telegram превратился из обычного средства связи в мощную платформу для запуска приложений. Сегодня я продемонстрирую, как деконструировать классику и вдохнуть в неё новую жизнь, создав полноценный Mini App на базе оригинального движка T-Rex Runner из Chromium.

В этом материале мы разберем:

Процесс адаптации исходного кода Chrome Dino под экосистему Telegram.
Нюансы работы с BotFather и настройки интерфейса.
Развертывание проекта на бесплатной инфраструктуре.
Экономику проекта: временные и финансовые затраты.

Концепция и задачи

Основная цель — создать бесшовный игровой опыт прямо внутри мессенджера. Мы отказались от упрощенных клонов в пользу оригинального движка Chromium (лицензия BSD), чтобы сохранить ту самую физику и динамику, к которой привыкли миллионы пользователей. Весь стек технологий подбирался с учетом доступности: Node.js, Express и бесплатный хостинг с поддержкой HTTPS.

Технологический стек

Ядро: Оригинальные dino.js и dino.css (Copyright The Chromium Authors).
Графика: HTML5 Canvas для отрисовки спрайтов.
Backend: Node.js в связке с Express.
Telegram API: Библиотека Telegraf для взаимодействия с ботом.
Инфраструктура: GitHub для хранения кода и BotHost для деплоя.

Этап 1. Архитектура проекта

Для корректной работы приложения необходимо соблюдать четкую структуру директорий:

Dino-Chrome-Game/
 ├── public/                 # Статические файлы игры
 │   ├── images/             # Графические ассеты (1x и 2x для Retina)
 │   ├── sounds/             # Аудиоэффекты (прыжок, столкновение, рекорд)
 │   ├── dino.css            # Стили интерфейса
 │   ├── dino.js             # Логика оригинального движка
 │   └── index.html          # Точка входа Mini App
 ├── app.js                  # Серверная логика и конфигурация бота
 ├── package.json            # Описание зависимостей
 └── .env                    # Конфиденциальные данные (API-ключи)

Этап 2. Создание интерфейса (index.html)

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>T-Rex Runner</title>
  <link rel="stylesheet" href="dino.css">
  <script src="dino.js"></script>
</head>
<body id="t" class="offline">
  <div id="main-frame-error" class="interstitial-wrapper">
    <div id="main-content">
      <div class="icon icon-offline"></div>
    </div>
  </div>
  <div id="offline-resources">
    <img id="offline-resources-1x" src="data:image/png;base64,...">
    <img id="offline-resources-2x" src="data:image/png;base64,...">
  </div>
</body>
</html>

Этап 3. Логика движка и стилизация

В файле dino.js сосредоточено более 800 строк кода, отвечающих за физику прыжков, генерацию препятствий (кактусов и птеродактилей) и смену дня и ночи. Мы сохранили все оригинальные классы: Runner, Trex, Horizon и DistanceMeter. Благодаря этому игра ощущается идентично браузерной версии.

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

Этап 4. Backend-часть и интеграция бота

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

const express = require('express');
const { Telegraf } = require('telegraf');
require('dotenv').config();
const path = require('path');
const app = express();
const bot = new Telegraf(process.env.BOT_TOKEN);
app.use(express.static('public'));
bot.start(async (ctx) => {
await ctx.replyWithPhoto(
{ url: 'https://example.com/welcome-image.jpg' },
{
caption: '🦖 Добро пожаловать в Dino Chrome!\n\nЛегендарный забег теперь доступен прямо в Telegram.',
parse_mode: 'Markdown',
reply_markup: {
inline_keyboard: [
[{ text: '🎮 Играть', web_app: { url: 'https://your-dino-app.bothost.ru' } }]
]
}
}
);
});
bot.launch();
app.listen(process.env.PORT || 3000);

Этап 5. Деплой и запуск

GitHub: Загрузите ваш код в репозиторий.
BotHost: Используйте специализированный хостинг для ботов. Авторизуйтесь через Telegram, укажите ссылку на ваш репозиторий и ветку main.
BotFather: Настройте кнопку меню командой /setmenubutton, указав URL вашего веб-приложения.

Геймплей в Telegram — Оригинальный геймплей Chrome Dino внутри интерфейса Telegram

Анализ результатов

Весь процесс разработки и настройки занял менее часа:

Подготовка и структурирование файлов — 10 минут.
Настройка серверной логики — 20 минут.
Развертывание и отладка — 25 минут.
Конфигурация в BotFather — 2 минуты.

Финансовые затраты: 0 рублей. Мы использовали бесплатный тариф хостинга, SSL-сертификат от Let’s Encrypt и open-source код.

Заключение

Этот кейс подтверждает, что для создания качественного Telegram Mini App не всегда требуются сложные интеграции с внутренним API мессенджера. Использование проверенных временем движков позволяет в кратчайшие сроки выпускать продукты, готовые к взаимодействию с аудиторией. Исходный код проекта доступен по лицензии BSD, что открывает возможности для его дальнейшей модификации и коммерческого использования.