js实现碰撞检测特效代码分享

更新时间：2016年10月16日 17:23:41 投稿：hebedich

这篇文章主要给大家分享了js实现碰撞检测特效代码，主要就是使用JavaScript实现网页版的碰撞检测，有需要的小伙伴可以参考下

自己做了碰撞检测的封装,先看下实例demo,在看封装

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>碰撞检测</title>
 <style type="text/css">
  *{
  margin: 0;
  padding: 0;
  }
  #divA,#divB{
  width: 200px;
  height: 200px;
  background-color: purple;
  font-size: 50px;
  line-height: 200px;
  text-align: center;
  position: absolute;
  color: #fff;
  }
  #divA{
  left: 30px;
  top: 30px;
  z-index: 5;
  }
  #divB{
  left: 300px;
  top: 300px;
  }
 </style>
 </head>
 <body>
 <div id="divA">A</div>
 <div id="divB">B</div>
 </body>
 <script type="text/javascript">
 var divA = document.getElementById("divA");
 var divB = document.getElementById("divB");
 
 
 divA.onmousedown = function (e) {
  
  var event1 = window.event || e;
  
  
  var startX = event1.clientX;
  
  var startY = event1.clientY;
  
  document.onmousemove = function (j) {
  
  var event2 = window.event || j;
  
  var endX = event2.clientX;
  var endY = event2.clientY;
  
  divA.style.left = divA.offsetLeft + (endX - startX) + "px";
  divA.style.top = divA.offsetTop + (endY - startY) + "px";
  
  startX = endX;
  startY = endY;
  
  if (isCrash(divA,divB) == true) {
   
   divA.style.backgroundColor = "red";
  } else{
   
   divA.style.backgroundColor = "purple";
  };
  }
 }
 
 
 divA.onmouseup = function () {
  
  document.onmousemove = null;
 }
 
 
 function isCrash (obj1,obj2) {
  
  var boolCrash = true;
  
  var left1 = obj1.offsetLeft;
  
  var right1 = obj1.offsetLeft + obj1.offsetWidth;
  
  var top1 = obj1.offsetTop;
  
  var bottom1 = obj1.offsetTop + obj1.offsetHeight;
  
  var left2 = obj2.offsetLeft;
  
  var right2 = obj2.offsetLeft + obj2.offsetWidth;
  
  var top2 = obj2.offsetTop;
  
  var bottom2 = obj2.offsetTop + obj2.offsetHeight;
  
  
  if (right1 > left2 && left1 < right2 && bottom1 > top2 && top1 < bottom2) {
  boolCrash = true;
  } else{
  boolCrash = false;
  }
  return boolCrash;
 }
 
 </script>
</html>

函数封装

 function isCrash (obj1,obj2) {
  
  var boolCrash = true;//假设true为碰撞
  
  var left1 = obj1.offsetLeft;
  
  var right1 = obj1.offsetLeft + obj1.offsetWidth;
  
  var top1 = obj1.offsetTop;
  
  var bottom1 = obj1.offsetTop + obj1.offsetHeight;
 
  var left2 = obj2.offsetLeft;
  
  var right2 = obj2.offsetLeft + obj2.offsetWidth;
  
  var top2 = obj2.offsetTop;
  
  var bottom2 = obj2.offsetTop + obj2.offsetHeight;
  
  
  if (right1 > left2 && left1 < right2 && bottom1 > top2 && top1 < bottom2) {
  boolCrash = true;
  } else{
  boolCrash = false;
  }
  return boolCrash;
 }

您可能感兴趣的文章:

js
碰撞

jQuery EasyUI学习教程之datagrid点击列表头排序
这篇文章主要介绍了jQuery EasyUI学习教程之datagrid点击列表头排序的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-07-07
jquery zTree异步加载简单实例讲解
这篇文章主要为大家详细介绍了jquery zTree异步加载简单实例，ztree采用了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀，感兴趣的小伙伴们可以参考一下
2016-02-02
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
使用jquery拖拽排序插件制作拖拽排序效果是一款非常实用的鼠标拖拽布局插件，在网站上有时也会用的到，今天小编给大家分享jQuery拖拽排序插件制作拖拽排序效果，需要的朋友参考下吧
2016-02-02
jquery.validate使用时遇到的问题
这篇文章主要介绍了jquery.validate使用时遇到的问题的解决方法的汇总，真是应了那句老话，会者不难难者不会，这里记录一下，有需要的小伙伴可以参考下。
2015-05-05
jquery实现的一个文章自定义分段显示功能
基于jquery实现的文章自定义分段显示，如果文章内容太多的话转换有点慢，大家若喜欢的话，可以参考下
2014-05-05
详解bootstrap用dropdown-menu实现上下文菜单
这篇文章主要介绍了详解bootstrap用dropdown-menu实现上下文菜单的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下
2017-09-09
jQuery瀑布流插件Wookmark使用实例
Wookmark jQuery插件大致使用position:absolute来重构内容实现瀑布流布局,需要的朋友可以参考下
2014-04-04
jQuery简单tab切换效果实现方法
这篇文章主要介绍了jQuery简单tab切换效果实现方法,涉及jQuery链式操作及遍历的技巧,是非常具有实用价值的功能,需要的朋友可以参考下
2015-04-04
jquery实现鼠标滑过显示二级下拉菜单效果
这篇文章主要介绍了jquery实现鼠标滑过显示二级下拉菜单效果,通过jquery操作鼠标事件及页面样式动态变换实现该功能,非常具有实用价值,需要的朋友可以参考下
2015-08-08
JQuery工具函数汇总
jquery为我们提供了操作数组和对象的工具函数，方便和简化了我们对它们的操作。今天我们就进入jQuery的工具函数的复习。
2015-06-06