如何通过JS来判断碰撞方法

2020-11-27 来源：步旅网

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

demo：

<!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>
 <p class="main">
	<p id="f1"></p>
	<p id="f2"></p>
 </p>
 <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>

本文讲解如何通过JS来判断碰撞方法，更多相关内容请关注Gxl网。

全部栏目

如何通过JS来判断碰撞方法