Gamedev + Web-программирование

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

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

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

В целом, даже эта идея была вполне рабочей и первые 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, фермы и квесты на выживание 😄

Приветствую всех. Подскажите пожалуйста. Натолкнуло меня на этот вопрос волна приложений "честная цена".

Допустим, новичок хочет быть программистом - делать небольшие игры. Но при этом понимает, что игродел - это скорее хобби, а хотелось бы в дальнейшем какую-никакую, а копейку за свою работу получать, а кому этого бы не хотелось?


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

Но, начиная изучать что-то из этого, понимаешь - что-то тут не то.
Из популярных языков - это либо, огромный локомотив типа С# и .NET, на котором можно сделать абсолютно ВСЁ, но в то же время и ничего, потому как реализация через фреймворки определенных задач будет похожа на забивание гвоздя отверткой.

Либо это легкий и непринужденный инструмент, вроде Python, на котором можно сделать тоже абсолютно ВСЁ, но это всё будет несерьезным и легковесным, скорее как дополнение к чему-то.

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


Казалось бы, всё просто, так оно и работает, в одиночку никто проекты не разрабатывает и в проектах как раз и есть условные 3 человека, которые знают все эти 3 разные технологии и объединяют в единое целое. НО!

НО! Тогда кто все эти люди, которые за вечер клепают свои альфа проекты? Они тебе и игры запилят, и сайты, и десктоп, и андроид приложения. И вообще оказывается это всё они пилят после просмотра пары роликов на ютуб. Но не могут же они знать абсолютно все технологии и языки, чтобы так легко переключаться с одного на другой?

И так с абсолютно каждым языком. У кого ни спроси - это всегда какие-то абстрактные ответы по типу, что для каждой задачи свой язык.
Неужели среди программистов, где чуть ли не правило - не изобретать велосипед, если его уже сделали до тебя, до сих пор нет понятного примерного плана пути для начинающего? Не того road map, где стрелочками отмечены абсолютно все существующие технологии по определенной сфере, а что-то понятное, то через что проходили все, прежде чем стать профессионалами, прежде чем начать делать что-то своё?

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

P. S. Я знаю, что сейчас в IT не войти, надо работать на заводе, а на 100 резюме джунов приходится всего 1 вакансия. У меня другая работа, которая устраивает. Это скорее попытка узнать, какую ошибку я совершил в молодые годы, когда выпустился из техникума со специальностью "информационные технологии", где максимум тебя научили писать "hello, world" на двух разных ЯП, а из-за обилия выбора направлений в дальнейшем я запутался, заблудился и не воспользовался шансом, когда он еще был.

Всем привет.
В нашей вселенной есть игра - Moon Attack.
Она предполагалась как игра про космос, луну и еже с ними. Однако.
Однако появилась идея для разработки.
Суть идеи в следующем. Разным людям, нравятся разные направления. Кому-то орков подавай, кому-то драконов, а кому-то нужно тяжелую технику, да взрывов поболее. По сути мы часто видим копирки игр, но в разных вселенных. Так почему же просто не объединить разные графические изображения в пределах одной игры? Как замена скинов на персонажах. Скелет там один и тот же( может различаться только пол персонажа ), а все остальное копирка.

Суть.
А суть в том, что мы сделаем 3 разных направления по графике и при этом изменим положение самого игрового поля.

Игра, как и было запланировано, останется в браузере, но игровое поле превратиться в некоего рода игровое поле ( настольные игры ), а не поверхность луны. А вот как изобразить базу теперь не совсем ясно. Будем думать. В любом случае , мы сейчас прорабатываем технику перемещения всеми игроками, так что время есть.


Теперь немного про саму игру, для тех кто не в курсе.
Это онлаин пошаговая стратегия. Правда пошаговость происходит только в моменте пвп. Все остальное время игроки перемещаются только в отведенное для ходьбы время. И делают они это единовременно. Поэтому немного не ясно какой жанр все же у игры :)

В игре есть 3 фракции. Каждая фракция добывает ресурсы своими технологиями( ровно как и воюет ).
Чем-то игра ДОЛЖНА напоминать Героев.
Такие вот дела.
А, да.
Первые шаги для просмотра будут в мае месяце, поэтому пока минимум инфы :)

Только обычные. Если хочешь чтобы добавили, то напиши вопрос разработчику -> https://vk.com/san90 (либо в нашу группу ВК). А для тех кто не знает какие вообще бывают массивы, я проведу краткий ликбез.

