js之碰撞检测

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				/*通过css方式  关闭标签的用户选中效果!!!*/
				/*-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;*/
			}
			div{
				width: 200px;
				height: 200px;
				font-size: 50px;
				line-height: 200px;
				text-align: center;
			}
			#one{
				background-color: pink;
				position: absolute;
				left: 0;
				top: 0;
			}
			#two{
				background-color: skyblue;
				position: absolute;
				left: 0;
				top:0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		style>
	head>
	<body>
		
		<div id="one">1div>
		<div id="two">2div>
	body>
html>
<script type="text/javascript">
	//给one添加拖拽效果
	one.onmousedown = function(){
		//通过js方式   取消事件默认样式
		event.preventDefault();
		
		var l = event.clientX - this.offsetLeft;//鼠标距离点击的标签的左边距离
		var t = event.offsetY;//offsetY 是鼠标距离点击的标签的上面的距离
	window.onmousemove = function(){
		one.style.left = event.clientX - l + "px";
		one.style.top = event.clientY - t + "px";
		
		
		//在move中 不停的判断 是否两个标签碰撞
		if (crash(one, two)) {
			two.style.backgroundColor = "green";
		}else{
			two.style.backgroundColor = "skyblue";
		}
	}
	}
	//鼠标从one上抬起来
	one.onmouseup = function(){
		window.onmousemove = null;
	}
	
	//---封装函数    碰撞检测
	//通过四个方向上的临界值来判断是否发生了碰撞
	function crash(div1, div2){
		var xLeft = div2.offsetLeft - div1.offsetWidth;
		var xRight = div2.offsetLeft + div2.offsetWidth;
		
		var yTop = div2.offsetTop - div1.offsetHeight;
		var yBottom = div2.offsetTop + div2.offsetHeight;
		//只要div1 在这4个临界值内 那么就说明发生了碰撞
		 if(div1.offsetLeft >= xLeft && div1.offsetLeft <= xRight && div1.offsetTop >= yTop && div1.offsetTop <= yBottom){
		 	return true;
		 }else{
		 	return false;
		 }
		
		
		
		
	}
	
	
	
script>

js之碰撞检测_第1张图片
js之碰撞检测_第2张图片

你可能感兴趣的:(js,前端,javascript,css)