视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
HTML5游戏框架cnGameJS开发实录-碰撞检测模块篇
2020-11-27 15:10:27 责编:小采
文档


 

  本模块的碰撞检查只局限于点与矩形,(平行的)矩形与矩形,点与圆形,圆形与圆形之间的检测,因此该模块也很简单,直接结合代码来看看:

点与矩形:

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

  当一个点在矩形内时,我们认为它们产生了碰撞。

矩形与矩形:

/**
 *矩形和矩形间的碰撞
 **/ 
 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)); 
 }

  简而言之,矩形的碰撞取决于矩形四个点相对于另一个矩形的位置。在后续文章的sprite对象中,我们通常通过获取sprite对象的矩形来检测对象和其他对象的碰撞。因此矩形和矩形的碰撞也是用得最多的碰撞。

/**
 *点和圆形间的碰撞
 **/ 
 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));
 
 }

  点在圆形内则认为该点和圆形产生碰撞。

圆形和圆形:

/**
 *圆形和圆形间的碰撞
 **/ 
 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));
 
 }

圆形和圆形的碰撞取决于它们圆心距离和它们半径大小之和的比较。

下载本文
显示全文
专题