欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

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

程序员文章站 2022-03-30 18:09:59
...
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来判断碰撞方法 ，更多相关内容请关注。

相关推荐：

如何使用CSS实现圈人效果(CSS Sprites)

如何通过PHP 进行AES256加密算法

如何通过php 发送带附件邮件

以上就是如何通过JS来判断碰撞方法的详细内容，更多请关注其它相关文章！

相关标签： function html

上一篇： 基于jQuery实现响应式圆形图片轮播特效_jquery

下一篇： php正则匹配与数组遍历

推荐阅读