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

Пикман

Аркады, На ловкость, 2D

Играть

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

  • AlexKud AlexKud 38 постов
  • SergeyKorsun SergeyKorsun 12 постов
  • SupportHuaport SupportHuaport 5 постов
Посмотреть весь топ

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

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

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

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

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

Javascript + Разработка

С этим тегом используют

Программирование IT HTML IT юмор Программист Frontend CSS Gamedev Инди игра Инди Игры Unity Все
136 постов сначала свежее
user9029875
4 месяца назад

Интрнет магазин на Next.js 14, React, tRPC, Tailwind | Полный курс 2023 г. Часть 2 из 4⁠⁠

В этом видео мы создаем целую современную торговую площадку для цифровой коммерции от начала до конца.

IT Программирование Разработка Веб-разработка React Javascript Видео RUTUBE
0
user9029875
4 месяца назад

Интрнет магазин на Next.js 14, React, tRPC, Tailwind | Полный курс 2023 г. Часть 1 из 4⁠⁠

В этом видео мы создаем целую современную торговую площадку для цифровой коммерции от начала до конца.

Программирование IT Разработка Веб-разработка React Javascript Видео RUTUBE
0
8
lineage2js
lineage2js
5 месяцев назад
ИТ-проекты пикабушников

Как я синхронизировал скорость персонажа на сервере в Lineage 2 на Node.js⁠⁠

Как я синхронизировал скорость персонажа на сервере в Lineage 2 на Node.js Программирование, Разработка, Lineage 2, Javascript, Nodejs, Гифка, Длиннопост

Привет.

Я разрабатываю эмулятор сервера для Lineage 2 Chronicle 1: Harbingers of war на Node.js.

Столкнулся с проблемой синхронизации скорости персонажа на сервере с клиентом. Когда в игре вы нажимаете мышкой в то место, куда хотите перейти то происходит плавный переход с анимацией движения. На сервере в этот момент тоже происходит движение по таймеру, но не такое плавное.

Как я синхронизировал скорость персонажа на сервере в Lineage 2 на Node.js Программирование, Разработка, Lineage 2, Javascript, Nodejs, Гифка, Длиннопост
Как я синхронизировал скорость персонажа на сервере в Lineage 2 на Node.js Программирование, Разработка, Lineage 2, Javascript, Nodejs, Гифка, Длиннопост

C(client) – двигается плавно из одной точки в другую. S(server) – делает прирост координат по таймеру.

Для примера я взял сборку написанную на java l2j-lisvus Сборок много. Но все они являются fork’ами проекта l2jserver https://l2jserver.com/И многое наследуется. В том числе и передвижение персонажа.

В l2j-lisvus, как и во всех сборках l2jserver перемещение персонажа на сервере идет при помощи таймера с приростом одинаковых значений.

Проблема проявляется, когда нам надо сделать какое-то действие после того, как персонаж добежал до пункта назначения. Например, нанести удар по NPC.

Как я синхронизировал скорость персонажа на сервере в Lineage 2 на Node.js Программирование, Разработка, Lineage 2, Javascript, Nodejs, Гифка, Длиннопост

На коротких расстояниях проблема незаметна. Нога наступает точно в монету.

Как я синхронизировал скорость персонажа на сервере в Lineage 2 на Node.js Программирование, Разработка, Lineage 2, Javascript, Nodejs, Гифка, Длиннопост

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

Как я синхронизировал скорость персонажа на сервере в Lineage 2 на Node.js Программирование, Разработка, Lineage 2, Javascript, Nodejs, Гифка, Длиннопост

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

Как работает передвижение персонажа на сервере.

За основу взяты базовые характеристики персонажа. Скорость бега 126.

Как я синхронизировал скорость персонажа на сервере в Lineage 2 на Node.js Программирование, Разработка, Lineage 2, Javascript, Nodejs, Гифка, Длиннопост

126 — это количество внутренних unit’ов за секунду.

На данной схеме идет прирост координат персонажа каждые 1000мс на 126 unit’ов. Исходя из схемы выше пример кода для действий персонажем после достижения пункта назначения:

// Прироста координат нет. Просто считаем когда персонаж дойдет до конечных координат.
const distance = 1500;
const playerSpeed = 126;
const ticks = distance / playerSpeed; // 11.90
const time = ticks * 1000; // 11900mc

setTimeout(() => {
// действие персонажа после бега
}, time);

Как я синхронизировал скорость персонажа на сервере в Lineage 2 на Node.js Программирование, Разработка, Lineage 2, Javascript, Nodejs, Гифка, Длиннопост

На коротких расстояниях.

