I have a character "div" being drawn and controlled by me, also an enemy "div" being generated on the right (moving left) at different locations along the Y axis. I am trying to detect when those two divs touch (based on there absolute position left) is this possbile? I have only come across examples using an array of divs or canvas.
function drawPlayer() {
  let player = document.createElement('div');
  player.id = 'char';
  player.classList.add('character');
  player.classList.add('pixelart');
  player.style.position = 'absolute';
  player.style.top = '50%';
  player.style.left = '50%';
  document.querySelector('.bg').appendChild(player);
  let playersprite = document.createElement('img');
  playersprite.src = './sprites/chars/spritesheet1.png';
  playersprite.style.height = '576px';
  playersprite.style.width = '384px';
  playersprite.id = 'mainchar';
  document.querySelector('#char').appendChild(playersprite);
}
function generateObstacles() {
  let randomTime = Math.random() * 4000;
  let obstaclePos = 100;
  const obstacle = document.createElement('div');
  obstacle.classList.add('character');
  obstacle.classList.add('pixelart');
  document.querySelector('.bg').appendChild(obstacle);
  let obsprite = document.createElement('img');
  obsprite.src = './sprites/chars/spritesheet1.png';
  obsprite.style.height = '576px';
  obsprite.style.width = '384px';
  obsprite.id = 'mainchar';
  obstacle.appendChild(obsprite);
  obstacle.style.left = obstaclePos + '%';
  obstacle.style.top = getRandomInt() + '%';
  let enemyhit = obstacle.style.left + '%';
  let hitbox = document.querySelector('.character');
  var charhit = hitbox.style.left + '%';
  let timerId = setInterval(function () {
  // where i think my issue is \/
    if (enemyhit == charhit) {
      clearInterval(timerId);
      console.log('gameover');
    }
    obstaclePos -= 1;
    obstacle.style.left = obstaclePos + '%';
    obsprite.classList.add('faceleft');
    obsprite.classList.add('animation');
  }, 100);
  setTimeout(generateObstacles, randomTime);
}
generateObstacles(); 
    