0 просмотренных постов скрыто
Как стать «программистом» за две недели (или приключения профессиональной скрипачки в дебрях кода)
Пару недель назад я с дуба рухнула решила что хочу «попробовать в программирование» как говорится. И неважно что с нуля, и что по профессии «не положено» - я уже 30 лет как человек культуры, работаю в оркестрах...
Подобрала приложение для обучения «чайников» и вперёд.. Python, HTML, SQL, C++. Пробежалась «по верхам», вспомнила детство (были в школе уроки программирования, Basic и Pascal если не ошибаюсь).
Встал вопрос куда же дальше стоит углубляться, какой язык выбрать. Кстати вопрос актуален для сих пор - буду очень благодарна за советы!
А пока решила что мне интересно будет попробовать создать веб-страницу посвящённую предстоящим скачкам на нашем ипподроме. С помощью полученных знаний и ИИ накидала основной код (если что, здесь и далее терминология от балды, заранее приношу извинения программистам..).
Добавила фото, оформила разделы («списки») под скачки и навигацию по странице.
Потом решила что хорошо бы и под будущие результаты сделать «заготовку».
А ещё раздел под видео скачек.
Кстати на определённом этапе я вдруг задумалась что вообще понятия не имею что надо сделать чтобы страница оказалась непосредственно в интернете.. (До этого все изменения просматривала в том же приложении, где набирала код). И пришлось мне познать мир «доменов, хостинга, SSL-сертификатов».. 🙂 Спасибо терпеливым сотрудникам поддержки, смогли донести до меня всю необходимую информацию простым человеческим языком. ;)
После того как страница появилась в интернете в общем доступе, настало время «тестирования» ее моими друзьями и знакомыми. Мне было важно понять как она выглядит на разных устройствах. И тут поступило забавное замечание от одной знакомой программистки что «открывается сайт хорошо на всех устройствах, но вот при выводе на печать (!) страницы разбиваются».. А ведь я даже не задумывалась о такой функции, ведь никакой необходимости в ней вроде и нет.. И тут прям спортивный интерес появился, пришлось вновь «посоветоваться» с ИИ и решить эту «задачку». ;)
В общем сайт конечно ещё в разработке, информация обновляется по мере поступления (так называемые «записки» на скачки), видео из того что под рукой оказалось (2-ое, под названием «Приз Большой летний», искренне рекомендую к просмотру со звуком ;).
Буду рада всем посетителям, их оценкам и замечаниям. 🤗
Попробую выложить название сайта здесь, надеюсь это не запрещено..
Показать полностью
1
Как с нуля, сгенерировать игру или приложение, состоящие из нескольких файлов. Для чайников!
Как с ноля, сгенерировать игру или приложение, состоящие из нескольких файлов. Для чайников.
Некоторые статьи по создание кода игр при помощи нейросетей, не учитывают один важный нюанс.
Большинство игр и программ для разных платформ, состоит не из одного файла или листа кода, а из нескольких файлов.
По умолчанию, нейросети при запросе, могут все сгенерировать весь код в одну кучу, не пояснив, какой коды куда вставлять.
Чтобы избежать сложностей и путаницы, достаточно в самом начале использовать важную команду, которая выглядит примерно так:
Напиши для каждого файла код игры которая будет запускаться с html-сайта. Суть игры следующая.....
Но если вы создаете игру не на базе html-страниц и сайта, то вместо фразы "которая будет запускаться с html-сайта", вам надо указать типа-платформу игры, или ее среду разработки.
"Напиши для каждого файла код игры", является самой главной фразой, с которой надо начинать любой запрос, если приложение или игра состоят не из одного файла или страницы.
ПРАКТИКА.
Вот полный пример запроса для нейросети, чтобы создать саму примитивную игру, которая запускается в виде веб-страницы в браузере.
ЗАПРОС:
Напиши для каждого файла код игры которая будет запускаться с html-сайта. Суть игры следующая.
Объект-игрок, вид которого задается файлом"image1", управляется при помощи клавиш. Клавиши-стрелки определяют направление стороны движения объекта-игрока.
В пространстве игры, рандомно расположены объекты-препятствия, внешний вид которых задается файлом "image2".
Если Объект-игрок задевает объекты-препятствия, то Объект-игрок отскакивает в сторону.
Фон игры задается файлом "image3".
Код созданный для каждого файла, полностью вставляете в текстовый редактор (например Блокнот), и сохраняете с тем названием и расширением, который указала нейросеть.
Если вы не знаете, в какую директорию/папку игры, вставлять конкретный файл
- наберите в интернет поиске :
"название.расширение файла где должен находиться"
"название.расширение файла где расположен/где находиться"
"название.расширение файла куда положить"
Или просто изучите архитектуру игровой платформы, чтобы решить этот вопрос".
Что касается графический файлов - то их вы должны рисовать в нужном формате в графических редакторах, а потом аналогично размещать в директорию игры, так-же разузнав куда их поместить по аналогии с файлами кодов игры.
Показать полностью
Как создать уровни html-игры в визуальном редакторе, а код свойства объектов и сценария добавить из нейросети?
Как создать уровни браузерной-игры и разместить ее персонажей в визуальном редакторе, а код свойства объектов и сценария добавить из нейросети?
СИТУАЦИЯ.
Вам хочется создать простую браузерную игру, которая будет открываться при запуске файла index.html
Но нейросеть пишет только код, а не создает уровень игры с точными координатами расположения игрового персонажа и всех объектов игры.
А визуальный редактор WYSIWYG Web Builder в обычном случае, может создать игровой уровень, строго разместить игрового персонажа и объекты строго по координатам, но не задать свойства/поведение объектов и управление игровым персонажем.
Возникает впорос:
Как создать уровни браузерной-игры и разместить ее персонажей в визуальном редакторе, а код свойства объектов и сценария добавить из нейросети?
Есть решение:
Совместить визуальный редактор и нейросеть.
ЧТО КОНКРЕТНО ДЕЛАТЬ?
1. С помощью визуального программы-редактора WYSIWYG Web Builder 15 (для создания веб-сайтов), создаем из разных объектов полноценный уровень. В уровне размещаем игрового персонажа строго там, где он должен загружаться в локации игры.
Созданный уровень/игру публикуем в виде html-сайта через меню Файл-"Опубликовать".
2. Затем открываем нейросеть, например ChatGPT или Grok
ЗАПРОС, который нужно ввести в командную строку нейросети:
Редактируй код каждого файла игры, которая будет запускаться с файла index.html. Суть игры следующая.
Объект-игрок, который в коде именуется как объект "Image1", управляется при помощи клавиш. Клавиши-стрелки определяют направление стороны движения объекта-игрока.
В пространстве игры, расположены следующие объекты-препятствия, которые в коде именуются как:
Image4, Image5, Image7, Image9
Если Объект-игрок задевает объекты-препятствия, то Объект-игрок, отскакивает в сторону.
Фон игры задается файлом "image2".
Вот коды каждого файла, которые ты должен отредактировать:
код файла: index.html:
здесь вставляете весь код из файла index.html
код файла: index.css
здесь вставляете весь код из файла index.css
И так со всеми файлами игры-сайта-приложения, где содержится код!
3. Код созданный для каждого файла, при помощи текстового редактора(например Блокнот) полностью вставляем в конкретный файл, стерев/убрав перед этим старый код.
4. Запускаем файл index.html, который запускает игру.
Показать полностью
Как мы делали мини-игру про ровер на Марсе внутри Telegram WebApp
«Хочется сделать простую карту, чтобы листать её в 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, фермы и квесты на выживание 😄
Показать полностью
3
Я сделал веб-игру про рисование песком с 200 000 физических песчинок
Игра в браузере: https://alexander-dudarev.itch.io/sand-art
Sand Art – это симулятор творческой физической песочницы, в которой я постарался сделать реалистичное моделирование до 200 000 частиц песка.
Я использовал технологии WebGL и пытался создать интуитивно понятное управление, чтобы создать увлекательный творческий процесс.
Ключевые функции:
- Реалистичная физика песка с 200 000 динамическими частицами, создающими впечатление подлинного песка.
- Многослойная система частиц обеспечивает естественное взаимодействие между песчинками.
- Оптимизированный рендеринг WebGL для обеспечения бесперебойной работы на всех устройствах.
- Набор инструментов для творчества. Разнообразные инструменты взаимодействия, позволяющие манипулировать вашим песочным творением. Художественная настройка 7 уникальных форм кисти для разнообразного художественного выражения. Регулируемые размеры кистей для создания мелких деталей или широких мазков. Полная цветовая гамма для создания ярких разноцветных композиций.
Игра идеально подходит для снятия стресса, творческого самовыражения, арт-терапии.
Буду рад получить фидбэк. Что улучшить, чего добавить?
Показать полностью
4
Создаю калькулятор смазки в DeepSeek
Но что-то идёт постоянно не так! Блин, то сетка начинает учитывать процент внутри типа снега, а у нас их два: грубый и мягкий, то путает влажность, то кривит названия смазок.
Вот так выглядят калькуляторы, созданные в DeepSeek. Работающих пока нет.
Записать ей игровое видео пока невозможно: Atom N2600 и 2гб оперативы. И телефоном не могу: нет упора в данный момент.
Некоторые из промптов.
Из распакованных ранее файлов у меня есть текстовый файл, содержащий информацию по всем смазкам (для какой температуры, влажности и так далее), но иишка по-моему неверно его читает. Я переписала всё в таблицу. Потом скинула ей скрины из игры с минимально и максимально возможной погодой.
Ообнаружилось ещё, что задать от -15 до 5, в ручном режиме, а смазка почему-то есть для от -20 до 10. Скорее всего для уравнивания. А там хз.
Однако мне не удалось — практически ничего не работает (попросила написать html5), например, в получившемся калькуляторе заявлено 88%, а по факту еле-еле 75-76%, или калькулятор заверяет о 99,5% качества смазки, но зашла в игру и проверила: ерунда. Не то. И так по кругу.
В текстовом файле какие-то два параметра, назначение которых мне неясны. Вообще.
Вот тут лежат сами нерабочие калькуляторы, скрины, промпты, таблица и текст оригинальный.
Как правильно общаться с DeepSeek? Я только недавно начала, как раз, именно для генерации небольших кусков кода.
Показать полностью
16
Ответ на пост «Поиск удаленной работы. HTML, CSS, Fronted»1
Как я понял. Вам не нравится верстать. Вы это дело осваиваете чисто ради денег.
Программист, без интереса, на уровне непрограммист - вообще никому не нужен и учить его никто не будет. И пустое это занятие.
И html + css - это не программист. Не одно из этого вот не язык программирования.
html + css - сейчас полностью заменимо ИИ.
Есть тильда.
Верстальщик - мертвое направление.
А теперь совет как войти в IT. Войти ради денег.
Устройся на работу не важно кем и куда но в IT. Там уже научишься всему.
Поясняю, в it есть дофига работы которую надо делать около IT и супер пупер навыки там не нужны.
Иногда могут требоваться тестировщики для ручного тестирования, тех дизайнеры в гейм деве, тех поддержка, и тд и тп.
Работа которая по меркам it оплачивается не очень, но это все же ближе к it зп.
Попав в нужную атмосферу, само собой так выйдет что научишься чего то у коллег, возможно что то получится и перейдешь на другую должность. Самое главное что б что то понравилось, а глаза загорелись.