Как я синхронизировал скорость персонажа на сервере в Lineage 2 на Node.js Программирование, Разработка, Lineage 2, Javascript, Nodejs, Гифка, Длиннопост

На длинных расстояниях.

Как я синхронизировал скорость персонажа на сервере в Lineage 2 на Node.js Программирование, Разработка, Lineage 2, Javascript, Nodejs, Гифка, Длиннопост

Расхождения на коротких расстояниях.

Как я синхронизировал скорость персонажа на сервере в Lineage 2 на Node.js Программирование, Разработка, Lineage 2, Javascript, Nodejs, Гифка, Длиннопост

Расхождения на длинных расстояниях.

Зеленой зоной показана точка куда должна ступить нога персонажа если бы не было расхождений.

Рост скорости при развитии персонажа.

126 — это базовая скорость. И по мере развития персонажа будет расти и скорость передвижения. А значит расхождение будет больше. Но перед тем, как создать формулу надо подтвердить теорию, что скорость ходьбы влияет на расхождение.

Данные о характеристиках персонажа передаются от сервера к клиенту.

Пакет UserInfo.js 83 строчка.

writeD(player.runSpeed);
writeD(player.walkSpeed);

Базовые значения:

runSpeed: 126

walkSpeed: 88

Выставляю значения walkSpeed: 126. Если скорость ходьбы будет равна скорости бега, то расхождения должны пропасть.

Как я синхронизировал скорость персонажа на сервере в Lineage 2 на Node.js Программирование, Разработка, Lineage 2, Javascript, Nodejs, Гифка, Длиннопост
Как я синхронизировал скорость персонажа на сервере в Lineage 2 на Node.js Программирование, Разработка, Lineage 2, Javascript, Nodejs, Гифка, Длиннопост

Нога персонажа достигает правильной конечной точки.

Персонаж синхронизирован и начинает атаку вовремя. Теперь надо понять, как скорость ходьбы влияет на расхождения между клиентом и сервером.

Сколько же персонаж успевает пройти перед тем, как начинает бежать?

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

runSpeed: 10

walkSpeed: 600

Как я синхронизировал скорость персонажа на сервере в Lineage 2 на Node.js Программирование, Разработка, Lineage 2, Javascript, Nodejs, Гифка, Длиннопост

Ходьба быстрее бега.

При скорости шага в 600 персонаж успевает пройти 250, прежде чем начинает бежать.

600 / 250 = 2.4

700 / 291 = 2.4

800 / 333 = 2.4

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

Значит при скорости ходьбы 88 персонаж пройдет 36 unit’ов.

88 / 2.4 = 36

Как я синхронизировал скорость персонажа на сервере в Lineage 2 на Node.js Программирование, Разработка, Lineage 2, Javascript, Nodejs, Гифка, Длиннопост

Первое деление — это начало движения (ходьба) а следующие деления — это бег.

Решение

Формула для расчета времени:

сколько_прошли_на_старте = скорость_ходьбы / 2.4

(((дистанция_между_нпц_и_игроком - сколько_прошли_на_старте) / скорость_бега) * 1000мс) + время_которое_прошли

Для примера дистанция 1500.

Из них мы 36 прошли.

1500 - 36 = 1464 расстояние для бега.

Скорость бега 126 в секунду.

1464 / 126 = 11.61 (количество отрезков, которое мы пройдем за секунду).

11.61 * 1000 = 11610мс бега.

к 11610 надо прибавить время ходьбы

Скорость ходьбы 88 в секунду.

1000 / 88 = 11.36мс за 1 unit

36 unit * 11.36мс = 408мс

11610 + 408 = 12018мс

12018мс является точным временем от начала старта и до конца.

Сравниваем со старым временем 11900мс. Разница в 118мс.

setTimeout(() => {
player.attack(npc);
}, 12018);

Как я синхронизировал скорость персонажа на сервере в Lineage 2 на Node.js Программирование, Разработка, Lineage 2, Javascript, Nodejs, Гифка, Длиннопост

Скорость бега 126.

Как я синхронизировал скорость персонажа на сервере в Lineage 2 на Node.js Программирование, Разработка, Lineage 2, Javascript, Nodejs, Гифка, Длиннопост

Скорость бега 900.

Как я синхронизировал скорость персонажа на сервере в Lineage 2 на Node.js Программирование, Разработка, Lineage 2, Javascript, Nodejs, Гифка, Длиннопост

Положение ноги при скорости 126.

Как я синхронизировал скорость персонажа на сервере в Lineage 2 на Node.js Программирование, Разработка, Lineage 2, Javascript, Nodejs, Гифка, Длиннопост

Положение ноги при скорости 900.

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

Ссылка на проект: https://github.com/lineage2js

