碰撞检测

最新推荐文章于 2024-06-16 09:41:21 发布

werch

最新推荐文章于 2024-06-16 09:41:21 发布

阅读量79

点赞数

分类专栏： js 小案例 js

本文链接：https://blog.csdn.net/weixin_42666092/article/details/115715362

版权

js 同时被 2 个专栏收录

54 篇文章 1 订阅

订阅专栏

js 小案例

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>碰撞</title>
		<style type="text/css">
			* {
				margin:0;
				padding:0;
			}
			.wp1,.wp2 {
				width:200px;
				height:200px;
				background: #04BE02;
				position: absolute;
			}
			.wp1 {
				left:0;
				top:0;
			}
			.wp2 {
				left:500px;
				top:300px;
			}
		</style>
	</head>
	<body>
		<div class="wp1">1</div>
		<div class="wp2">2</div>
	</body>
</html>
<script type="text/javascript">
	function $(ele){
		return document.querySelector(ele);
	}
	function rand(m,n){
		return Math.floor(Math.random()*(n-m+1)+m);
	}
	function randCol(){
		var r = rand(0,255);
		var g = rand(0,255);
		var b = rand(0,255);
		
		return 'rgb('+r+','+g+','+b+')';
	}
	
	$('.wp1').onmousedown = function(){
		// 获取元素的left和top
		var l = parseInt(getComputedStyle(this).left);
		var t = parseInt(getComputedStyle(this).top);
		
		// 获取元素点击位置的坐标
		var x = event.clientX;
		var y = event.clientY;
		
		$('.wp1').onmousemove = function(){
			
			//获取移动位置的坐标
			var x1 = event.clientX;
			var y1 = event.clientY;
			
			$('.wp1').style.left = l+(x1-x)+'px';
			$('.wp1').style.top = t+(y1-y)+'px';
			
			//检测是否碰撞
			if(isPeng( $('.wp1') , $('.wp2') )){
				$('.wp2').style.background = randCol();
			}
			
			return false;
		};
		return false;
	};
	document.onmouseup = function(){
		$('.wp1').onmousemove = null;
	};
	
	//碰撞检测函数
	function isPeng(obj1,obj2){
		// 获取obj1 数据
		var l1 = obj1.offsetLeft;
		var t1 = obj1.offsetTop;
		var r1 = obj1.offsetLeft+obj1.clientWidth;
		var b1 = obj1.offsetTop+obj1.clientHeight;
		// 获取obj2 数据
		var l2 = obj2.offsetLeft;
		var t2 = obj2.offsetTop;
		var r2 = obj2.offsetLeft+obj2.clientWidth;
		var b2 = obj2.offsetTop+obj2.clientHeight;
		
		//判断是否碰撞
		if(l1>r2||t1>b2||r1<l2||b1<t2){
			return false; //没有碰撞
		}else{
			return true; // 碰撞了
		}
	}
</script>

werch

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
碰撞检测

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>碰撞</title> <style type="text/css"> * { margin:0; padding:0; } .wp1,.wp2 { width:200px; height:200px; background: #04BE
复制链接

扫一扫

专栏目录