Соединение границ движущегося и статичного объекта

Вопрос-ответ JavaScript
1

Есть задача, где на игровом поле находится статический блок (с фиксированным положением left и top) и блок, который на него движется. В момент касания движущегося блока (когда левая граница статичного и правая граница движущегося прикасаются) - этот статичный блок должен поменять цвет.
Пример https://jsfiddle.net/LenaR/dvaqn9rp/1/
Но условие не выполняется и ошибок в консоли нет.

P.S. Если сравнивать в условии только левые границы блоков:

if(staticBlock.style.left == movingBlock.style.left)

тогда в консоли выдает ошибку при загрузке страницы movingBlock is not defined
Почему не определяет границу движущегося div-а?
Как правильно определять эти границы?

2

Интересная задачка.

У вас анимация происходит на CSS3, а какой-то эффект вы хотите применить на JS. При том, что проверка у вас не привязана никак по времени к происходящему. К тому же style.left ничего не возвращают.

function Touch() {
      var staticBlock = document.querySelector('.block');
      var movingBlock = document.querySelector('.moving');

      setInterval(function () {
         var movingBlockRect = movingBlock.getBoundingClientRect();
         var staticBlockRect = staticBlock.getBoundingClientRect();

        if (movingBlockRect.x + movingBlockRect.width >= staticBlockRect.x) {
    		  staticBlock.style.background = "green";
        }
      }, 100);
}

Touch();

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

Скорее всего здесь нужен подход на основе requestAnimationFrame: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

3

Спасибо за подсказку! Но здесь функция срабатывает, когда движущийся блок достигает левой границы монитора на которой расположен статичный блок, даже если этот блок будет находится вне их касания (например, выше - https://jsfiddle.net/dvaqn9rp/3/). Как можно сделать так, чтобы статичный блок реагировал только на касания движущегося? Наверное, еще функцию дописывать, что если нижняя, правая и верхняя границы не совпадают - тогда условие отменять? Но это будет слишком много кода.

requestAnimationFrame - хороший пример, спасибо. Это вместо css-анимации? То-есть, лучше не использовать css анимацию и js вместе, чтобы потом написать условие на js под эту анимацию?

4

CSS и JS анимацию вы никогда не сможете сопоставить. Если это игра или задуманный набор анимаций, лучше использовать JS. CSS — только для визуального оформления чего-то заведомо законченного.

Определение касание — это и будет много кода проверить оси x & y на сопоставимость. Никак по другому. Как в математике (геометрии) вы определите пересекаемость объектов? Здесь тоже самое. Если вы хотите одну функцию которая скажет true/false на пересекаемость объектов, то ее тоже придется либо написать, либо нагуглить в интернете уверен такое делали не один раз.