Сверху обычный Массив (может запоминать и выводить не более одной адресной переменной за раз), снизу же Многомерный Массив.

За неимением Многомерного Массива приходится пользоваться старыми дедовскими способами (обычно через Цикл). Но Автор уже пообещал добавить его до конца месяца. А там глядишь и народ подтянется.

Аперо это форк Паскаля с возможностями PHP (для работы в сети), только полностью на русском языке. Он хорошо подходит для обучения детей и подростков азам программирования (чтобы написать свою первую игру за 5-10 минут) и понять, а этим ли ты хочешь заниматься в жизни? И затем уже переходить к изучению (чего-то более серьёзного) Java, Python или HTML.

Знаком с этим языком (тоже писал на нём простенькие игры), но думаете его смогут освоить школьники? Тут от 15 строк (на русском языке) у людей мозги закипают (и крыша едет), судя по комментариям. А от разбора 300-500 строк, дети из окон массово прыгать начнут! Нет желания брать на душу такой грех :)

4) Вопрос от https://vk.com/mihanvershinin -> "А можно ли на АПЕРО создать анимацию со звуком? - Как у тебя в игре Doodle God"

Отвечаю: Если тебе нужна заставка, то тебе хватит и картинки с таймером.

Добавить (в игру) музыку можно таким таким же образом.

Пример анимации был в Статье #7 -> Рыба моей мечты #7 или Всё новое, это хорошо забытое старое и Статье #8 -> Рыба моей мечты #8 или кручу-верчу, запутать хочу (где наши пчелы летали туда-сюда)

Ещё один пример анимации (можно посмотреть онлайн) -> https://apero.ru/Текстовые-игры/96895fdd106dbe80de1a3c40c640...

5) Вопрос от https://vk.com/usualrussian (явно с претензией в мой адрес) -> "Я сказал Лабиринт, а ты мне что сделал? Его невозможно пройти и нет никаких чётких границ!!! Где мои монстры, где повышение уровня и анимация? НЕ ВИЖУ"

Отвечаю: был не прав, сейчас исправлюсь. Начнём с лабиринтов, для первого раза тебе хватит и восьми. Добавим в список: обычные, с порталами, рычагами, ловушками и ключом, многоэтажные и многомерные (ты там не уснул ещё, а дружок?) Код -> https://disk.yandex.ru/d/5YQ_wBKzN6ZDFA

Описание кода по блокам:

Блок #1 -> Выбор режима игры и лабиринтов.

Блок #2 -> Пред-загрузка условий игры и выполнение хода игрока.

Блок #3 -> Проверка условий выбранных опций (Время и Битвы)

Блок #4 -> Загрузка карты лабиринта (в память компьютера)

Блок #5 -> Проверка возможности выбора хода игрока.

Блок #6 -> Различные условия необходимые для победы.

Блок #7 -> Выбор игроком направления для хода.

Блок #8 -> А вот и само сражение с противником. 

Дальше-то сам справишься? - Или тебе опять мало? Тогда лови ещё парочку. Мне не жалко :) И код -> https://disk.yandex.ru/d/Y0bMjhSPgzZcQg

На счёт добавления в игру разных типов врагов (наработки имеются) -> Рыба моей мечты #6 Нет предела совершенству Либо готовый код можно взять отсюда -> https://apero.ru/Текстовые-игры/Arepo-Auto-Chess

(Играть Онлайн) в Лабиринты -> https://apero.ru/Текстовые-игры/3007a283a34d55c5dedeacf582cd...

(Играть Онлайн) в Doodle God -> https://apero.ru/Текстовые-игры/4c71c50423f2932b8be3ead4b68c...

Будут вопросы? - На них ответят вот эти ребята:

- Михаил1 -> https://vk.com/stalkersleem

- Александр -> https://vk.com/san90

- Дмитрий -> https://vk.com/drkcrwn

- Михаил2 -> https://vk.com/id17130734

- Пашка -> https://vk.com/glumpa

Узнать, что такое АПЕРО, можно здесь -> https://apero.ru/Документация либо в группе ВК -> https://vk.com/games_online или в нашем чате для игроделов -> Аперкод (для приглашения в него написать мне, либо ребятам выше). А так же обсудить новые игры можно на форуме.

Спасибо, Люблю Тебя :)