HTML5 game-bounding box detection algorithm

Source: Internet
Author: User

Rectangle bounding Box algorithm: detects whether 2 rectangles overlap, in such a case to determine whether 2 rectangles collide only need to compare the coordinates of two rectangle vertices. Assuming that rectangle A is used (X1,Y1) for the upper-left corner, (x2,y2) for the lower-right corner, and Rectangle B (x3,y3) for the upper-left corner, (X4,Y4) for the lower-right corner, the following conditions are true to indicate no collisions, and vice versa.
No collisions: x1>x4 or x2<x3.
No collisions: Y1>y4 or Y2<y3

varAbbox =function(tbox1,tbox2) {varX1 =tbox1.x, y1=Tbox1.y, x2= tbox1.x +tbox1.w, y2= Tbox1.y +TBox1.h, X3=tbox2.x, Y3=tbox2.y, x4= tbox2.x +TBOX2.W, Y4= Tbox2.y +tBox2.h; if(x1>x4| | X2&LT;X3)return false; if(y1>y4| | Y2&LT;Y3)return false; return true;};

Round bounding box algorithm: it is easier to detect a circular collision, assuming the coordinates of Circle A (x1,y1), the radius is R1, the coordinates of Circle B (x2,y2), the radius is R2, if the inequality (y2-y1), (x2-x1) 2<= 2 means that two circles collide, In fact, the distance between the center is less than two circle radius of the sum can, because the calculation distance needs to use the root operation, low efficiency, so directly compare the square of the distance.

var function (tbox) {        var dx = x-tbox.x              ,= y-              tbox.y,= r+tbox.r;         return dx*dx+dy*dy<dr*Dr;};

Convex polygon bounding box algorithm: for 2 polygons, to detect if they intersect, all we have to do is calculate the distance of each edge of two polygons on the split axis. Find out the maximum and minimum values of the vectors formed by each edge on the axis, so that each polygon on the split axis forms a segment with these two values, and finally compares whether the two segments overlap to determine whether the two polygons intersect.

So when doing the test, just follow the steps below.
(1) Generate all the separation axes and select a test.
(2) calculates the projection of the graph on the separation axis.
(3) Detect if the projection intersects, if intersect select the next, repeat steps 2 and 3, if not intersect, return disjoint.
(4) All separation shafts are inspected and return to intersect.

//x, y is the center coordinate of the polygon, Parr is a vertex group, the coordinates of the point are relative center point coordinates, and the vertices are stored clockwise .Init:function(X,y,parr) { This. PARR =PARR;  This. _super (x, y); },            //Convert all vertex coordinates into an absolute coordinate systemMaptoworld:function()       {          varp = [];  for(varI=0,len = This. parr.length;i<len-1;i+=2) {P.push ( This. parr[i]+ This. x, This. parr[i+1]+ This. Y); }          returnp; }, collided:function(tbox) {varP1 = This. Maptoworld (), P2=Tbox.maptoworld (); returnmathutil.iscollide (P1,P2); },
//determines whether two polygons intersect collisions, P1,P2 used to hold an array of polygon pointsIscollide:function(P1,P2) {//defining normal vectors                varE = {"X": 0, "Y": 0}; varp =P1, idx=0, Len1=P1.length, Len2=p2.length;  for(varI=0,len = len1+len2;i<len-1;i+=2) {idx=i; //calculate each edge of two polygons                    if(i>len1) {P=P2; IDX= (I-len1); }                    if(i==p.length-2) {px=p[0]-P[idx]; PY=p[1]-p[idx+1]; }                    Else{px= p[idx+2]-P[idx], py= P[idx+3]-p[idx+1]; }                    //get the normal vector of the edgee.x =-py; E.y=px; //calculates the projection of two polygons on a normal vector                    varPP1 = This. Calcproj (E,P1); varPP2 = This. Calcproj (E,P2); //calculates the distance of two segments on a normal vector, or exits if greater than 0, indicating no intersect                    if( This. Segdist (pp1[0],pp1[1],pp2[0],pp2[1]) >0){                        return false; }                }                return true; }
// calculates the distance S1 (min1,max1), S2 (MIN2,MAX2) of the line segment of the same axis, if the distance is less than 0, it means that the two segments intersect;            Segdist:function(min1,max1,min2,max2) {                if(min1<min2) {                      return min2-max1;                }                 Else {                    return min1-max2;                }            },

HTML5 game-bounding box detection algorithm

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.