Ссылка на блог: https://t.me/lineage2js

Показать полностью 19
[моё] Программирование Разработка Lineage 2 Javascript Nodejs Гифка Длиннопост
6
12
lineage2js
lineage2js
5 месяцев назад
ИТ-проекты пикабушников

Все оружие в Lineage 2 C1 за 1 минуту⁠⁠

Привет.

Занимаюсь разработкой сервера для Lineage 2 C1 на JavaScript(Node.js). Копался в клиенте игры и решил сделать перебор всего оружия для теста.

Ссылка на проект: https://github.com/lineage2js

Ссылка на блог: https://t.me/lineage2js

Показать полностью
[моё] Программирование Разработка Lineage 2 Javascript Nodejs Видео Вертикальное видео Короткие видео Игры
16
60
Lepenson
Lepenson
5 месяцев назад
Истории из жизни

Коммуникология⁠⁠

Решил я тут интереса ради походить на халявный онлайн-интенсив по JavaScript от одной рекрутингово-айтишной компании. "Лишним не будет", — решило моё воспалённое сознание. Но, как оказалось, воспаляться люблю не только я.

Мы довольно мило пообщались с ботом курсов в Telegram (это важно!). Потом — не менее мило — с эйчаром. Тоже в Telegram. Потом я прошёл какой-то простенький тест. Всё ещё в Telegram. Потом со мной захотел пообщаться "технический специалист". Внезапно в Skype. Якобы потому что голосом. Минутка недоумения.

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

Но время шло. Шло. Шло. Я в какой-то момент уже и забыл об этих странных курсах: увлёкся и погрузился в совсем другие вещи... Пока сегодня мне не пришло сердитое сообщение — да, конечно же, в Telegram:

— Lepenson, добрый день. Вы не посещаете лекции и не выполняете ДЗ на интенсиве JS. Вынуждены приостановить ваше обучение. Будем рады видеть вас в числе своих студентов в будущем!

Я малость подофигел и решил уточнить:

— Добрый день. Прошу прощения, а интенсив уже запущен? Никто и ни в какой форме не уведомил меня, что он уже идёт. Более того, никто и ни в какой форме не дал мне понять, что я отобран для участия в программе. Спасибо, что хоть сейчас сообщили.

В процессе беседы выяснилось, что товарищи якобы всё это время писали мне трепетные признания в любви... Но в Skype. В том самом Skype, которым воспользовались один (!) раз за всё время нашего общения. Который я больше не запускал с того самого дня. К слову, вот только что открыл — а список уведомлений пуст. "Сдаётся мне, всё таки Коля пиздит..." (с)

В общем, как-то уже и не тянет учиться у людей, которые даже пайплайн отбора отладить толком не могут.

Показать полностью
[моё] Истории из жизни IT Разработка Курсы Онлайн-курсы Отбор Общение Работа HR Отдел кадров Тестирование Собеседование Javascript Skype Telegram Глупость Путаница Мат Текст
12
2
cherkalexander
cherkalexander
6 месяцев назад

Всего несколько строк CSS для плавных переходов между страницами⁠⁠

Я давно не рекомендовал ничего почитать, но эта короткая статья не оставила меня равнодушным.

"Всего несколько строк CSS для плавных переходов между страницами"

  • перевод на хабре

  • оригинал

Я много раз слышал, про View Transitions API и о том, что теперь можно настраивать анимации перехода между страницами, но никогда не пробовал.

В статье автор предлагает сделать переходы между страницами плавными с помощью одной строчки кода.

@View-transition { navigation: auto; }

Чтобы понять о чём говорит автор просто посмотрите прикреплённое видео:

  • или откройте оригинал статьи и воспроизведите видео

  • или же откройте мой блог и попробуйте перейти на одну из последних статей

В SPA приложениях также есть возможность использовать View Transitions API. Можете посмотреть демки в статье: "Введение в View Transitions API".  Анимация реализуется с помощью startViewTransition

document.startViewTransition(() => updateTheDOMSomehow());

При использовании View Transitions API происходит следующее:

  • делается снимок текущего состояния страницы

  • выполняется обновление DOM (updateTheDOMSomehow)

  • делается снимок нового состояния страницы

  • переход между этими состояниями анимируется с помощью дефолтного плавного затухания или с помощью кастомной анимации

Более сложные примеры  можно узнать отсюда:

  • The View Transitions API And Delightful UI Animations (Part 1)

  • The View Transitions API And Delightful UI Animations (Part 2)

  • Никита Дубко. По-настоящему красивые переходы средствами браузера

Для блогов на Astro:

  • Документация View Transitions в доке Astro

  • Как починить темную и светлую темы после внедрения view transitions — читать тут

