🐍 Snake Game - Telegram Mini App

Классическая игра "Змейка" в виде мини-приложения для Telegram.

🎮 Возможности

• ✨ Классический геймплей змейки
• 📱 Адаптивный дизайн для мобильных устройств
• 🎨 Интеграция с темой Telegram
• 🎯 Система счета и сохранение рекордов
• 📲 Haptic feedback (вибрация) при игровых событиях
• 🕹️ Управление:
  • Клавиатура (стрелки) на десктопе
  • Свайпы на мобильных устройствах
  • Виртуальные кнопки на мобильных
• 🔄 Кнопка паузы
• 📤 Возможность поделиться результатом

🚀 Установка и запуск

🔗 Репозитории

• GitHub: https://github.com/ojuzok/tg_mini_app_try
• GitVerse: https://gitverse.ru/mvidy/tg_mini_app_try
• GitHub Pages: https://ojuzok.github.io/tg_mini_app_try/

Вариант 1: Локальный запуск для тестирования

1. Склонируйте или скачайте репозиторий

2. Откройте файл
   index.html
   в браузере
3. Для тестирования вне Telegram откройте Developer Tools и эмулируйте мобильное устройство

Вариант 2: Развертывание на хостинге

GitHub Pages (бесплатно)

1. Создайте репозиторий на GitHub
2. Загрузите все файлы проекта
3. Перейдите в Settings → Pages
4. Выберите ветку
   main
   и папку
   / (root)
5. Сохраните - ваше приложение будет доступно по адресу:
   https://<username>.github.io/<repository>/

Vercel (бесплатно)

1. Установите Vercel CLI:

2. Разверните проект:

3. Следуйте инструкциям в терминале

Netlify (бесплатно)

1. Перетащите папку с проектом на netlify.com/drop
2. Получите ссылку на ваше приложение

Вариант 3: Nginx/Apache сервер

Просто скопируйте все файлы в директорию вашего веб-сервера.

🤖 Интеграция с Telegram Bot

1. Создайте бота через @BotFather

2. Получите токен бота

3. Настройте Web App в боте:

   • Отправьте команду
     /newapp
     в @BotFather
   • Выберите вашего бота
   • Введите название приложения
   • Загрузите иконку (512x512px)
   • Вставьте URL вашего размещенного приложения
   • Добавьте короткое описание

4. Создайте кнопку для запуска игры:

   • Используйте команду
     /setmenubutton
     в @BotFather
   • Выберите вашего бота
   • Настройте кнопку меню

Пример кода бота (Node.js)

📝 Структура проекта

tg_mini_app_try/
├── index.html      # Основная HTML структура
├── styles.css      # Стили и адаптивный дизайн
├── game.js         # Логика игры и интеграция с Telegram
└── README.md       # Документация

🎯 Управление игрой

На десктопе:

• ⬆️ ⬇️ ⬅️ ➡️ - Стрелки для управления направлением
• Пробел
  - Пауза

На мобильных:

• 👆 Свайпы в нужном направлении
• 🎮 Виртуальные кнопки управления

🛠️ Технологии

• HTML5 Canvas для отрисовки игры
• Vanilla JavaScript (без зависимостей)
• Telegram Web App API
• LocalStorage для сохранения рекордов
• CSS Grid и Flexbox для адаптивной верстки

📱 Тестирование

В Telegram Web:

1. Откройте web.telegram.org
2. Найдите вашего бота
3. Запустите приложение

В мобильном приложении Telegram:

1. Найдите вашего бота в Telegram
2. Нажмите кнопку запуска приложения

🔧 Настройка

Изменение скорости игры:

В файле

Изменение размера поля:

В файле

Изменение цветовой схемы:

В файле

🐛 Известные проблемы и решения

Приложение не запускается в Telegram:

• Убедитесь, что ваш сайт доступен по HTTPS
• Проверьте CORS настройки сервера
• Убедитесь, что URL правильно указан в BotFather

Не работают свайпы:

• Убедитесь, что
  touch-action: none
  установлен в CSS
• Проверьте, что события touch не блокируются другими элементами

📄 Лицензия

MIT License - используйте свободно для своих проектов!

🔄 Работа с репозиториями

Проект синхронизируется с двумя репозиториями:

• GitHub (основной, для GitHub Pages)
• GitVerse (резервная копия)

Быстрая загрузка изменений в оба репозитория:

Подробнее см. GIT_WORKFLOW.md

🤝 Вклад

Буду рад вашим предложениям и улучшениям! Создавайте Issue или Pull Request.

📞 Поддержка

Если у вас возникли вопросы или проблемы, создайте Issue в репозитории.

Сделано с ❤️ для Telegram Mini Apps