Функция checkCollision не работает в Array.forEach (проверка элементов столкновения)

Question

почему моя функция checkCollision не работает в foreach l oop? Я хочу проверить, является ли obs (препятствие) попаданием / перекрытием на коллекторе (серый объект). Я проверяю каждую 1 миллисекунду, используя функцию setInterval checkCollision. В основном я пытаюсь построить простую автомобильную игру. Пожалуйста, помогите мне и спасибо заранее

let body = document.body[0];
let container = document.querySelector(".container");
let allObstacles = [];
let colors = ["green", "green", "red"];
let collector = document.getElementById("collector");


class Obstacle {
  constructor(yPos) {
    this.yPos = -50;
  }
  randomnum() {
    let randX = Math.floor(Math.random() * (container.clientWidth - 50));
    return randX;
  }
  createObstacle() {
    let obstacle = document.createElement("div");
    obstacle.classList.add("obstacle");
    let bgColor = colors[Math.floor(Math.random() * colors.length)];
    obstacle.style.width = "50px";
    obstacle.style.height = "50px";
    obstacle.style.position = "absolute";
    obstacle.style.left = this.randomnum() + "px";
    obstacle.style.top = this.yPos + "px";
    obstacle.style.backgroundColor = bgColor;
    obstacle.dataset.behave = bgColor;
    container.appendChild(obstacle);
    return obstacle;
  }
  element = this.createObstacle();
  updatePosition() {
    this.yPos += 2;
    this.element.style.top = this.yPos + "px";
  }
  kill() {
    this.element.remove();
  }
}

let dropObs = setInterval(function() {
  allObstacles.forEach(function(obs) {
    obs.updatePosition();
  });
  allObstacles.forEach(function(obs) {
    // why checkCollision function is not working?
    if (checkCollision(obs, collector)) {
      console.log("hit");
    }
    if (obs.yPos > container.clientHeight) {
      obs.kill();
    }
  });
}, 10);

let generateObs = setInterval(function() {
  let obs = new Obstacle();
  allObstacles.push(obs);
}, 2000);

function checkCollision(obj1, obj2) {
  var obj1Y = obj1.offsetTop;
  var obj2Y = obj2.offsetTop;
  var obj1X = obj1.offsetLeft;
  var obj2X = obj2.offsetLeft;
  if (
    obj2Y + 100 >= obj1Y &&
    obj2Y <= obj1Y + 100 &&
    obj2X + 100 >= obj1X &&
    obj2X <= obj1X + 100
  ) {
    return 1;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

#collector {
  width: 50px;
  height: 100px;
  background: gray;
  position: absolute;
  top: calc(100vh - 100px);
  left: 50%;
  margin-left: -25px;
}

<div class="container">
  <div id="collector"></div>
</div>

Answer 1

Первое, что вы не должны использовать setInterval для этого типа анимации. Используйте requestAnimationFrame

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

obj1X,obj1Y пришествие не определено.