JS實作判斷碰撞的方法_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     py = o.y  
    // 判斷點是否都在兩個物件中 
    if (px >= o.x && px = o.y && py = d.x && px = d.y &&& pyh     } else { 
        return false; 
    } 
} 
 
/**取得物件屬性
 * @param obj       物件
 * @param attribute 屬性
 */ 
function getDefaultStyle(obj, attribute) { 
    return parseInt(obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj, false)[attribute]); 
}

範例如下：

複製程式碼 程式碼如下:

 
 
  
  示範 
   
  正文{邊距：0px;} 
    .main{位置：相對;} 
    #f1{位置：絕對；背景：#FF0000；上：100px；左：100px；寬度：200px；高度：200px； z 索引：999} 
    #f2{位置：絕對；背景：#FFFF00；上：0px；左：0px；寬度：600px；高度：150px;} 
  風格> 
 頭> 
  
 

 
   

 
   

 
 

 
  
    var o = document.getElementById("f1"); 
    var d = document.getElementById("f2"); 
    警報（影響（o，d））； 

    函數效應(obj, dobj) { 
        var o = { 
            x: getDefaultStyle(obj, '左'),
            y: getDefaultStyle(obj, 'top'), 
            w: getDefaultStyle(obj, '寬度'),
            h: getDefaultStyle(obj, 'height') 
        } 

        var d = { 
            x: getDefaultStyle(dobj, '左'),
            y: getDefaultStyle(dobj, 'top'),
            w: getDefaultStyle(dobj, '寬度'),
            h: getDefaultStyle(dobj, 'height') 
        } 

        var px, py; 

        px = o.x         py = o.y  
        // 判斷點是否都在兩個物件中
        if (px >= o.x && px = o.y && py = d.x && px = d.y & c.             返回真實； 
        } 其他 { 
            返回假； 
        } 
    } 

    function getDefaultStyle(obj, attribute) { 

        return parseInt(obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getCompulatedStyle(obj, false)[attribute]); 
    } 
 腳本> 
 正文> 

希望本文對大家介紹的javascript程式設計有幫助。