管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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>

　　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>

　　var o = document.getElementById("f1");

　　var d = document.getElementById("f2");

　　alert(impact(o, d));