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 相关文章推荐
javascript date格式化示例
Sep 25 Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
jQuery定义背景动态切换效果的方法
Mar 23 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 25 Javascript
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
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
在html页面上拖放移动标签
2010/01/08 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
Seajs源码详解分析
2019/04/02 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
DataList 能否分页,请问如何实现?
2015/05/03 面试题
水果超市创业计划书
2014/01/27 职场文书
优秀员工推荐信
2014/05/10 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
大学生毕业个人总结
2015/02/15 职场文书
2015中学学校工作总结
2015/07/20 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS