Collision

[brooke_theperson]

So, I do not have a specific code, but I just want to understand collision. I guess an example that I am thinking of is agar.io. I have read many examples about collision, or how in agar.io the cells eat eachother, and it just doesn't make sense. Could anybody please explain it to me, and use it in an extremely simple code. I am very much a beginner. I have learned about html, javascript, and jquery using codecademy, but I am not experienced!! Could someone please give me a simple explanation of how to make 'cells eat eachother' using a simple code. Again, I am a beginner!

 

Thanks for any help.

[Ingolme]

There are two types of basic collision: Rectangular hit tests and circle hit tests. This game probably uses the circle hit test.

 

In the circle hit test, your sprite object have an X coordinate, a Y coordinate and a radius:

var circle = {  x : 10,  y : 10,  radius : 5};

To check whether two circles are colliding, using pythagoras theorem to calculate the distance between the two. If the distance is smaller than the sum of their radii, then they are colliding:

function collision(circle1, circle2) {  var totalRadius = circle1.radius + circle2.radius;  if(distance(circle1, circle2) <= totalRadius) {    return true;  } else {    return false;  }}function distance(circle1, circle2) {  var xDist = circle2.x - circle1.x;  var yDist =circle2.y - circle1.y;  var hypotenuse = Math.sqrt(xDist*xDist + yDist*yDist);  return hypotenuse;}

That's as easy as I can put it.

[justsomeguy]

FYI, the mechanics of that game are not an "extremely simple code". The basic collision detection might be fairly simple, but it doesn't look like they're using that. For one, the cells are not perfect circles, they can become distorted or have pieces missing. It looks like they probably spent a decent amount of time to get that part of the game right, so that multiple cells might be competing to eat the same one. It's not as simple as once 2 cells touch, one of them eats the other.