Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр Битва Героев: RPG - увлекательная игра в жанре РПГ.

Битва Героев: RPG

Приключения, Фэнтези

Играть

Топ прошлой недели

  • AlexKud AlexKud 38 постов
  • Animalrescueed Animalrescueed 36 постов
  • Oskanov Oskanov 7 постов
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Помощь Кодекс Пикабу Команда Пикабу Моб. приложение
Правила соцсети О рекомендациях О компании
Промокоды Биг Гик Промокоды Lamoda Промокоды МВидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
0 просмотренных постов скрыто
2
mars.frontier
mars.frontier
3 месяца назад

Как мы делали мини-игру про ровер на Марсе внутри Telegram WebApp⁠⁠

«Хочется сделать простую карту, чтобы листать её в Telegram». С этого всё и началось. А закончилось — изометрическим движком, авторизацией по WebApp, системой энергии, покупкой участков и боевым ровером с шестью колёсами.

1/3

🚀 С чего всё началось?

В начале всё было очень просто.
Мы сделали простенького бота, о котором я уже как-то тут писал, и бэк рендерил картинки с кусочком карты, где ты находишься.

В целом, даже эта идея была вполне рабочей и первые 300 пользователей с разных источников легко собрались. Мы даже провели на 9 мая конкурс "найди звезду победы" и выплатили победителю небольшой приз :)

Но само собой, что бот - не предел мечтаний, нужно было пилить полноценный мини-апп.

На боте лишь проверили гипотезу, отладили механики, типа уменьшения энергии, подзарядки аккумулятора в течении времени, пока не заходишь в игру.

Первый шаг в сторону мини-аппки - сделали вебстраничку, где можно было листать мышкой или пальцем — просто ради визуализации. Прямоугольная сетка, тайлы, немного стилей. Telegram WebApp проглатывал HTML5 на ура. Тогда не было никакой логики, просто подгрузка текстур и картинка под пальцем.

Вот как это выглядело:

  • Пользователь заходил и видел карту Марса.

  • Никакого взаимодействия — только “глянуть”.

🎮 А потом захотелось интерактивности

Следующим шагом стало добавление изометрии — чтобы выглядело как псевдо-3D. Самое интересное, что даже не потребовалось изменять текстуры. Серьезно :) Они по-прежнему те же самые, квадратные, 64 х 64. И не используется никакой 3д - движок.

вот краткое и понятное объяснение, как строится изометрическая карта из квадратных тайлов:


🧠 Основная идея:

Каждый квадратный тайл поворачивается на 45° и масштабируется по вертикали, чтобы получился ромб (изометрическая проекция). Вместо привычной сетки (x, y) мы рассчитываем экранные координаты (left, top) по формуле:


📐 Формулы для отображения:

При размере одного тайла T:

  • W = T * sqrt(2) — изометрическая ширина (диагональ квадрата).

  • H = W / 2 — изометрическая высота (высота ромба).

  • WX2 = W / 2, HX2 = H / 2 — половинки для смещения от центра.

Переход от логических координат (dx, dy) к пиксельным:

isoX = (dx - dy) * WX2 + centerX; isoY = (dx + dy) * HX2 + centerY;


🧩 Что это даёт:

  • (dx - dy) — смещает тайл по горизонтали.

  • (dx + dy) — смещает тайл по вертикали.

  • centerX, centerY — центр экрана, чтобы карта строилась относительно игрока.


🎯 В результате:

  • Из обычной квадратной сетки (x, y) формируется ромбовидная карта, где видны и горизонтальные, и вертикальные соседние тайлы.

  • Центральная клетка (текущий игрок) — всегда по центру, а остальные располагаются вокруг.

    Ну а дальше уже дело техники - придумали алгоритм перемещения в 8 направлениях: вверх, вниз, влево, вправо, плюс диагонали.

    Подключили ранее обкатанный в чатботе расход энергии за каждый шаг, и разный расход за диагональные движения, в сравнении с линейным. Плюс небольшой рандом :)

    Задали запреты на воду, скалы и занятую клетку, чтобы не было “читов”.

