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

来源：互联网发布：金立gn205软件编辑：程序博客网时间：2024/06/05 23:59

这次为大家实例讲述了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.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>

效果如下图：

本文转自http://blog.csdn.net/wcslb/article/details/53241488

阅读全文

0 0