JS实现判断碰撞的方法

前端技术 2023/09/02 JavaScript

本文实例讲述了JS实现判断碰撞的方法。分享给大家供大家参考。具体如下：

JS判断碰撞方法：

复制代码 代码如下:
/** 判断是否碰撞
 * @param obj 原对象
 * @param dobj 目标对象
 */ 
function impact(obj, dobj) { 
    var o = { 
        x: getDefaultStyle(obj, \'left\'), 
        y: getDefaultStyle(obj, \'top\'), 
        w: getDefaultStyle(obj, \'width\'), 
        h: getDefaultStyle(obj, \'height\') 
    } 
 
    var d = { 
        x: getDefaultStyle(dobj, \'left\'), 
        y: getDefaultStyle(dobj, \'top\'), 
        w: getDefaultStyle(dobj, \'width\'), 
        h: getDefaultStyle(dobj, \'height\') 
    } 
 
    var px, py; 
 
    px = o.x <= d.x ? d.x : o.x; 
    py = o.y <= d.y ? d.y : o.y; 
 
    // 判断点是否都在两个对象中 
    if (px >= o.x && px <= o.x + o.w && py >= o.y && py <= o.y + o.h && px >= d.x && px <= d.x + d.w && py >= d.y && py <= d.y + d.h) { 
        return true; 
    } else { 
        return false; 
    } 
} 
 
/** 获取对象属性
 * @param obj       对象
 * @param attribute 属性
 */ 
function getDefaultStyle(obj, attribute) { 
    return parseInt(obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj, false)[attribute]); 
}

示例如下：

复制代码 代码如下:
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\"> 
<html> 
 <head> 
  <title> demo </title> 
  <style type=\"text/css\"> 
  body{margin:0px;} 
    .main{position:relative;} 
    #f1{position:absolute; background:#FF0000; top:100px; left:100px; width:200px; height:200px; z-index:999} 
    #f2{position:absolute; background:#FFFF00; top:0px; left:0px; width:600px; height:150px;} 
  </style> 
 </head> 
 <body> 
 <div class=\"main\"> 
    <div id=\"f1\"></div> 
    <div id=\"f2\"></div> 
 </div> 
 <script type=\"text/javascript\"> 
    var o = document.getElementById(\"f1\"); 
    var d = document.getElementById(\"f2\"); 
    alert(impact(o, d)); 

    function impact(obj, dobj) { 
        var o = { 
            x: getDefaultStyle(obj, \'left\'), 
            y: getDefaultStyle(obj, \'top\'), 
            w: getDefaultStyle(obj, \'width\'), 
            h: getDefaultStyle(obj, \'height\') 
        } 

        var d = { 
            x: getDefaultStyle(dobj, \'left\'), 
            y: getDefaultStyle(dobj, \'top\'), 
            w: getDefaultStyle(dobj, \'width\'), 
            h: getDefaultStyle(dobj, \'height\') 
        } 

        var px, py; 

        px = o.x <= d.x ? d.x : o.x; 
        py = o.y <= d.y ? d.y : o.y; 
 
        // 判断点是否都在两个对象中 
        if (px >= o.x && px <= o.x + o.w && py >= o.y && py <= o.y + o.h && px >= d.x && px <= d.x + d.w && py >= d.y && py <= d.y + d.h) { 
            return true; 
        } else { 
            return false; 
        } 
    } 

    function getDefaultStyle(obj, attribute) { 
        return parseInt(obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj, false)[attribute]); 
    } 
 </script> 
 </body> 
</html>

本文地址：https://www.stayed.cn/item/3677

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案