🔐 Само собой - авторизация

Чтобы пользователь не “прыгал” по чужим роверам и участкам, мы внедрили Telegram WebApp InitData (это такая строка с хешем, которую фронт передает нам в бэк, а мы - уже на сервере телеграм с токеном бота валидируем подпись. Если сошлась - то пользователь зашел к нам через телегу. Если нет - скорее всего он просто открыл веб-страницу как сайт, или что-то пытается поломать, подделать :)

Если кратко:

  • Telegram сам отдаёт токен с подписью.

  • Мы проверяем подпись на бэке по HMAC SHA256.

  • Получаем ID пользователя, сохраняем его в сессии.

Теперь всё честно: ровер – только твой, кристаллы – только твои.

🪐 Стало красивее: добавили кристаллы и рамки

Потом появились:

  • Кристаллы на клетках — можно собирать.

  • Подсветка клеток: белая рамка — твоя, красная — чужая.

  • Имена владельцев, чтобы было видно, кто что захватил.

    В планах: Покупка участков за кристаллы. Это было в текстовом боте. И ползая по карте, даже видны купленные тобой (белым) и оппонентами (красным) участки.

⚡️ Оптимизация и загрузка ассетов

Мы поняли, что каждая картинка может тормозить игру на слабом устройстве, и:

  • Добавили прелоадер, который подгружает PNG-шки перед игрой.

  • Сделали показ спиннера на любом действии (движение, загрузка).

  • Кэшируем тайлы и обновляем только при движении.

🤖 Как выглядит сейчас

Игрок:

  • Заходит в Telegram Mini App.

  • Авторизуется за доли секунды.

  • Видит изометрическую карту с ровером, кристаллами, участками, рекламными баннерами.

  • Может двигаться по клеткам, собирать кристаллы (в будущем - бурить и находить ресурсы, торговать ими, покупать землю).

А мы — всё это рисуем прямо в DOM.
Никаких Canvas, WebGL, или тяжелых движков. Только HTML, CSS и немного магии на JS.


💬 Если интересно — покажу, как это выглядит вживую.
Тестить можно тут. А если зайдёт — добавим NFT, фермы и квесты на выживание 😄

Показать полностью 3
[моё] Gamedev Разработка Программирование Telegram Javascript Python Unity Frontend Backend Web Web-программирование Ton HTML CSS Верстка Длиннопост
9
PyMimo
5 месяцев назад

Какой лучший ЯП для создания веб-приложений?⁠⁠

Я создавал разные приложения и сайты.
Больше всего у меня проектов на Flask (python).

Но я хотел бы узнать, какие еще есть библиотеки для этого?
Знаете ли вы, какая библиотека или ЯП для этого подойдёт лучше всего?
Подскажите, пожалуйста, буду очень благодарен

[моё] Python Flask Вопрос Веб-разработка Web Текст
3
werwolfshtein
7 месяцев назад
Лига программистов

Титан веб разработки⁠⁠

Я счас одному чуваку сайт-визитку запихал в докер, добавил к нему nginx, прикрутил сверху эластиксёрч с мемкэчем и залил всё это дело на vps.

А потому что могу!

[моё] Web-программирование Web Программист Python IT юмор IT Программирование Docker Текст
19
sh1nkey
sh1nkey
1 год назад

Про веб-сокеты при написании риал-тайм чата. Python, FastAPI⁠⁠

Devlog. Networking-app, часть 6. Самый сложный вызов за проект

Про веб-сокеты при написании риал-тайм чата. Python, FastAPI Программирование, Карьера, Профессия, Опыт, Python, Web, Gamedev, Разработка, Мат, Telegram (ссылка)

я после работы

Я начал пилить чат. Я начал писать веб-сокеты. Они работают по другому. Они сложные.

Это самый сложный вызов на весь пет-проект, технология более сложная и объёмная (ну или мне так кажется, потому что приходится разбирать реализацию технологии на гитхабе без пояснений). RabbitMQ стоит на втором месте, там мне тоже приходилось вникать. На третьем месте стоит SQLAlchemy и изучение SQL

Почему сложно?
1) Потому что поначалу не понятно, как они работают (они имеют асинхронную природу, без которой тупо не работали бы)
2) для них как правило используется redis pub/sub (о которой я впервые слышу, ахах. до этого только юзал redis как штуку для кэша)
3) пример кода, который я нашёл, очень перемудрён: там и поддержка множества людей в одном чате есть, и демонстрация статуса пользователя, и rate_limiter есть, и показ что юзер печатает, и т.д. А мне это нахуй не нужно, мне бы простую писалку написать, где можно сообщения в БД хранить...

Я вижу большой потенциал для развития при написании чатов. Технологии более сложные и интересные, нагрузка больше, запросы в БД сложнее, объём функционала тоже больше. С радостью бы написал в будущем нечто подобное, уж очень хочу попрактиковаться в написании SQL кода и использовании SQLAlchemy :>

Показать полностью
[моё] Программирование Карьера Профессия Опыт Python Web Gamedev Разработка Мат Telegram (ссылка)
2
2
yaromirov
yaromirov
2 года назад

Мой подход к изучению иностранного языка и моё WEB-приложение⁠⁠

Сейчас много различных приложений для изучения иностранных языков. Некоторые из них довольно простые, другие обладают широчайшим функционалом, прикручивают геймификацию и вообще пытаются научить всему и сразу. Чем сложнее и шире спектр изучаемого, тем больше приходится делить это на составляющие и "есть слона по частям".
Когда у меня возникла потребность в изучении английского, я попытался разобраться, что действительно работает, и как добиться значимого прогресса с минимальными усилиями. Я собирал информацию, учился и сформировал собственное отношение.
Ах, если бы мы могли посвятить все силы новому языку, а в остальное время просто отдыхать и копить энергию для очередного рывка. Мечты, мечты... Но действительность сурова, и у нас остаётся не так уж много личных ресурсов, чтобы себя прокачивать, особенно если мы не видим мгновенного профита и не можем понять прямо сейчас, какую гигантскую пользу получим. Но изучая новое, мы буквально перестраиваем своё мышление.
Далее я излагаю свои взгляды по этой теме, обозначаю ключевые моменты и предлагаю собственное решение.

