suchen

Heim  >  Artikel  >  Web-Frontend  >  So bestimmen Sie die Kollisionsmethode über JS

So bestimmen Sie die Kollisionsmethode über JS

jacklove
jackloveOriginal
2018-06-11 16:16:011619Durchsuche

JS bestimmt die Kollisionsmethode

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

In diesem Artikel wird erläutert, wie die Kollisionsmethode über JS bestimmt wird. Weitere verwandte Inhalte finden Sie im PHP Chinesische Website.

Verwandte Empfehlungen:

So verwenden Sie CSS, um den Kreiseffekt zu erzielen (CSS Sprites)

So führen Sie AES256 durch Verschlüsselung durch PHP-Algorithmus

So senden Sie E-Mails mit Anhängen über PHP

Das obige ist der detaillierte Inhalt vonSo bestimmen Sie die Kollisionsmethode über JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie verwende ich Vue, um Anweisungen zur Zeitumrechnung zu entwickeln?Nächster Artikel：Wie verwende ich Vue, um Anweisungen zur Zeitumrechnung zu entwickeln?

In Verbindung stehende Artikel

Mehr sehen