Collision detection between circles using javascript DOM

I am programming a non-canvas game using HTML, CSS, and JS; for the collision detection between two circles I used the hypotenuse and the radii of the two circles.

As x variables I used the left CSS attribute, and for the y I used the top CSS attribute (I used % instead of px because it is supposed to be responsive). Somehow it doesn't work, and I cant seem to figure out what the problem is.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

food.style.top = random2 + "%";
food.style.left = random + "%";

// function for collision detection using pythagorean Theorem, if the distance between6 two circles is smaller than
// the sum of their radi than they are collidin
setInterval(function() {
  var playerX = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
  var foodX = parseInt(window.getComputedStyle(food).getPropertyValue("left"));
  var playerY = parseInt(window.getComputedStyle(player).getPropertyValue("top"));
  var foodY = parseInt(window.getComputedStyle(food).getPropertyValue("top"));
  var playerRadius = parseInt(window.getComputedStyle(player).getPropertyValue("width"));
  var foodRadius = parseInt(window.getComputedStyle(food).getPropertyValue("width"));

  var adjacent = Math.abs(playerY - foodY);
  var opposite = Math.abs(playerX - foodX);

  var hypotenuse = Math.sqrt(Math.pow(adjacent, 2) + Math.pow(opposite, 2));
  var sumRadius = playerRadius / 2 + foodRadius / 2;

  if (hypotenuse < sumRadius) {
    food.style.top = random + "%";
    food.style.left = random + "%";
    score = score + 50;
  }
}, 10);

<!-- language: lang-css -->

* {
  padding: 0;
  margin: 0;
}

body {
  background-color: antiquewhite;
}

#player {
  width: 10%;
  height: 20%;
  background-color: red;
  position: fixed;
  top: 35%;
  left: 35%;
  border-radius: 50%;
  z-index: 5;
}

#food {
  width: 5%;
  height: 10%;
  background-color: #ffd100;
  position: absolute;
  border-radius: 50%;
  top: 0%;
  left: 0%;
  z-index: -1;
}

<!-- language: lang-html -->

<div id="player">
  <!--  <img src="png-clipart-smiley-desktop-happiness-face-smiley-miscellaneous-face-thumbnail.png" id="image"> -->
</div>
<div id="food"></div>

<!-- end snippet -->

I tried playing around with the css attributes since i think the use of the % might be the issue.

Instead of computedStyle you can use getBoundingClientRect to find the position of a DOM element.

I also advise to use transform instead of left and top to position an element. You can use Math.hypot to get the distance directly.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const circle1 = document.querySelector("#circle1").getBoundingClientRect()
const circle2 = document.querySelector("#circle2").getBoundingClientRect()

const dx = circle1.x - circle2.x;
const dy = circle1.y - circle2.y;
const distance = Math.hypot(dx,dy);

if(distance < 100) {
	console.log("circles are touching")
}

<!-- language: lang-css -->

#circle1, #circle2 {
  width:100px;
  height:100px;
  position:absolute;
  border-radius:100%;
  background-color:blue;
}

#circle1 {
  transform:translate(10px, 20px);
}
#circle2 {
  transform:translate(30px, 50px);
}

<!-- language: lang-html -->

<div id="circle1">

</div>
<div id="circle2">

</div>

<!-- end snippet -->

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect