快捷導(dǎo)航

JS實現(xiàn)判斷碰撞的方法

更新時間：2015年02月11日 09:02:51 作者：傲雪星楓

這篇文章主要介紹了JS實現(xiàn)判斷碰撞的方法,實例分析了通過js判斷實體碰撞的技巧與相關(guān)應(yīng)用,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)判斷碰撞的方法。分享給大家供大家參考。具體如下：

JS判斷碰撞方法：

/** 判斷是否碰撞 

 * @param obj 原對象 

 * @param dobj 目標(biāo)對象 

 */  

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]);  

}

示例如下：

復(fù)制代碼代碼如下:

<!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程序設(shè)計有所幫助。

您可能感興趣的文章: