原生JS实现判断碰撞的方法(趣味实例)
2020-11-27
来源:华拓网
下面是我给大家整理的原生JS实现判断碰撞的方法,有兴趣的同学可以去看看。
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数据简单调用(代码附上,简单粗暴)