您的当前位置:首页正文

原生JS实现判断碰撞的方法(趣味实例)

2020-11-27 来源:华拓网
下面是我给大家整理的原生JS实现判断碰撞的方法,有兴趣的同学可以去看看。

20161120161907798.png

HTML页面代码:

<div id="d1"></div> 
<div id="d2"></div>

CSS页面代码:

<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>

JS页面代码:

<script type="text/javascript"> 
 div=document.querySelectorAll("div"); 
function hit(obj){ 
 obj.onmousedown=function(e){ 
 var e=e||window.event; 
 var dX=e.offsetX; 
 var dY=e.offsetY; 
 document.onmousemove=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.onmouseup=function(){ 
 document.onmousemove=null; 
 } 
} 
} 
hit(div[0]); 
hit(div[1]); 
</script>

上面是我整理给大家的原生JS实现判断碰撞的方法,希望今后会对大家有帮助。

相关文章:

JS下载文件流的简单操作(附上代码)

在js中生成验证码并验证(含有代码,简单粗暴,包教包会)

有关在JS 获取JSON数据简单调用(代码附上,简单粗暴)