Как запустить легендарного 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 вашего веб-приложения.
Анализ результатов
Весь процесс разработки и настройки занял менее часа:
- Подготовка и структурирование файлов — 10 минут.
- Настройка серверной логики — 20 минут.
- Развертывание и отладка — 25 минут.
- Конфигурация в BotFather — 2 минуты.
Финансовые затраты: 0 рублей. Мы использовали бесплатный тариф хостинга, SSL-сертификат от Let’s Encrypt и open-source код.
Заключение
Этот кейс подтверждает, что для создания качественного Telegram Mini App не всегда требуются сложные интеграции с внутренним API мессенджера. Использование проверенных временем движков позволяет в кратчайшие сроки выпускать продукты, готовые к взаимодействию с аудиторией. Исходный код проекта доступен по лицензии BSD, что открывает возможности для его дальнейшей модификации и коммерческого использования.
