айтишник · 21.06
Вайб кодинг: Как я создал Telegram WebApp Змейка «Pixel»
Приветствую! Это история о том, как я вместе с ИИ-ассистентом Grok создал Telegram-бот Змейка "Pixel" (@Zmeyka_Pixel_Bot) - пиксельную змейку, которая сочетает ностальгию, современные технологии и реальные деньги через YooMoney. Это рассказ про создание полноценного приложения вместе с ИИ.
Идея: Змейка в Telegram с пиксельным вайбом
Недавно вспомнил старую добрую игру. Змейка с её простотой удобно устроилась В моей голове и не хотела выходить... Я подумал: «А что, если перенести эту классику в Telegram, но с изюминкой - пиксельным стилем, препятствиями и возможностью выигрывать реальные деньги?» Так появилась идея Змейки "Pixel" - игры, где змейка скользит по сетке 20x20, уворачивается от барьеров, ест бонусную еду и зарабатывает игроку рубли через YooMoney.
Почему Telegram? Web Apps позволяют запускать мини-приложения прямо в чате, а API обеспечивает авторизацию и удобный интерфейс. Это идеальная площадка для игры, в которую можно рубиться, пока ждёшь ответ от друга.
Технологии: Простота с душой
Для проекта я выбрал стек, который сочетает лёгкость и мощь: 1. Фронтенд: HTML5, Canvas, JavaScript для игры и интерфейса. 2. Бэкенд: PHP для API, работы с базой и интеграции с YooMoney. 3. База данных: MySQL для хранения пользователей, транзакций и настроек. 4. Telegram Web Apps: Для авторизации и интеграции с ботом. 5. YooMoney: Для пополнения и вывода средств. 6. Bootstrap и CSS: Для стильного дизайна с градиентами и тенями.
Наш путь: Создание змейки с Grok
Змейка "Pixel" не появилась в одиночку. Мой напарник, ИИ Grok от xAI, был со мной на каждом этапе, предлагая код, отладку и виртуальные подбадривания. Вот как мы оживили змейку:
Основа игры: Я начал с ядра: змейка ползает по Canvas, собирает еду и избегает стен. Grok доработал game.js, предложив модульную функцию draw() для рендеринга.
Мы добавили динамическую скорость через gameSpeed, загружаемую с сервера.
Бэкенд и API: Бэкенд на PHP управляет всем: настройками, пользователямм и транзакциями. Grok написал /api/get_settings.php для загрузки параметров игры из MySQL.
Авторизация в Telegram: Grok настроил интеграцию с Telegram Web Apps, используя initData для авторизации.
Монетизация через YooMoney: Идея - первое сердце, а Деньги - второе сердце проекта. В /api/deposit.php Grok реализовал создание ссылок на оплату и обработку IPN
Баги: Испытания, которые закалили
Упрямая скорость змейки (initial_speed): Баг: Я добавил initial_speed в таблицу settings, но змейка мчалась, как сумасшедшая. API не возвращал параметр. Решение: Grok переписал /api/get_settings.php и добавил отладку в game.js
Провал фильтра транзакций: Баг: В админке фильтр транзакций по статусу («Завершено», «Ожидает») ничего не показывал. SQL-запрос был пустым. Решение: Grok исправил запрос с WHERE
Бунт кнопки «Пополнить»: Баг: Кнопка «Пополнить через YooMoney» в /api/deposit.php умерла, выдавая SyntaxError: Unexpected token '<'. PHP возвращал HTML-ошибки вместо JSON. Решение: Grok предложил отключить вывод ошибок и добавить логи
Этот проект стал для меня ещё одним уроком кодинга с душой. Главные выводы: 1. Логируй всё: log.txt и консольные логи спасали меня раз за разом. 2. Проверяй API: HTML вместо JSON - обряд посвящения в PHP. Используй ini_set('display_errors', 0) на продакшене. 3. Сохраняй код: Перезапись deposit.php снова научила меня ценить Git. 4. ИИ как напарник: Grok был как друг-кодер, который в теме, не бухает и всегда на связи :) 5. Принимай несовершенство: Запускай с багами, дошлифовывай потом.
еще контент автора
еще контент автора
айтишник · 21.06
войдите, чтобы увидеть
и подписаться на интересных профи