евенты типа overlap, overlay, коллизии

[HappyLama]

здравствуйте, я новичок в js, и не совсем понимаю, как это сделать, хотя вроде звучит просто.

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

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

Знаю про синтаксис кастом эвентов, и все равно здесь туплю. И нет ли аналога из дефолтных эвентов? Спасибо.

[voraa]

Это не событие.
Отследить - брать getBoundingClientRect() от элементов и смотреть на их пересечение.

[HappyLama]

Это не событие.
Отследить - брать getBoundingClientRect() от элементов и смотреть на их пересечение.

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

[voraa]

Кастомное событие само по себе не возникнет. Его надо вручную инициировать через dispatchEvent. Что бы знать, когда инициировать надо считать пересечения.
Причем dispatchEvent работает синхронно. Событие не ставится в очередь, обработчик срабатывает сразу, как при обычном вызове функции.

[HappyLama]

Кастомное событие само по себе не возникнет. Его надо вручную инициировать через dispatchEvent. Что бы знать, когда инициировать надо считать пересечения.

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

[Rise]

HappyLama,
А что за анимации у вас?

[HappyLama]

HappyLama,
А что за анимации у вас?

Элемент при нажатии стрелок двигается по инерции бесконечно, через стрелки ему можно менять направление, и в этом направлении он продолжает двигаться бесконечно

код не мой, просто тренируюсь на нем для самообучения. В этом коде мне все понятно

const elem = document.getElementById('elem')

const coords = {
  x: innerWidth / 2,
  y: innerHeight / 2,
  vx: 0,
  vy: 0,
  
}

onkeydown = handleMovement

animate()

function animate() {
  coords.x += coords.vx
  coords.y += coords.vy
  render()


  requestAnimationFrame(animate)
}

function render() {
  elem.style = `left: ${coords.x}px; top: ${coords.y}px`

}



function handleMovement(e) {
  switch (e.key) {
    case 'ArrowUp':
      coords.vy = -2
      coords.vx = 0
      break
    case 'ArrowDown':
      coords.vy = 2
      coords.vx = 0
      break
    case 'ArrowLeft':
      coords.vx = -2
      coords.vy = 0
      break
    case 'ArrowRight':
      coords.vx = 2
      coords.vy = 0
      break
    default:
      coords.vx = 0
      coords.vy = 0
      resetIfOut()
  }
}

function resetIfOut() {
  if (coords.x < 0 || coords.y < 0 || coords.x > innerWidth || coords.y > innerHeight) {
    coords.x = innerWidth / 2
    coords.y = innerHeight / 2
  }
}

в css:

 #elem {
    position: absolute;
  }

ну и в html

 <p id="elem">moving text</p>

[Rise]

HappyLama,
Можно Intersection Observer API попробовать, но есть нюанс - элементы должны быть вложены один в другой. И только один элемент будет двигаться в такой конструкции, остальные будут неподвижны, в контексте вашего примера.

[HappyLama]

HappyLama,
Можно Intersection Observer API попробовать, но есть нюанс - элементы должны быть вложены один в другой. И только один элемент будет двигаться в такой конструкции, остальные будут неподвижны, в контексте вашего примера.

спасибо, интересная ссылка, учту ее на будущее, сейчас хотя бы начальный уровень js доучить (мне казалось, что и про оверлеи - начальный, но нет, разве что каждый фрейм сверять координаты)

[voraa]

Вы немного неправильно используете requestAnimationFrame для анимации. requestAnimationFrame вызывается примерно 60 раз/ сек. Если браузер ничем особо не занят. А если занят какой другой проблемой, то может и реже. Интервалы между вызовами не обязательно постоянны. Но в callback функцию она передает время вызова (от некоего начала работы страницы). Зная (запомненное) время предыдущего вызова и время текущего, можно определить время между вызовами. Это необходимо, т.к. если вы постоянно будете прибавлять 2рх к координатам, до движение будет рывками. Ведь если вы прибавили 2, когда интервал был 16 мс, то для 24 мс надо уже прибавлять 3, что бы движение было равномерным.