8.4.1.5_圆形与多边形之间的碰撞检测

最新推荐文章于 2020-11-14 13:20:01 发布

信封中的阳光

最新推荐文章于 2020-11-14 13:20:01 发布

阅读量1.9k

点赞数 1

分类专栏： HTML5_CANVAS练习案例

本文链接：https://blog.csdn.net/jun_sun_shine/article/details/73920547

版权

本文详细探讨了在计算机图形学中如何进行圆形与多边形的碰撞检测，涉及关键算法和实现步骤，对于游戏开发和物理模拟等领域具有重要应用价值。

摘要由CSDN通过智能技术生成

8.4.1.5_圆形与多边形之间的碰撞检测

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>圆形与多边形之间的碰撞检测</title>
        <style>
            body{
                background: #fff;
            }
            #canvas{
                background: #eee;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="800" height="600"></canvas>
    </body>

    <!-- Vector对象 向量对象 --> 
    <script>
        //坐标系中的向量，以0，0出发，到点x,y，为一个向量，向量长度方向相同为同一个向量
        var Vector = function(x,y){
    
            this.x = x;
            this.y = y;
        };

        Vector.prototype = {
            //得到向量的长度
            getMagnitude:function(){
      
                return Math.sqrt(Math.pow(this.x,2)+Math.pow(this.y,2));
            },

            //两向量相加得到的新向量
            add:function(anotherVector){
    
                var v = new Vector();
                v.x = this.x + anotherVector.x;
                v.y = this.y + anotherVector.y;
                return v;
            },

            //两向量相减,得到边缘法向量 OA-OB = BA;
            subtract:function(anotherVector){
    
                var v = new Vector();
                v.x = this.x - anotherVector.x;
                v.y = this.y - anotherVector.y;
                return v;
            },

            //两向量的点积，一个向量在别一处向量上的投影,得到的不是一个向量，是投影的长度
            dotProduct:function(anotherVector){
    
                return this.x *anotherVector.x+ this.y*anotherVector.y;
            },

            //得到多边形的边缘向量,即多边形，相邻两点的向量
            edge:function(anotherVector){
    
                return this.subtract(anotherVector);
            },

            //得到垂直于边缘向量的边缘法向量，即投影轴向量
            perpendicular:function(){
    
                var v = new Vector();
                v.x = this.y;
                v.y = 0-this.x;
                return v;
            },

            //得去某向量的单位向量，即方向相同，长度为1的向量，单位向量主要是用来指示方向的
            normalize:function(){
    
                var v = new Vector(0,0);
                var m = this.getMagnitude();
                if(m!=0){ //避免向量为0
                    v.x = this.x/m;
                    v.y = this.y/m;
                }
                return v;
            },

            //得去边缘法向量的单位向量，即投影轴向量的单位方向，表示投影轴的方向
            perpendicularNormal:function(){
    
                var p = this.perpendicular();
                return p.normalize();
            }
        }
    </script>

    <!-- Projection 投影对象 -->
    <script>
        var Projection = function(min,max){
    
            this.min = min;
            this.max = max;
        };

        Projection.prototype = {

            //检测两个多边形在同一个投影轴上的投影是否有重合,重叠返回true
            overlaps:function(projection){
    
                return this.max > projection.min &a