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

Расслабьтесь и отдохните: игра без ограничений по времени.

Проверьте свою смекалку: головоломка для любителей

Блоки Судоку - расслабляющая головоломка

Головоломки, Гиперказуальные, Мобильная

Играть

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

  • Oskanov Oskanov 8 постов
  • AlexKud AlexKud 26 постов
  • StariiZoldatt StariiZoldatt 3 поста
Посмотреть весь топ

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

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

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

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

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

Учим HTML

966 постов сначала свежее
5
isaj4ev
isaj4ev
6 дней назад

Возвращаем стену (олды на месте?)⁠⁠

Память - единственный рай, из которого нас не могут изгнать. (Жан Поль)

На досуге было нечем заняться, а как известно, именно в такие моменты рождаются самые бредовые идеи. И вот, сев за ноут, я наткнулся на видео, где парнишка объяснял логику работы мини приложений в телеграм, и я начал думать, а что же мне такого собрать на коленке, чтобы немного покопаться в вопросе. И у меня в голове возникла картина. Я же, черт возьми, могу сделать то, что так давно просили вернуть Пашу, хоть и с небольшим опозданием, да и совсем не там, где оно было изначально, но ради кликбейта мы готовы на всё. И вот я уже открыл IDE и начал возвращать стену. И сейчас это выглядит примерно так:

Возвращаем стену (олды на месте?) Telegram, ВКонтакте, HTML, Ностальгия, Олдфаги, Длиннопост

У каждого авторизованного пользователя есть своя стена, профиль, который он может настроить под себя (изначально аватар и имя/фамилия подтягиваются из профиля телеграм, но их можно кастомизировать), есть псевдоним и статус, а также можно заполнять инфо о себе, вроде семейного положения и политических взглядов, все как в старые добрые.

Ну и собственно сама стена. Пока поддерживает текст, прикрепление изображений и рисование "граффити" (спасибо за реализацию чатгпт, без него я бы точно в этом вопросе не вывез). Также есть счётчик лайков под постами, но пока без отображения кто этот лайк поставил.

Своя стена открывается в боте по кнопке /start, а на чужую можно попасть по размещенной пользователем ссылке с его ID.

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

Пишите чего бы сами добавили из олдскульного ВК, буду рад почитать, если понравится тема то выпущу рассказ с новым "обновлением" когда выпилю стену и заменю ее на микроблог

Показать полностью 1
[моё] Telegram ВКонтакте HTML Ностальгия Олдфаги Длиннопост
0
2
user10842569
7 дней назад

Помогите решить задачу по HTML⁠⁠

В описании указано Flex

Помогите решить задачу по HTML HTML, Основы HTML, Html 5, Верстка, Веб-дизайн, Веб-разработка, Web, Web-программирование, Длиннопост
Помогите решить задачу по HTML HTML, Основы HTML, Html 5, Верстка, Веб-дизайн, Веб-разработка, Web, Web-программирование, Длиннопост
Помогите решить задачу по HTML HTML, Основы HTML, Html 5, Верстка, Веб-дизайн, Веб-разработка, Web, Web-программирование, Длиннопост
Показать полностью 3
[моё] HTML Основы HTML Html 5 Верстка Веб-дизайн Веб-разработка Web Web-программирование Длиннопост
1
imctobitch
imctobitch
20 дней назад
Серия I'm CTO, bitch

PHP — это про крепкую мужскую любовь⁠⁠

😡 Телеграм-канал

