Estoy tratando de averiguar cuándo colisionan 2 imágenes en un juego que hice, pero he estado recibiendo consejos contradictorios y no estoy exactamente seguro de cómo hacer que funcione ninguna de las soluciones (ya que todas dan como resultado errores, y la colisión resulta nula)

aquí están las dos opciones que he estado tratando de resolver (cualquier solución funciona realmente, estoy perplejo y parece que no puedo hacer que funcione independientemente de lo que intente).

 // first option function trackXY() { for (let i = 0; i < 2; i++) { let playerrr = document.getElementById('moveAva'); let pikaTest = document.getElementById('pikaLocation' + i); let playHeight = window .getComputedStyle(playerrr) .getPropertyValue('height'); let playWidth = window.getComputedStyle(playerrr).getPropertyValue('width'); let playLeft = window.getComputedStyle(playerrr).getPropertyValue('left'); let playTop = window.getComputedStyle(playerrr).getPropertyValue('top'); let pokeHeight = window .getComputedStyle(pikaTest) .getPropertyValue('height'); let pokeWidth = window.getComputedStyle(pikaTest).getPropertyValue('width'); let pokeLeft = window.getComputedStyle(pikaTest).getPropertyValue('left'); let pokeTop = window.getComputedStyle(pikaTest).getPropertyValue('top'); let xPlayer = parseInt(playLeft + 0.5 * playWidth); let yPlayer = parseInt(playTop + 0.5 * playHeight); let xEnemy = parseInt(pokeLeft + 0.5 * pokeWidth); let yEnemy = parseInt(pokeTop + 0.5 * pokeHeight); let rPlayer = 0.5 * parseInt(playHeight); let rEnemy = 0.5 * parseInt(pokeHeight); let dX = xEnemy - xPlayer; let dY = yEnemy - yPlayer; let distance = Math.sqrt(dX * dX + dY * dY); if (distance <= rEnemy + rPlayer) { alert('collison!'); playHeight = parseInt(playHeight) + 0.5 * parseInt(pokeHeight); document.getElementById('pikaInvent').style.display = 'block'; document.getElementById('pikaWon').style.display = 'block'; } } } //second option function trackXY() { for (let i = 0; i < 1; i++) { let playerrr = document.getElementById('moveAva'); let pikaTest = document.getElementById('pikaLocation' + i); let xPlayer = parseInt(playerrr.style.left + 0.5 * playerrr.style.width); let yPlayer = parseInt(playerrr.style.top + 0.5 * playerrr.style.height); let xEnemy = parseInt(pikaTest.style.left + 0.5 * pikaTest.style.width); let yEnemy = parseInt(pikaTest.style.top + 0.5 * pikaTest.style.height); let rPlayer = 0.5 * parseInt(playerrr.style.height); let rEnemy = 0.5 * parseInt(pikaTest.style.height); let dX = xEnemy - xPlayer; let dY = yEnemy - yPlayer; let distance = Math.sqrt(dX * dX + dY * dY); if (distance <= rEnemy + rPlayer) { alert('collison!' + enemy.id); } } } trackXY();

si alguien pudiera ayudar, realmente podría apreciarlo. O, si tiene otra solución para la detección de colisiones con 2 imágenes rectangulares. ¡Gracias!