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

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

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

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

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

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

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

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

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

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

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

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:
ну и в html

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

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

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