Предыстория:
Однажды мне понадобилось подтянуть английский. Вот прям припёрло настолько, что дальше двигаться по профессии стало крайне неэффективно. Словарный запас, как выяснилось, хромал на обе ноги, хотя и позволял работать, а доки то и дело приходилось совать в переводчик.
Собрав немного информации про изучение иностранных языков, я понял, что чтение, написание, слушание и говорение - это 4 почти отдельных навыка. Я стал пробовать разные приложения, но быстро пришёл к выводу, что лошадь следует ставить впереди телеги, а именно, лично для меня наиболее подходящими оказались Anki и Memrise.
Именно максимально простое изучение, именно и ТОЛЬКО СЛОВ как основы языка, я посчитал наиболее эффективным, в том числе и для ускорения обучения на более продвинутых уровнях, если это будет необходимо. Это будет мощной базой и колоссальным подспорьем для развития других навыков, помимо чтения. Более того, если вы уже набрали минимальную базу иностранных слов, постоянное повторение и само напряжение в процессе изучения очень позитивно сказывается на, например, понимании текстов, потому что вы как бы держите пул слов в "оперативной памяти".
С другой стороны, важно понимать значимость так называемого "осознанного обучения". Если всё разжёвывать и класть в рот, то никакого эффективного обучения не случится, потому что человек должен прилагать сознательные усилия для научения своего мозга. На самом деле главный секрет - РЕГУЛЯРНЫЕ усилия в нужную сторону!
У "программы карточек" Anki много возможностей, но много и заморочек. В общем, долбил Memrise больше года по 15 минут два раза в день. Я старался осознанно прилагать усилия для запоминания слов, в том числе используя различные мнемоники (можно погуглить "Мнемоника").
А так как я человек ленивый, сосредоточиться всего на 15 минут - это меня вдохновляло.
Что самое главное для эффективного запоминания, в процессе я постоянно обращался к переводчикам гугла и яндекса, чтобы посмотреть изучаемые слова в контексте - показывал своему мозгу целые предложения с этим словом и заставлял его пробовать понять их смысл. Поначалу просто смотрел предложение и перевод, со временем дела пошли заметно успешнее.
Примерно через полгода я начал читать Марсианина в оригинале, и мне сильно не хватало в Memrise возможности вести свои небольшие словари по темам и подмешивать незнакомые слова из них в основной поток изучаемых слов.
Дело в том, что для продуктивного обучения используются так называемые "частотные словари" - сначала вы изучаете наиболее часто употребляемые слова. Скажем так, для понимания 80-90 процентов информации вам нужно всего лишь, например, 5000 самых часто встречающихся слов из всех-всех слов иностранного языка. Это позволяет максимально быстро нарастить свой словарь иностранных слов и начать понимать основную массу иностранных текстов.
Со временем стало не хватать возможности, встретив хорошо знакомое слово, добавить его сразу в изученные слова, чтобы не возвращаться к нему снова.
Тут стоит отметить, что Memrise использует схему, похожую на так называемый "режим рационального повторения", - подкидывает вам слово снова и снова по некой схеме (например, через сутки, потом через неделю, месяц и т.д.). Если вы не будет допускать ошибки при проверке слова, это слово в итоге попадёт в "выученные слова".
Потом, очень понравился отдельный режим "трудных слов". Если вы никак не можете выучить слово и постоянно допускаете в нём ошибки, Memrise определит это слово в "трудные", и вы сможете изучать подобные слова отдельно, возможно, по несколько иному алгоритму. И тут нелишней была бы возможность сразу определить встреченное слово в эту категорию, если вы знаете что подобного рода слова даются вам с трудом.
Как известно, перевести с одного языка на другой можно, но нельзя. Это трудно объяснить, но понять это возможно только открыв для себя новое измерение жизни, выучив иностранный язык. Грубо говоря, это иной параллельный способ мыслить, который обогатит любого человека любой профессии так, как невозможно было представить доселе. Поэтому можно забыть об одном переводе иностранного слова, можно зыбыть о точном переводе, о переводе единственном. Наглядным доказательством служит изменение значения слова в зависимости от контекста. Для каждого иностранного слова должен быть представлен целый пул слов родного языка, желательно отсортированный по частоте использования.

Предпосылки:
Учитывая отсутствие важного для меня функционала в приложении Memrise, появилось желание создать "идеальный" продукт, конечно со своего взгляда на эту проблему.
Передо мной вставал вопрос: "А зачем я буду тратить своё время? Их же тысячи!". Это прозвучит громко, но для меня имело значение, что проект принесёт пользу другим людям. Даже если небольшое количество человек посчитают инструмент, разработанный мной, полезным - это ну очень круто.
Ну и позитивное влияние на собственный прогресс в языке, согласно "Технике обучения Фейнмана" отрицать бессмысленно.
Для меня это был шаг в сторону своей реализации - улучшить что-то в этом мире, что будет нужно другим. Привнести своё видение, предложить людям то, что я считаю полезным и эффективным. Убедиться, что я смогу сделать сам, насколько далеко я смогу продвинуться. Плюс открылась возможность дополнительно прокачаться по широкому стеку технологий, бросить себе вызов.
Спустя некоторое время нашёлся инвестор, который поддерживал мой проект. К сожалению, последние события вынудили его прекратить финансирование на неопределённый срок.
Я сформировал функциональные требования, которыми должно обладать моё приложение.

