0

i have and object with X;Y coordinates of a green circle, radius const =5. name "Food". 50 objects with random placement around the canvas.

I have and object with X;Y coordinates of a red circle, radius const =8. name "player".

I have X;Y array of coordinates going x,y 50 times (100 cords), name "allFood". with all of the "food" objects

i need to check for collision between food and player on canvas and add scoreboard. I made a workable piece of code:

    for (let i = 0; i < 100; i=i+2){
        if ((player.x == allFood[i]) && player.y ==(allFood[i+1])){
            scoreboard=scoreboard+1
            score.innerHTML = scoreboard
        }
    }

But it checks only if player centre of circle and food centre of circle are pinpoint accurate on the same pixel, which is very annoying. Could anyone help improve the code so its works when both radiuses collide? i dont know any way except 160 ifs checking each pixel..

Vishwas R
  • 3,340
  • 1
  • 16
  • 37
Курносов Павел
  • 11
  • 2
  • 1
    Circle to circle collision is probably the easiest to check for. If the center-to-center distance is less than the sum of the radii, they overlap. – tkausl Feb 24 '22 at 19:31

1 Answers1

0

If the center of player circle is less than (radius 5 + radius 8) = 13 units away from the center of a food circle, they are colliding. Use Pythagoras to calculate the distance.

for (let i = 0; i < 100; i=i+2){
  let distance = Math.sqrt(Math.pow(player.x - allFood[i], 2) + Math.pow(player.y - allFood[i + 1], 2))
  if (distance <= 13) {
      scoreboard=scoreboard+1
      score.innerHTML = scoreboard
  }
}
James
  • 20,957
  • 5
  • 26
  • 41