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


Posted in Javascript onOctober 16, 2016

自己做了碰撞检测的封装,先看下实例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;
 }
Javascript 相关文章推荐
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
Jun 05 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
JS实现的合并两个有序链表算法示例
Feb 25 Javascript
JS变量提升及函数提升实例解析
Sep 03 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
js+css3制作时钟特效
Oct 16 #Javascript
js实现可旋转的立方体模型
Oct 16 #Javascript
移动端滑动插件Swipe教程
Oct 16 #Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 #Javascript
js实现点击图片自动提交action的简单方法
Oct 16 #Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 #Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 #Javascript
You might like
PHP下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
php实现微信小程序授权登录功能(实现流程)
2019/11/13 PHP
Add Formatted Text to a Word Document
2007/06/15 Javascript
Javascript 刷新全集常用代码
2009/11/22 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
vue实现评论列表功能
2019/10/25 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
原生js实现购物车
2020/09/23 Javascript
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
什么是设计模式
2012/06/17 面试题
vue实现倒计时功能
2021/03/24 Vue.js
校领导推荐信
2013/11/01 职场文书
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
篝火晚会主持词
2014/03/25 职场文书
采购部长岗位职责
2014/06/13 职场文书
2015年清明节活动总结
2015/02/09 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书