JavaScript Collision detection

Question

How does collision detection work in JavaScript  I can t use jQuery or gameQuery - already using prototype - so  I m looking for something very simple  I am not asking for complete solution  just point me to the right direction  Let s say there s   lt div id  quot ball quot  gt  lt  div gt  and  lt div id  quot someobject0 quot  gt  lt  div gt   Now the ball is moving  any direction    quot Someobject quot  0-X  is already pre-defined and there s 20-60 of them randomly positioned like this   someobject  position  absolute  top  RNDpx  left  RNDpx    I can create an array with  quot someobject X  quot  positions and test collision while the  quot ball quot  is moving    Something like  for var c 0  c lt objposArray length  c              and code to check ball s current position vs all objects one by one        But I guess this would be a  quot noob quot  solution and it looks pretty slow  Is there anything better

User · Answer

hittest js  detect two transparent PNG images  pixel  colliding  Demo and download link HTML code  lt img id  quot png-object-1 quot  src  quot images object1 png quot    gt   lt img id  quot png-object-2 quot  src  quot images object2 png quot    gt   Init function var pngObject1Element   document getElementById   quot png-object-1 quot     var pngObject2Element   document getElementById   quot png-object-2 quot      var object1HitTest   new HitTest  pngObject1Element     Basic usage if  object1HitTest toObject  pngObject2Element              Collision detected

User · Answer

You can try jquery-collision  Full disclosure  I just wrote this and released it  I didn t find a solution  so I wrote it myself  It allows you to do  var hit list      quot  ball quot   collision  quot  someobject0 quot     which will return all the  quot  someobject0 quot  s that overlap with  quot  ball quot

User · Answer

Here s a very simple bounding rectangle routine  It expects both a and b to be objects with x  y  width and height properties   function isCollide a  b        return              a y   a height   lt   b y               a y  gt   b y   b height                a x   a width   lt  b x              a x  gt   b x   b width              To see this function in action  here s a codepen graciously made by  MixerOID

User · Answer

Off the cuff  Prototype style     Note  this is not optimal  there should be some basic partitioning and caching going on    function           var elements            Element register   function  element             for  var i 0  i lt elements length  i                   if  elements i   element  break                      elements push element            if  arguments length gt 1                for  var i 0  i lt arguments length  i                      Element register arguments i                 Element collide   function               for  var outer 0  outer  lt  elements length  outer                   var e1   Object extend                     elements outer   positionedOffset                       elements outer   getDimensions                                for  var inner outer  inner lt elements length  innter                       var e2   Object extend                         elements inner   positionedOffset                           elements inner   getDimensions                                        if                             e1 left e1 width  gt  e2 left  amp  amp  e1 left lt   e2 left e2 width   amp  amp                        e1 top e1 height  gt  e2 top  amp  amp  e1 top lt   e2 top e2 height                                              elements inner   fire   collision    element    elements outer                             elements outer   fire   collision    element    elements inner                                                                      Usage   Element register myElementA    Element register myElementB      myElementA  observe   collision   function  ev         console log  Damn    ev memo element    that hurt             detect collisions every 100ms  setInterval Element collide  100

User · Answer

Mozilla has a good article on this  with the code shown below  2D collision detection Rectangle collision if  rect1 x  lt  rect2 x   rect2 width  amp  amp     rect1 x   rect1 width  gt  rect2 x  amp  amp     rect1 y  lt  rect2 y   rect2 height  amp  amp     rect1 height   rect1 y  gt  rect2 y           Collision detected     Circle collision if  distance  lt  circle1 radius   circle2 radius           Collision detected

User · Answer

This is a lightweight solution I ve come across - function E        Check collision     S   X - x      D   Y - y      F   w   W      return  S   S   D   D  lt   F   F     The big and small variables are of two objects   x coordinate  y coordinate  and w width  From here

User · Answer

This is a simple way that is inefficient  but it s quite reasonable when you don t need anything too complex or you don t have many objects  Otherwise there are many different algorithms  but most of them are quite complex to implement  For example  you can use a divide et impera approach in which you cluster objects hierarchically according to their distance and you give to every cluster a bounding box that contains all the items of the cluster  Then you can check which clusters collide and avoid checking pairs of object that belong to clusters that are not colliding overlapped  Otherwise  you can figure out a generic space partitioning algorithm to split up in a similar way the objects to avoid useless checks  These kind of algorithms split the collision detection in two phases  a coarse one in which you see what objects maybe colliding and a fine one in which you effectively check single objects  For example  you can use a QuadTree  Wikipedia  to work out an easy solution    Take a look at the Wikipedia page  It can give you some hints

User · Answer

An answer without jQuery  with HTML elements as parameters  This is a better approach that checks the real position of the elements as they are being shown on the viewport  even if they re absolute  relative or have been manipulated via transformations  function isCollide a  b        var aRect   a getBoundingClientRect        var bRect   b getBoundingClientRect         return              aRect top   aRect height   lt   bRect top               aRect top  gt   bRect top   bRect height                aRect left   aRect width   lt  bRect left              aRect left  gt   bRect left   bRect width

User · Answer

The first thing to have is the actual function that will detect whether you have a collision between the ball and the object     For the sake of performance it will be great to implement some crude collision detecting technique  e g   bounding rectangles  and a more accurate one if needed in case you have collision detected  so that your function will run a little bit quicker but using exactly the same loop   Another option that can help to increase performance is to do some pre-processing with the objects you have  For example you can break the whole area into cells like a generic table and store the appropriate object that are contained within the particular cells  Therefore to detect the collision you are detecting the cells occupied by the ball  get the objects from those cells and use your collision-detecting function     To speed it up even more you can implement 2d-tree  quadtree or R-tree

User · Answer

bcm s answer  which has 0 votes at this time  is actually a great  under-appreciated answer  It uses good old Pythagoras to detect when objects are closer than their combined bounding circles  Simple collision detection often uses rectangular collision detection  which is fine if your sprites tend to be  well  rectangular  If they are circular  or otherwise less than rectangular   such as a ball  an asteroid  or any other shape where the extreme corners are usually transparent  you may find this efficient routine to be the most accurate  But for clarity  here is a more fully realized version of the code  function doCollide x1  y1  w1  x2  y2  w2        var xd   x1 - x2      var yd   y1 - y2      var wt   w2   w1      return  xd   xd   yd   yd  lt   wt   wt      Where the parameters to pass in are the x y and width values of two different sprite objects

[javascript] JavaScript: Collision detection

HTML code

Init function

Basic usage

Examples related to javascript

Examples related to collision-detection