Основные требования к приложению:

  • Должно быть доступно с любого устройства через браузер и интернет.

  • Должно адекватно отображаться на различных устройствах с различным разрешением и размером экрана. Глаза ломаться не должны.

  • Должно быть максимально возможно лёгким (объём загрузки) и быстро работать.

  • Должно обучать словам и только словам.

  • Должно иметь минимум функционала, чтобы хорошо выполнять одну и только одну функцию, и пользователь ощущал бы себя как в любимых домашних тапочках, пользовался бы приложением как зубной щёткой, на "кончиках пальцев".

  • Не должно быть никакой геймификации - "вам шашечки или ехать?!".

  • Должна быть возможность пользоваться приложением "без заморочек", без блужданий в интерфейсе - выдалось 5 минут свободного времени - погнали долбить слова! Нашлись силы сконцентрироваться на 15 минут - превосходно, рванули долбить слова!

  • Должно иметь минимальный порог входа, но такой барьер быть должен, ведь впереди путь, требующий вложения энергии.

  • Не должно функционировать в качестве диалога, должно провоцировать прилагать сознательные усилия к обучению. По вышеописанным причинам.

  • Должно использовать "частотный словарь" иностранных слов (на данный момент в приложении 17696 самых распространённых английских/американских слов).

  • Должно использовать "режим рационального повторения" (можно погуглить "Кривая забывания").

  • Должна быть возможность услышать, как произносится слово.

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

  • Должно показывать объяснение (толкование) изучаемого слова с помощью других слов того же языка.

  • Должно показывать предложения (примеры), в которых содержится изучаемое слово, как с переводом, так и без оного. Важно сразу увидеть слово в контексте!

  • Должно показывать синонимы для изучаемого слова, желательно отсортированные по частоте применения.

  • Должно показывать изображения (мемы, приколы и т.п.), относящиеся к слову, для лучшего запоминания, для задействования эмоциональной составляющей нашей психики.

  • Должна быть возможность сразу определить встреченное слово в "Выученные слова" или в "Трудные слова".

  • Должна быть возможность изучать/повторять "Трудные слова" отдельным потоком.

  • Должна быть возможность вести свои словари по отдельным темам (например, Марсианин или Гарри Поттер) и включать слова из них в основной поток изучения "частотного словаря".

Ну что ж, загоревшись идеей, засучил рукава. Долго ли, коротко ли, довёл приложение до рабочего состояния, потестил. Выложил на сервер. Стало возможно использовать как и задумывалось. Разумеется, будут баги и неожиданности. Надо смотреть под нагрузкой, допиливать функционал. Но основная масса работы уже позади, не стыдно и показать.

Вынести на суд пикабушников своё творение меня сподвигли две вещи:
Первая - это волна, где вы делились своими фото с профессиями, тут я понял, как разнообразна аудитория пикабу и как много у неё интересов.
Вторая - недавно был пост, где комрад демонстрировал свою программу для изучения иностранного языка и свой взгляд на это дело.
И я подумал: "Пришла пора показать и моё приложение и попросить поддержки"...

Ура! Проект живёт. Тестовый доступ на 1000 слов работает бесплатно. Этого должно быть достаточно для понимания сути проекта и проделанной работы. Жду критики и обратной связи. Хочется понять, как люди отреагируют, как увидят со своей стороны.

Юзать лучше через Google Chrome браузер (Yandex browser, Edge browser), там работает вибро, и вёрстка максимально без багов. Но проверяю обычно и в Mozilla (FireFox), и в Safari (iOS, macOS).

Проект сейчас находится на такой стадии, что его дальнейшая судьба нуждается в затратах времени. А у меня нет возможности уделять проекту много сил, потому что исчерпаны все финансы. Тянуть весь стек в одного - не легко, а нанимать помощника на этом этапе невозможно без прибыли.
Я надеюсь найти финансирование на свой проект, чтобы сделать его полностью таким, как задумывалось.
Я буду рад и благодарен, если вы сможете поддержать мою работу и дать моему приложению путёвку в жизнь.
Частью проекта я обязан инвестору, но есть договорённость, что донаты не будут входить в общий пул доходов, чтобы была возможность поддержать проект без оформления юридической стороны дела на первом этапе. Так же решили давать льготную подписку тем, кто сможет оказать помощь.
В любом случае спасибо за уделённое время.
Да прибудет с вами сила!