I`m CTO bitch PHP Озвучка Бэтмен Джокер IT юмор Программист HTML Видео Telegram (ссылка)
11
13
ievolper
ievolper
20 дней назад
ИТ-проекты пикабушников

Как стать «программистом» за две недели (или приключения профессиональной скрипачки в дебрях кода)⁠⁠

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

Подобрала приложение для обучения «чайников» и вперёд.. Python, HTML, SQL, C++. Пробежалась «по верхам», вспомнила детство (были в школе уроки программирования, Basic и Pascal если не ошибаюсь).

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

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

Добавила фото, оформила разделы («списки») под скачки и навигацию по странице.

Потом решила что хорошо бы и под будущие результаты сделать «заготовку».

А ещё раздел под видео скачек.

Кстати на определённом этапе я вдруг задумалась что вообще понятия не имею что надо сделать чтобы страница оказалась непосредственно в интернете.. (До этого все изменения просматривала в том же приложении, где набирала код). И пришлось мне познать мир «доменов, хостинга, SSL-сертификатов».. 🙂 Спасибо терпеливым сотрудникам поддержки, смогли донести до меня всю необходимую информацию простым человеческим языком. ;)

После того как страница появилась в интернете в общем доступе, настало время «тестирования» ее моими друзьями и знакомыми. Мне было важно понять как она выглядит на разных устройствах. И тут поступило забавное замечание от одной знакомой программистки что «открывается сайт хорошо на всех устройствах, но вот при выводе на печать (!) страницы разбиваются».. А ведь я даже не задумывалась о такой функции, ведь никакой необходимости в ней вроде и нет.. И тут прям спортивный интерес появился, пришлось вновь «посоветоваться» с ИИ и решить эту «задачку». ;)

В общем сайт конечно ещё в разработке, информация обновляется по мере поступления (так называемые «записки» на скачки), видео из того что под рукой оказалось (2-ое, под названием «Приз Большой летний», искренне рекомендую к просмотру со звуком ;).

Буду рада всем посетителям, их оценкам и замечаниям. 🤗

Попробую выложить название сайта здесь, надеюсь это не запрещено..

www.lug-race.ru

Как стать «программистом» за две недели (или приключения профессиональной скрипачки в дебрях кода) Веб-разработка, HTML, Программист, Скрипач, Домашнее обучение, Длиннопост
Показать полностью 1
[моё] Веб-разработка HTML Программист Скрипач Домашнее обучение Длиннопост
42
0
Agmioli
Agmioli
1 месяц назад
Искусственный интеллект

Как с нуля, сгенерировать игру или приложение, состоящие из нескольких файлов. Для чайников!⁠⁠

Как с нуля, сгенерировать игру или приложение, состоящие из нескольких файлов. Для чайников! Искусственный интеллект, Нейронные сети, Gamedev, Unity, Приложение, Android разработка, Digital, Программа, Компьютерные игры, Программирование, Программное обеспечение, Python, Гайд, Лайфхак, Чат-бот, Разработка, HTML, Браузерные игры

Как с ноля, сгенерировать игру или приложение, состоящие из нескольких файлов. Для чайников.

Некоторые статьи по создание кода игр при помощи нейросетей, не учитывают один важный нюанс.
Большинство игр и программ для разных платформ, состоит не из одного файла или листа кода, а из нескольких файлов.

По умолчанию, нейросети при запросе, могут все сгенерировать весь код в одну кучу, не пояснив, какой коды куда вставлять.

Чтобы избежать сложностей и путаницы, достаточно в самом начале использовать важную команду, которая выглядит примерно так:
Напиши для каждого файла код игры которая будет запускаться с html-сайта. Суть игры следующая.....

Но если вы создаете игру не на базе html-страниц и сайта, то вместо фразы "которая будет запускаться с html-сайта", вам надо указать типа-платформу игры, или ее среду разработки.

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

ПРАКТИКА.
Вот полный пример запроса для нейросети, чтобы создать саму примитивную игру, которая запускается в виде веб-страницы в браузере.

ЗАПРОС:
Напиши для каждого файла код игры которая будет запускаться с html-сайта. Суть игры следующая.

Объект-игрок, вид которого задается файлом"image1", управляется при помощи клавиш. Клавиши-стрелки определяют направление стороны движения объекта-игрока.

В пространстве игры, рандомно расположены объекты-препятствия, внешний вид которых задается файлом "image2".

Если Объект-игрок задевает объекты-препятствия, то Объект-игрок отскакивает в сторону.

Фон игры задается файлом "image3".

Код созданный для каждого файла, полностью вставляете в текстовый редактор (например Блокнот), и сохраняете с тем названием и расширением, который указала нейросеть.

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

Что касается графический файлов - то их вы должны рисовать в нужном формате в графических редакторах, а потом аналогично размещать в директорию игры, так-же разузнав куда их поместить по аналогии с файлами кодов игры.

Показать полностью
[моё] Искусственный интеллект Нейронные сети Gamedev Unity Приложение Android разработка Digital Программа Компьютерные игры Программирование Программное обеспечение Python Гайд Лайфхак Чат-бот Разработка HTML Браузерные игры
1
Agmioli
Agmioli
1 месяц назад
Искусственный интеллект

Как создать уровни html-игры в визуальном редакторе, а код свойства объектов и сценария добавить из нейросети?⁠⁠

Как создать уровни html-игры в визуальном редакторе, а код свойства объектов и сценария добавить из нейросети? Искусственный интеллект, Нейронные сети, Создание сайта, Gamedev, Digital, Приложение, 2D, Браузерные игры, HTML, Чат-бот, ChatGPT, Нейросеть Grok

Как создать уровни браузерной-игры и разместить ее персонажей в визуальном редакторе, а код свойства объектов и сценария добавить из нейросети?

СИТУАЦИЯ.
Вам хочется создать простую браузерную игру, которая будет открываться при запуске файла 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, который запускает игру.

Показать полностью
[моё] Искусственный интеллект Нейронные сети Создание сайта Gamedev Digital Приложение 2D Браузерные игры HTML Чат-бот ChatGPT Нейросеть Grok
0
2
mars.frontier
mars.frontier
1 месяц назад

Как мы делали мини-игру про ровер на Марсе внутри 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
134
user5270234
user5270234
1 месяц назад

Я сделал веб-игру про рисование песком с 200 000 физических песчинок⁠⁠

Игра в браузере: https://alexander-dudarev.itch.io/sand-art

Sand Art – это симулятор творческой физической песочницы, в которой я постарался сделать реалистичное моделирование до 200 000 частиц песка.

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

1/4

Ключевые функции:

- Реалистичная физика песка с 200 000 динамическими частицами, создающими впечатление подлинного песка.

- Многослойная система частиц обеспечивает естественное взаимодействие между песчинками.

- Оптимизированный рендеринг WebGL для обеспечения бесперебойной работы на всех устройствах.

- Набор инструментов для творчества. Разнообразные инструменты взаимодействия, позволяющие манипулировать вашим песочным творением. Художественная настройка 7 уникальных форм кисти для разнообразного художественного выражения. Регулируемые размеры кистей для создания мелких деталей или широких мазков. Полная цветовая гамма для создания ярких разноцветных композиций.

Игра идеально подходит для снятия стресса, творческого самовыражения, арт-терапии.

Буду рад получить фидбэк. Что улучшить, чего добавить?

Показать полностью 4
[моё] Игры Компьютерные игры Видеоигра Веб-разработка Мобильные игры Приложение Рисование Процесс рисования 2D HTML Javascript Web Программирование Программист Программа Песок Творчество Креатив Видео Без звука Короткие видео
28
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии