HTML5 game framework cnGameJS development record - collision detection module

　

The collision check of this module is limited to points and rectangles, (parallel) rectangles and rectangles, points and circles, circles and circles Detection between shapes, so this module is also very simple. Let’s take a look directly with the code:

Point and rectangle:

/**
     *点和矩形间的碰撞
    **/    
    this.col_Point_Rect=function(pointX,pointY,rectObj){
        return (pointX>rectObj.x&&pointX<rectObj.right||pointY>rectObj.y&&pointY<rectObj.bottom);        
    }

When a point is within a rectangle, we think they are generated collision.

Rectangle and Rectangle:

/**
     *矩形和矩形间的碰撞
    **/    
    this.col_Between_Rects=function(rectObjA,rectObjB){
        return ((rectObjA.right>rectObjB.x&&rectObjA.right<rectObjB.right||rectObjA.x>rectObjB.x&&rectObjA.x
        <rectObjB.right)&&(rectObjA.bottom>rectObjB.y&&rectObjA.bottom<rectObjB.bottom||rectObjA.y<rectObjB.bottom&&rectObjA.bottom>rectObjB.y));        
    }

In short, the collision of a rectangle depends on the position of the four points of the rectangle relative to another rectangle. In the sprite object in the subsequent article, we usually detect collisions between the object and other objects by getting the rectangle of the sprite object. Therefore, the collision between rectangle and rectangle is also the most commonly used collision.

/**
     *点和圆形间的碰撞
    **/    
    this.col_Point_Circle=function(pointX,pointY,circleObj){
        return(Math.pow((pointX-circleObj.x),2)+Math.pow((pointY-circleObj.y),2)<Math.pow(circleObj.r,2));
        
    }

If a point is within a circle, it is considered that the point collides with the circle.

Circles and circles:

/**
     *圆形和圆形间的碰撞
    **/    
    this.col_between_Circles=function(circleObjA,circleObjB){
        return(Math.pow((circleObjA.x-circleObjB.x),2)+Math.pow((circleObjA.y-circleObjB.y),2)<Math.pow((circleObjA.r+circleObjB).r,2));
        
    }

The collision of circles and circles depends on the comparison of the distance between their centers and the sum of their radii.

The above is the detailed content of HTML5 game framework cnGameJS development record - collision detection module. For more information, please follow other related articles on the PHP Chinese website!