Адрес приложения:
https://groklang.ru

Группа в Telegram:
https://t.me/groklang

Почта для поддержки:
support@groklang.ru

Оказать помощь проекту:
Внимание!!!
Пожалуйста, в комментарии к платежу укажите способ связи с вами, чтобы я мог идентифицировать вашу помощь и учесть для льготной подписки.

В приложении после авторизации можно посмотреть свой ID (уникальный идентификатор) в настройках пользователя. Лучше всего указать именно ID в комментарии к платежу.
Вы можете оказать помощь прямо из приложения - ссылка находится в диалоге "Like" ( 👍 ).

ЗЫ:
Стек, кому интересно: Python (aiohttp); Postgres; Svelte + Ionic

Показать полностью
[моё] Английский язык Изучаем английский Иностранные языки Изучение языка Приложение Веб-приложение Web Длиннопост Текст IT Программирование Python
5
0
soaqa
soaqa
2 года назад
Программирование на python

FastAPI регистрация и аутентификация через ApiKey⁠⁠

Постарался раскрыть тему которую обошли вниманием в официальной доке, видео вышло не вчера, но я не мог какое-то время пилить посты)

[моё] YouTube Python IT Web Программирование Видео
2
29
tproger.official
tproger.official
2 года назад
Типичный программист

JS тот ещё советчик⁠⁠

JS тот ещё советчик IT юмор, Программирование, IT, Картинка с текстом, Программист, Python, Javascript, Web
Показать полностью 1
IT юмор Программирование IT Картинка с текстом Программист Python Javascript Web
8
LeerRonin
LeerRonin
3 года назад

Ищу единомышленников)))⁠⁠

Еу) Всем привет. Мне 18 лет и меня давно преследует, как мне кажется, популярная проблема. То что интересно моим друзьям часто трогает меня не так сильно, но это еще что, ведь меня достаточно просто можно заинтересовать чем угодно. Проблема как раз в обратном. То что может заинтересовать меня, просто заставить иногда не дышать и не спать, остается не понятым моим окружением, иногда даже высмеянным) Но это ладно. Настоящего интереса это никогда не порождает, даже если я продолжаю говорить с разными людьми.
(котик в статье для набора классов)

Ищу единомышленников))) Программирование, Python, Программист, IT, Разработка, Telegram бот, Telegram, Начинающий, Единомышленники, Команда, Мотивация, React, Web-программирование, Web

Я могу писать на отвлеченные темы, мне кажется, часами) Но ближе к сути. Какое то время в моей голове есть идея. Я хочу сделать бота для Telegram использующего нововведение, такое как веб интерфейс. Пока что я не на высоком уровне) Это второй бот которого я пишу. Я пишу на питоне, так как самое важное для меня, как для многих людей воспитанных клиповой культурой, это результат. Используя питон результат будет сразу, но не идеальный. Короче, веб интерфейс я планирую писать на ReactJS, веб интерфейс будет общаться с файлом сервера (на питоне) через файл JSON. Бот будет заниматься распределением финансов пользователя по категориям, но самое главное я думаю это не такая уж плохая практика.

Друзья, помогите мне решить мою проблему, пожалуйста. Я здесь недавно, но думаю плюсики помогают увидить запись большему кол-ву людей. Уважаемые программисты, если у вас есть желание помочь советом, я буду этому очень рад. И господа новички, буду рад если кто то из читающих присоединится к разработке бота, вместе этот небольшой проектик очень скоро будет написан) Благодарю за внимание

Показать полностью 1
[моё] Программирование Python Программист IT Разработка Telegram бот Telegram Начинающий Единомышленники Команда Мотивация React Web-программирование Web
16
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии