javascript - Using circle math for solid collision -

    function distance(x1, y1, x2, y2) {             var x = x1 - x2;             var y = y1 - y2;             return(math.sqrt((x*x) + (y*y)))        };      function collisioncirc(circ1, circ2) {             var d = distance(circ1.x, circ1.y, circ2.x, circ2.y);             var r = circ1.radius + circ2.radius;             return(r > d);     };      function collisioncircpoint(circ1, circ2) {             var cx = ((circ1.x * circ2.radius) + (circ2.x * circ1.radius)) / (circ1.radius + circ2.radius);             var cy = ((circ1.y * circ2.radius) + (circ2.y * circ1.radius)) / (circ1.radius + circ2.radius);             var p = [cx, cy];             return p;     };      function angledegrees(x1, y1, x2, y2) {             return (math.atan2(y2 - y1, x2 - x1) * 180 / math.pi) + 180;     };      function updatecollisions() {             var a;             var p;              player.hitarea = new pixi.circle(player.sprite.x, player.sprite.y, 20);             mapobjects.chest.hitarea = new pixi.circle(mapobjects.chest.x, mapobjects.chest.y, 20);              if (collisioncirc(player.hitarea, mapobjects.chest.hitarea)) {                 = angledegrees(player.sprite.x, player.sprite.y, mapobjects.chest.x, mapobjects.chest.y);                 p = collisioncircpoint(player.hitarea, mapobjects.chest.hitarea);                         player.sprite.x = p[0];                         player.sprite.y = p[1];             };      }; 

i have 2 sprites on map , each has circle hitarea defined. trying make smooth circular collision player cannot pass through. thought set player.sprite's coordinates point of collision warps him mapobjects.chest's coordinates, though point of collision correct , 20 pixels mapobject.chest's center. doing wrong or more information needed create collision javascript physics libraries can circle around circle object?

the collision point between player , obstacle. if move player towards collision point, moving player closer. example, if there's 40 px (r1+r2) between player , obstacle, collision point between them, @ 20 px obstacle!

when have multiple objects, getting right when collision has happened difficult. if there 1 obstacle nearby, can move player directly away obstacle. however, way player might end inside obstacle.

another solution go start , try smaller movements, until there no collision. way right, might slow.

the mathematically correct solution calculate maximum distance move before collision happens. done solving following vector equation:

# p = player position before moving # o = obstacle position # u = player direction (unit vector) # d = distance move distance(o, p + d * u) = o.radius + p.radius 

that's mathematics, may solve or using tool wolfram alpha.

solving equation give zero, 1 or 2 possible values distance. negative values can dismiss, mean player past obstacle. if 1 value, means player merely brush obstacle, can dismiss. 2 values mean collision happens between these distances; smaller value collision starts, , larger value player through obstacle. also, if 1 value positive , other negative, means player inside obstacle, should never happen.

you should run check nearby obstacles , move player according smallest non-negative result (that is, 0 or positive), or less, if player can't move fast.

finally, circle around round object, can move player little bit in perpendicular direction (either left or right, depending on side of obstacle player passing) after collision, if doesn't cause new collisions.

there many other possible implementations.