碰撞检测

最新推荐文章于 2024-12-17 18:40:18 发布

长岛冰茶子

最新推荐文章于 2024-12-17 18:40:18 发布

阅读量469

点赞数

CC 4.0 BY-SA版权

分类专栏：事件对象文章标签：碰撞检测事件

本文链接：https://blog.youkuaiyun.com/Zhang_XiaoHeng/article/details/72770189

事件对象专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个简单的网页碰撞检测实现方法，通过拖拽一个红色方块并判断其与图片的位置关系来改变图片源，展示了基本的HTML、CSS布局及JavaScript事件处理技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>碰撞检测</title>
	<style>
		#div1{
			width:100px;
			height:100px;
			background:red;
			position:absolute;
			z-index: 2;
		}
		img{
			width:100px;
			height:100px;
			left:40%;
			top:40%;
			position: absolute;
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			var oDiv = document.getElementById("div1");
			var oImg = document.getElementById("img1");
			drag( oDiv);
			function drag(obj){
				obj .onmousedown = function(ev){
				var ev = ev||event;
				var disX = ev.clientX-this.offsetLeft;
				var disY = ev.clientY-this.offsetTop;
				if(obj.setCapture){
					obj.setCapture();
				}
				document.onmousemove= function(ev){
					var ev = ev||event;
					var L = ev.clientX-disX;
					var T = ev.clientY-disY;

					var L1 = L;//oDiv的left值
					var R1 = L+obj.offsetWidth;//oDiv的left值与自身宽度的和
					var T1 = T;//oDiv的top值
					var B1 = T+obj.offsetHeight;//oDiv的top值与自身高度的和



					var L2 = oImg.offsetLeft;//图片的left值
					var R2 = L2+oImg.offsetWidth;//图片的left值加图片的宽度
					var T2 = oImg.offsetTop;//图片的top值
					var B2 = T2+oImg.offsetHeight;//图片的top值加图片的高度
					？？
					if(R1<L2 || L1>R2 ||B1<T2 || T1>B2){
						oImg.src='../img/cake2.jpg';
					}else{
						oImg.src='../img/cake4.jpg';
					}
					obj.style.left = L +"px";
					obj.style.top= T +"px";
				}
				document.onmouseup = function(){
					document.onmousemove = null;
					if(obj.releaseCapture){
						obj.releaseCapture();
					}
				}
				return false;
			}
		}



			
		}
	</script>
</head>
<body>
	fdsgdfdsfsdf	
	<div id="div1"></div>
	<img id="img1" src="../img/cake2.jpg">
</body>
</html>

情况一

情况二

情况三

情况四