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

onpropertypchange

Jul 01 Javascript

删除节点的jquery代码

Jan 13 Javascript

JavaScript 实现鼠标拖动元素实例代码

Feb 24 Javascript

js动态往表格的td中添加图片并注册事件

Jun 12 Javascript

jQuery实现tab选项卡效果的方法

Jul 08 Javascript

Angularjs 制作购物车功能实例代码

Sep 14 Javascript

jQuery ajax 当async为false时解决同步操作失败的问题

Nov 18 Javascript

jQuery UI制作选项卡（tabs）

Dec 13 Javascript

angularjs中ng-attr的用法详解

Dec 31 Javascript

angularjs+bootstrap菜单的使用示例代码

Mar 07 Javascript

Vue和Bootstrap的整合思路详解

Jun 30 Javascript

vue-父子组件和ref实例详解

Nov 10 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

19个Android常用工具类汇总

2014/12/30 PHP

thinkPHP中配置的读取与C方法详解

2016/12/05 PHP

PHP获取当前日期及本周一是几月几号的方法

2017/03/28 PHP

yii2中关于加密解密的那些事儿

2018/06/12 PHP

Discuz不使用插件实现简单的打赏功能

2019/03/21 PHP

Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例

2019/10/12 PHP

JavaScript中数据结构与算法(三)：链表

2015/06/19 Javascript

BootStrap 超链接变按钮的实现方法

2016/09/25 Javascript

canvas实现粒子时钟效果

2017/02/06 Javascript

基于jQuery实现弹幕APP

2017/02/10 Javascript

巧用weui.topTips验证数据的实例

2017/04/17 Javascript

详解angularJS动态生成的页面中ng-click无效解决办法

2017/06/19 Javascript

详解vue-cli项目中用json-sever搭建mock服务器

2017/11/02 Javascript

javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】

2018/08/01 Javascript

vue-cli 3.0 自定义vue.config.js文件,多页构建的方法

2018/09/19 Javascript

vue样式穿透 ::v-deep的具体使用

2020/06/04 Javascript

vue实现移动端项目多行文本溢出省略

2020/07/29 Javascript

vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法

2020/10/09 Javascript

[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26

2020/11/30 DOTA

Python复制目录结构脚本代码分享

2015/03/06 Python

Windows系统配置python脚本开机启动的3种方法分享

2015/03/10 Python

获取django框架orm query执行的sql语句实现方法分析

2019/06/20 Python

python中time库的实例使用方法

2019/10/31 Python

pytorch中torch.max和Tensor.view函数用法详解

2020/01/03 Python

python如何获取apk的packagename和activity

2020/01/10 Python

python获取依赖包和安装依赖包教程

2020/02/13 Python

Python @property及getter setter原理详解

2020/03/31 Python

Python2与Python3关于字符串编码处理的差别总结

2020/09/07 Python

Sperry澳大利亚官网：源自美国帆船鞋创始品牌

2019/07/29 全球购物

大学生农村教师实习自我鉴定

2013/09/21 职场文书

工业设计专业个人求职信范文

2013/12/28 职场文书

甜品店的创业计划书范文

2014/01/02 职场文书

销售助理岗位职责

2014/02/21 职场文书

《油菜花开了》教学反思

2014/02/22 职场文书

2014红色之旅心得体会

2014/10/07 职场文书

javascript对象3个属性特征

2021/11/17 Javascript