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

Башня

Аркады, Строительство, На ловкость

Играть

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

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

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

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

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

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

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

Javascript

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

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

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

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

Все части: https://rutube.ru/plst/866666/

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

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

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

Все части: https://rutube.ru/plst/866666

IT Программирование Разработка Веб-разработка React Javascript Видео RUTUBE
0
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
maximz
maximz
4 месяца назад

Обычный день Frontend girl⁠⁠

Продолжаем, часть 3

YouTube IT Программирование Приложение Сайт Frontend React Javascript Ui Проект Видео
0
28
xco1D
4 месяца назад
Web-технологии

История о любопытстве и минусах⁠⁠

Всем привет!

Решил выглянуть из ридонли ради спортивного интереса.

Для ЛЛ - как отобразить минусы с помощью расширения Chrome и кода на JS + немного CSS. Установка в конце поста.

История о любопытстве и минусах Javascript, Минусы, CSS, Кривые руки, Google Chrome, Длиннопост

Так это выглядит

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

История о любопытстве и минусах Javascript, Минусы, CSS, Кривые руки, Google Chrome, Длиннопост

Консоль разработчика видит всё и даже больше

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

Инструмент, который я использовал (помимо того, что выдают при респауне) - User JavaScript and CSS из магазина Chrome.

История о любопытстве и минусах Javascript, Минусы, CSS, Кривые руки, Google Chrome, Длиннопост

Герой дня

На самом деле, использовать можно и что-то иное, тут каждый волен действовать как хочет.

  • Первая версия появилась на свет на зачатках знаний по JS и мастерстве гугления (Insert google meme here)

Забрать код можно тут: https://justpaste.it/gdvjm

Сначала всё это работало только после загрузки страницы и после прокрутки у новых постов не было минусов. Немного гугления и было найдено обновление по интервалу и обработчик прокрутки (его я и использовал)

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

Тогда я обратился на тёмную сторону решил воспользоваться знаниями нейросети и появилась вторая версия с обработкой каждого поста отдельно при начальной загрузке страницы и событии подгрузки постов.

  • Вторая версия. Помимо нововведений в части JS, чуть изменил добавление контейнера для минусов, назначил класс и чуть причесал CSS.

Забирать тут: https://justpaste.it/itxj8

Установка

Использовать всё это предельно просто:

  1. Найти расширение в магазине - User JavaScript and CSS

  2. После скачивания заходим в chrome://extensions/ и активируем режим разработчика. Это требуется для доступа расширения к изменению содержимого сайтов;

  3. В настройках расширения нужно добавить сайт как на скрине - https://pikabu.ru/*

  4. Cоответственно пунктам 1 и 2 - JavaScript (JS) и CSS. Переходите по ссылкам на первую или вторую версию и копируйте весь текст между разделителями в виде знаков "=": ==========================================

История о любопытстве и минусах Javascript, Минусы, CSS, Кривые руки, Google Chrome, Длиннопост

Окно настроек расширения

При большом желании можно упаковать всё в расширение и опубликовать в магазине, но до этого я не дошёл (а также 5$ за регистрацию - это 5$)

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


P.S. Код кривее некуда, об этом я догадываюсь. JS я не знаю и без сомнений, маэстро JS'a и CSS могут сделать более красивый и правильный вариант. Потому, за конструктивную критику и предложения по улучшению заранее благодарен! :)

P.P.S. Если пост нарушает какие-то правила, сообщите, пожалуйста. Что-то по теме сабжа ничего не нашёл.

Показать полностью 3
[моё] Javascript Минусы CSS Кривые руки Google Chrome Длиннопост
5
ITProsto
ITProsto
4 месяца назад

Как сделать переключение темы на JavaS?⁠⁠

Программирование IT Javascript Видео Вертикальное видео Короткие видео
0
Партнёрский материал Реклама
specials
specials

Считаете себя киноманом 80 LVL?⁠⁠

Залетайте проверить память и сообразительность → Будет интересно

Киногерои Тест Текст
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
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии