JS实现判断碰撞的方法

本文实例讲述了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>
希望本文所述对大家的javascript程序设计有所帮助。