编程 Javascript

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;
 }

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

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 火狐(firefox)不显示本地图片问题解决

Jul 05 Javascript

jQuery的12招常用技巧分享

Aug 08 Javascript

JavaScript字符串对象replace方法实例（用于字符串替换或正则替换）

Oct 16 Javascript

Javascript非构造函数的继承

Apr 27 Javascript

JavaScript获取图片像素颜色并转换为box-shadow显示

Mar 11 Javascript

jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码

Aug 15 Javascript

详解Angular.js指令中scope类型的几种特殊情况

Feb 21 Javascript

JS返回顶部实例代码

Aug 09 Javascript

Vue SPA单页应用首屏优化实践

Jun 28 Javascript

解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题

Aug 24 Javascript

vue中如何去掉空格的方法实现

Nov 09 Javascript

手把手教你使用TypeScript开发Node.js应用

May 06 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

php下封装较好的数字分页方法

2010/11/23 PHP

Windows平台实现PHP连接SQL Server2008的方法

2017/07/26 PHP

php对象工厂类完整示例

2018/08/09 PHP

YII分模块加载路由的实现方法

2018/10/01 PHP

比较全的JS checkbox全选、取消全选、删除功能代码

2008/12/19 Javascript

javascript学习笔记(十五) js间歇调用和超时调用

2012/06/20 Javascript

Jquery实现图片放大镜效果的思路及代码(自写)

2013/10/18 Javascript

jQuery调用RESTful WCF示例代码(GET方法/POST方法)

2014/01/26 Javascript

js和jquery设置disabled属性为true使按钮失效

2014/08/07 Javascript

js实现完全自定义可带多级目录的网页鼠标右键菜单方法

2015/02/28 Javascript

基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解

2015/03/05 Javascript

JavaScript通过字典进行字符串翻译转换的方法

2015/03/19 Javascript

jQuery实现的动态伸缩导航菜单实例

2015/05/07 Javascript

jQuery实现悬浮在右上角的网页客服效果代码

2015/10/24 Javascript

js解决movebox移动问题

2016/03/29 Javascript

js操作数据库实现注册和登陆的简单实例

2016/05/26 Javascript

BootStrap无限级分类(无限极分类封装版)

2016/08/26 Javascript

Angularjs实现数组随机排序的方法

2018/10/02 Javascript

vuejs2.0运用原生js实现简单拖拽元素功能

2020/08/21 Javascript

Vue 解决路由过渡动画抖动问题(实例详解)

2020/01/05 Javascript

小程序开发之模态框组件封装

2020/04/23 Javascript

Python ORM框架SQLAlchemy学习笔记之数据查询实例

2014/06/10 Python

Python实现Youku视频批量下载功能

2017/03/14 Python

Python生成器定义与简单用法实例分析

2018/04/30 Python

解决python报错MemoryError的问题

2018/06/26 Python

Python多继承原理与用法示例

2018/08/23 Python

HTML5边玩边学（2）基础绘图实现方法

2010/09/21 HTML / CSS

英国户外装备和冒险服装零售商：alloutdoor

2018/01/30 全球购物

美国礼品卡交易网站：Cardpool

2018/08/27 全球购物

就业推荐表自我鉴定

2014/03/21 职场文书

珍爱生命演讲稿

2014/05/10 职场文书

社区党的群众路线教育实践活动总结材料

2014/10/31 职场文书

健康状况证明书

2014/11/26 职场文书

大学生村官驻村工作心得体会

2016/01/23 职场文书

小学思想品德教学反思

2016/02/24 职场文书

Python 如何安装Selenium

2021/05/06 Python