编程 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 相关文章推荐

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 职场文书