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

Home

Web Front-end

JS Tutorial

How to determine collision method through JS

jacklove

Jun 11, 2018 pm 04:16 PM

function html

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn