原生JS实现判断碰撞的方法

最新推荐文章于 2023-10-10 17:29:47 发布

code301

最新推荐文章于 2023-10-10 17:29:47 发布

阅读量882

点赞数

分类专栏： javascript 文章标签： javascript

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这次为大家实例讲述了JS实现判断碰撞的方法。碰撞的应用场景非常多比如，放烟花、小球碰壁反弹、像素鸟等，所以我们先要弄清除如何进行碰撞判断，才能进行以后的操作。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		 *{  
            padding: 0px;  
            margin: 0px;  
  
        }  
        #d1{  
            width: 100px;  
            height: 100px;  
            background: red;  
            position: absolute;  
        }  
        #d2{  
            width: 200px;  
            height: 200px;  
            background: yellow;  
            position: absolute;  
            top: 200px;  
            left: 400px;  
            position: absolute;  
        }  
    </style>  
	</style>
</head>
<body>
	<div id="d1"></div>  
	<div id="d2"></div>  
</body>
</html>
<script type="text/javascript">  
    div=document.querySelectorAll("div");   
function hit(obj){  
    obj.οnmοusedοwn=function(e){  
        var e=e||window.event;  
        var dX=e.offsetX;  
        var dY=e.offsetY;  
        document.οnmοusemοve=function(e){  
            var x=e.clientX;  
            var y=e.clientY;  
            obj.style.left=x-dX+"px";  
            obj.style.top=y-dY+"px";  
            if(div[0].offsetTop+div[0].offsetHeight>=div[1].offsetTop && div[0].offsetTop<=div[1].offsetTop+div[1].offsetHeight && div[0].offsetLeft+div[0].offsetWidth>=div[1].offsetLeft && div[0].offsetLeft<=div[1].offsetLeft+div[1].offsetWidth){  
                console.log("你撞我了！再撞一个试试！")  
            };  
    }  
    document.οnmοuseup=function(){  
        document.οnmοusemοve=null;  
    }  
}     
}  
hit(div[0]);  
hit(div[1]);  
</script>