How to determine collision method through JS-JS Tutorial-php.cn

How to determine collision method through JS

jacklove

Release： 2018-06-11 16:16:01

Original

1561 people have browsed it

JS determines the collision method

/** 判断是否碰撞
 * @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]);
}

Copy after login

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>

Copy after login

This article explains how to determine the collision method through JS. For more related content, please pay attention to the php Chinese website.

Related recommendations:

How to use CSS to achieve the circle effect (CSS Sprites)

How to perform AES256 encryption through PHP Algorithm

How to send emails with attachments through php

The above is the detailed content of How to determine collision method through JS. For more information, please follow other related articles on the PHP Chinese website!