Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.01.2023, 22:05
Интересующийся
Отправить личное сообщение для Perepelenok Посмотреть профиль Найти все сообщения от Perepelenok
 
Регистрация: 16.07.2016
Сообщений: 26

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

Сслылка на кодпен - https://codepen.io/kotya_ra/pen/xxJLLqm
Ответить с цитированием
  #2 (permalink)  
Старый 16.01.2023, 23:24
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Считать координаты. Проверять на касание и пересечение ( добавить много геометрии)
Ответить с цитированием
  #3 (permalink)  
Старый 16.01.2023, 23:59
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Анимацию надо делать через requestAnimationFrame, а не через setInterval.

$(".dragscroll div.item.move").each(async function () {

Что у вас асинхронного в этой функции?

И я бы отказался от jquery. Он способствует неэффективному коду. Каждый раз писать $(this) вроде не трудно. Но это вызов функции. Каждый раз. Которая возвращает один и тот же результат. Зачем?
Почему не вызвать один раз и запомнить в переменную?
А еще эффективнее делать на чистом js.
Неужели
$(this).css("left")

сильно проще писать, чем
this.style.left

?
А
style = { "left": left + randomw + "px" };
            $(this).css(style);
            style = { "top": top + randomh + "px" };
            $(this).css(style);

лучше, чем
this.style.left = `${left+rendomw}px`;
this.style.top = `${top+rendomh}px`;


И работает быстрее, что не маловажно при анимации, особенно, когда будете считать геометрию.
Ответить с цитированием
  #4 (permalink)  
Старый 06.02.2023, 17:38
Интересующийся
Отправить личное сообщение для Perepelenok Посмотреть профиль Найти все сообщения от Perepelenok
 
Регистрация: 16.07.2016
Сообщений: 26

Сообщение от voraa Посмотреть сообщение
Анимацию надо делать через requestAnimationFrame, а не через setInterval.

$(".dragscroll div.item.move").each(async function () {

Что у вас асинхронного в этой функции?

И я бы отказался от jquery. Он способствует неэффективному коду. Каждый раз писать $(this) вроде не трудно. Но это вызов функции. Каждый раз. Которая возвращает один и тот же результат. Зачем?
Почему не вызвать один раз и запомнить в переменную?
А еще эффективнее делать на чистом js.
Неужели
$(this).css("left")

сильно проще писать, чем
this.style.left

?
А
style = { "left": left + randomw + "px" };
            $(this).css(style);
            style = { "top": top + randomh + "px" };
            $(this).css(style);

лучше, чем
this.style.left = `${left+rendomw}px`;
this.style.top = `${top+rendomh}px`;


И работает быстрее, что не маловажно при анимации, особенно, когда будете считать геометрию.
https://codepen.io/kotya_ra/pen/xxJLLqm

джиквери заменил, а вот как переписать setinterval на requestAnimationFrame не понимаю...

window.setInterval(function () {
        let min = -200, max = 200;
        parent.querySelectorAll('.item.move').forEach(item => {
            let randomw = Math.floor(Math.random() * (max - min + 1)) + min;
            let randomh = Math.floor(Math.random() * (max - min + 1)) + min;
            let left = parseInt(item.style.left);
            let top = parseInt(item.style.top);
            item.style.left = `${left + randomw}px`;
            item.style.top = `${top + randomh}px`;
        })
    }, 2000);


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

И еще вопрос - верное ли решение использование абсолютных left right для анимации, или же может лучше использовать translate2d, к примеру, что и как лучше использовать, с учетом того что я хочу еще считать геометрию для взаимодействия между картинками и экраном? Спасибо

Последний раз редактировалось Perepelenok, 06.02.2023 в 17:43.
Ответить с цитированием
  #5 (permalink)  
Старый 06.02.2023, 18:17
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Я не вижу у вас анимации. Просто каждые 2 сек элементы случайным образом меняют свое положение.
Анимация это все-таки плавное движение из точки в точку.
Надо для каждого элемента иметь его положение X,Y, скорость движения и направление Vx, Vy. Тогда можно рассчитывать и показывать перемещение элементов с той частотой, с которой экран может это выводить (обычно 60 кадров в сек).
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Найти количество эл.меньших ср.арифм.всех элементов и сортировка dakus Общие вопросы Javascript 7 06.06.2022 20:27
Массив из элементов другого массива, взятых в случайном порядке Basil_JS Общие вопросы Javascript 6 12.04.2015 13:07
запретить изменение количество элементов в списке Antistas jQuery 0 05.12.2012 14:05
Получить список ВСЕХ элементов DOM Почемучкин Events/DOM/Window 7 16.04.2012 11:33
Сгенерировать 2 последовательности и узнать сколько в них одинаковых элементов Ирина Владимировна Общие вопросы Javascript 10 24.03.2012 18:18