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数据简单调用（代码附上，简单粗暴）
以上就是原生js实现判断碰撞的方法（趣味实例）的详细内容。