Показать полностью
Программирование CSS HTML Javascript IT Разработка Видео Без звука
1
3
linoles
linoles
6 месяцев назад

Поисковые запросы...⁠⁠

Поисковые запросы...
[моё] IT Программист Next Javascript Framework Веб фреймворки Разработка IT юмор Мемы Юмор
2

Оформить подписку для бизнеса

Перейти
Партнёрский материал Реклама
specials
specials

Ваш бизнес заслуживает большего!⁠⁠

Оформляйте подписку Пикабу+ и получайте максимум возможностей:

Ваш бизнес заслуживает большего! Малый бизнес, Предпринимательство, Бизнес

О ПОДПИСКЕ

Малый бизнес Предпринимательство Бизнес
Блог компании
kata.academy
kata.academy
6 месяцев назад
Лига программистов

Как поладить с JavaScript: советы от начинающего кодера⁠⁠

Быть новичком в IT непросто. К счастью, сообщество разработчиков всегда готово прийти на помощь. Мы попросили начинающего кодера Анну поделиться своими наблюдениями и лайфхаками по изучению языка Java Script.

Как поладить с JavaScript: советы от начинающего кодера Обучение, Учеба, Карьера, Программирование, Javascript, Разработка, IT, Совет, Длиннопост, Блоги компаний

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

Сразу пишите код

Даже несложные задачи вроде вывода текста в консоль постепенно приучают к работе с кодом. Универсальный вариант — учебник JavaScript на learn.javascript. Здесь после каждого урока есть упражнения. А еще с практикой вам помогут сайты-задачники Codewars и LeetCode.

Развивайте навык функционального чтения

Зазубривание теории не научит мыслить как разработчик. Учитесь категоризировать информацию, разбивать ее на части, выделять в них главное и запоминать это. Такой подход поможет сохранить в памяти самое важное из теории. А все остальное всегда можно посмотреть в интернете.

Подружитесь с ошибками

В любом деле ошибки — это нормально. А в нашем — даже хорошо. Они показывают, что именно работает не так в программе. Например, SyntaxError говорит о проблеме в синтаксисе кода вроде коварной пропущенной запятой или закрывающей скобки. Поэтому важно не только побороть огорчение при встрече с ошибками, но и разобраться в их типах.

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

Структурируйте свое обучение

Составьте подробный план: начните с основ JavaScript, затем изучите DOM, работу с API и фреймворки. Разбейте обучение на этапы, чтобы не перегружать себя. Главное — двигаться шаг за шагом, не пропуская практику. С этим поможет курс frontend-разработки на JavaScript от Kata Academy. Программа включает все для старта в IT и получения профессии. А оплатить обучение можно после трудоустройства.

Учитесь искать информацию

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

Или воспользуйтесь туториалами от разработчиков с форума Stack Overflow. Но сначала их нужно отыскать. Формулируйте запрос четко: указывайте язык, технологию и текст ошибки. Не «ошибка 'x' undefined, что делать», а «JavaScript TypeError: Cannot read property 'x' of undefined». И разбирайтесь в найденном. Копирование кода без понимания только замедлит обучение.

Учитесь читать документацию

Этот навык особенно пригодится в дальнейшем при работе с фреймворками. А для основной документации JavaScript есть удобная энциклопедия MDN Web Docs. Например, вам интересен принцип работы метода array.map(). Заходим на MDN и получаем: подробное описание метода, синтаксис, примеры использования, а также пояснения, какие типы данных он принимает и что возвращает.

Выбирайте обучающие видео с умом

Не пытайтесь сразу вникнуть в материалы вроде «Пишем интернет-магазин с нуля на JavaScript с фреймворками React & Node.JS». На первых порах эти видео напугали меня обилием информации. Всему свое время — начните с курсов, где достаточно внимания уделяют базовым понятиям. Такие материалы есть на каналах вроде itProger или Bogdan Stashchuk. А если понимаете, что самостоятельно не справитесь, начните учиться в школе программирования.

Помните: любая задача решаема

В программировании ошибки и тупики — естественная часть процесса. Не опускайте руки, если что-то не получается сразу. Я сама много раз думала, что ситуация безнадежна, и мне не стать программистом. JavaScript — гибкий язык, и часто одну задачу можно решить разными способами. Ищите обходные пути и экспериментируйте.


Начните изучение JavaScript в Kata Academy. Мы поможем вам приобрести и структурировать знания, получить практический опыт, собрать первое портфолио. А наши менторы всегда подскажут верное направление, если что-то будет непонятно.

УЗНАТЬ ПРО ПОСТОПЛАТУ

Реклама ООО «Ката Академия», ИНН: 7802925162

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