0

I'm trying to find out when 2 images collide in a game I made, but I've been receiving conflicting advice and I'm not exactly sure how to get any of the solutions to work (as all of them result in errors, and the collision results as null)

here are the two options I've been trying to solve (any solution works really, I'm just stumped and can't seem to get it to work regardless of what I try).

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

if anyone could help, I could really appreciate it. Or, if you have another solution for collision detection with 2 rectangular images. Thanks!

Mario Petrovic
  • 7,500
  • 14
  • 42
  • 62
cal
  • 3
  • 1
  • the images you are detecting for collision are dynamic right meaning they move around space? Then you're gonna need to set interval on the ```trackXY()``` function plus use getBoundingClientRect() on each element and check if they overlap that way it's easier. I'm assuming you are working with 2d objects because of your code. – seriously Jan 17 '22 at 00:07
  • @seriously you may want to read [Why is requestAnimationFrame better than setInterval or setTimeout](https://stackoverflow.com/questions/38709923/why-is-requestanimationframe-better-than-setinterval-or-settimeout) before recommending `setInterval` for animations. Also, it's probably faster to keep explicit state in JS rather than call `getBoundingClientRect()` on every frame, which is expensive. `getComputedStyle()` also feels like the wrong way to store state for this use case as well. – ggorlen Jan 17 '22 at 00:19
  • 1
    @ggorlen I suggested setInterval because the current method she is using will only get the required data once. Plus she didn't mention any animations just 2 images and check if they collide I'm guessing performance is not her goal here. But the suggested link was really helpful. – seriously Jan 17 '22 at 00:35

0 Answers0