编程 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/jQuery对象互转(快速操作dom元素)

Feb 04 Javascript

禁用页面部分JavaScript方法的具体实现

Jul 31 Javascript

jQuery 快速结束当前正在执行的动画

Nov 20 Javascript

jquery获取URL中参数解决中文乱码问题的两种方法

Dec 18 Javascript

鼠标移到图片上变大显示而不是放大镜效果

Jun 15 Javascript

JavaScript自定义数组排序方法

Feb 12 Javascript

微信支付如何实现内置浏览器的H5页面支付

Sep 25 Javascript

jquery实现全屏滚动

Dec 28 Javascript

jQuery动态生成Bootstrap表格

Nov 01 Javascript

Flask中获取小程序Request数据的两种方法

May 12 Javascript

使用Node搭建reactSSR服务端渲染架构

Aug 30 Javascript

使用VueRouter的addRoutes方法实现动态添加用户的权限路由

Jun 03 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

ThinkPHP CURD方法之limit方法详解

2014/06/18 PHP

php实现统计网站在线人数的方法

2015/05/12 PHP

php 数据结构之链表队列

2017/10/17 PHP

使用 laravel sms 构建短信验证码发送校验功能

2017/11/06 PHP

论坛里点击别人帖子下面的回复，回复标题变成“回复 24# 的帖子”

2009/06/14 Javascript

动态加载js和css(外部文件)

2013/04/17 Javascript

原生js实现半透明遮罩层效果具体代码

2013/06/06 Javascript

详解JavaScript函数绑定

2013/08/18 Javascript

原生javascript实现简单的datagrid数据表格

2015/01/02 Javascript

JS使用正则截取两个字符串之间的字符串实现方法详解

2017/01/06 Javascript

js事件冒泡与事件捕获详解

2017/02/20 Javascript

angularjs实现简单的购物车功能

2017/09/21 Javascript

JavaScript循环遍历你会用哪些之小结篇

2018/09/28 Javascript

微信小程序实现带缩略图轮播效果

2018/11/04 Javascript

微信小程序实现文字无限轮播效果

2018/12/28 Javascript

Vue.js组件实现选项卡以及切换特效

2019/07/24 Javascript

uni-app微信小程序登录授权的实现

2020/05/22 Javascript

vue+canvas实现拼图小游戏

2020/09/18 Javascript

[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日

2020/10/31 DOTA

Python去掉字符串中空格的方法

2014/03/11 Python

Python实现读写INI配置文件的方法示例

2018/06/09 Python

解决安装python库时windows error5 报错的问题

2018/10/21 Python

Python 实现微信防撤回功能

2019/04/29 Python

Python实现把类当做字典来访问

2019/12/16 Python

Python面向对象编程基础实例分析

2020/01/17 Python

Python在线和离线安装第三方库的方法

2020/10/31 Python

python安装及变量名介绍详解

2020/12/12 Python

CSS3中颜色线性渐变实战

2015/07/18 HTML / CSS

CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码

2020/11/30 HTML / CSS

澳大利亚首个在线预订旅游网站：Wotif

2017/07/19 全球购物

shell程序中如何注释

2012/02/17 面试题

九年级政治教学反思

2014/02/06 职场文书

酒店爱岗敬业演讲稿

2014/09/02 职场文书

医学专业大学生职业生涯规划书

2014/10/25 职场文书

大学生实习证明

2015/06/16 职场文书

培训学校2015年度工作总结

2015/07/20 职场文书