首頁  >  文章  >  web前端  >  HTML5遊戲框架cnGameJS開發實錄-碰撞偵測模組篇

HTML5遊戲框架cnGameJS開發實錄-碰撞偵測模組篇

黄舟
黄舟原創
2017-03-24 16:10:591485瀏覽

 

  本模組的碰撞檢查只限於點與矩形,(平行的)矩形與矩形,點與圓形,圓形與圓形之間的檢測,因此模組也很簡單,直接結合程式碼來看看:

點與矩形:

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

圓形和圓形的碰撞取決於它們圓心距離和它們半徑大小總和的比較。

以上是HTML5遊戲框架cnGameJS開發實錄-碰撞偵測模組篇的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn