这次为大家实例讲述了js实现判断碰撞的方法。碰撞的应用场景非常多比如，放烟花、小球碰壁反弹、像素鸟等，所以我们先要弄清除如何进行碰撞判断，才能进行以后的操作。
html页面代码：
<p id="d1"></p><p id="d2"></p>
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"> p=document.queryselectorall("p"); 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(p[0].offsettop+p[0].offsetheight>=p[1].offsettop && p[0].offsettop<=p[1].offsettop+p[1].offsetheight && p[0].offsetleft+p[0].offsetwidth>=p[1].offsetleft && p[0].offsetleft<=p[1].offsetleft+p[1].offsetwidth){ console.log("你撞我了！再撞一个试试！") }; } document.onmouseup=function(){ document.onmousemove=null; }} }hit(p[0]);hit(p[1]);</script>
本文讲解了通过js实现判断碰撞的方法，更多相关内容请关注。
相关推荐：
介绍一些经典算法的js实现方案
javascript 设为首页 加入收藏夹 js代码
对js的继承的理解
以上就是通过js实现判断碰撞的方法！的详细内容。