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();