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

jQuery学习5 jQuery事件模型

Feb 07 Javascript

js操纵跨frame的三级联动select下拉选项实例介绍

May 19 Javascript

JavaScript常用验证函数实例汇总

Nov 25 Javascript

js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)

Mar 09 Javascript

详解JavaScript中基于原型prototype的继承特性

May 05 Javascript

jQuery 插件封装的方法

Nov 16 Javascript

bootstrap 下拉多选框进行多选传值问题代码分析

Feb 14 Javascript

JavaScript箭头(arrow)函数详解

Jun 04 Javascript

jQuery实现菜单栏导航效果

Aug 15 jQuery

基于Vue2.0+ElementUI实现表格翻页功能

Oct 23 Javascript

vue cli使用绝对路径引用图片问题的解决

Dec 06 Javascript

原生JS与CSS实现软件卸载对话框功能

Dec 05 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

一个连接两个不同MYSQL数据库的PHP程序

2006/10/09 PHP

PHP程序61条面向对象分析设计的经验小结

2008/11/12 PHP

PHP file_get_contents设置超时处理方法

2013/09/30 PHP

PHP的serialize序列化数据以及JSON格式化数据分析

2015/10/10 PHP

利用Laravel生成Gravatar头像地址的优雅方法

2017/12/30 PHP

jQuery Ajax使用全解析

2010/12/15 Javascript

基于Jquery的表格隔行换色，移动换色，点击换色插件

2010/12/22 Javascript

JavaScript禁止页面操作的示例代码

2013/12/17 Javascript

jQuery产品间断向下滚动效果核心代码

2014/05/08 Javascript

JS中改变this指向的方法(call和apply、bind)

2016/03/26 Javascript

8 行 Node.js 代码实现代理服务器

2016/12/05 Javascript

原生js实现倒计时功能（多种格式调用）

2017/01/12 Javascript

创建一般js对象的几种方式

2017/01/19 Javascript

详谈jQuery unbind 删除绑定事件 / 移除标签方法

2017/03/02 Javascript

React Native之TextInput组件解析示例

2017/08/22 Javascript

webpack+vue-cil中proxyTable处理跨域的方法

2018/07/20 Javascript

vue 点击按钮实现动态挂载子组件的方法

2018/09/07 Javascript

详解微信小程序自定义组件的实现及数据交互

2019/07/22 Javascript

Vue代码整洁之去重方法整理

2019/08/06 Javascript

浅谈VUE中演示v-for为什么要加key

2020/01/16 Javascript

Python实现的百度站长自动URL提交小工具

2014/06/27 Python

Django中更新多个对象数据与删除对象的方法

2015/07/17 Python

Python基于PycURL自动处理cookie的方法

2015/07/25 Python

Python进阶学习之特殊方法实例详析

2017/12/01 Python

详解pytorch 0.4.0迁移指南

2019/06/16 Python

Python如何在循环内使用list.remove()

2020/06/01 Python

Python通过fnmatch模块实现文件名匹配

2020/09/30 Python

css3 图片圆形显示如何CSS将正方形图片显示为圆形图片布局

2014/10/10 HTML / CSS

美国生鲜及杂货电商：FreshDirect

2018/01/29 全球购物

德国汽车零件和汽车配件网上商店：kfzteile24

2018/11/14 全球购物

研究生求职推荐信范文

2013/11/30 职场文书

出差报告格式模板

2014/11/06 职场文书

《玩出了名堂》教学反思

2016/02/17 职场文书

Nginx的反向代理实例详解

2021/03/31 Servers

Python-OpenCV实现图像缺陷检测的实例

2021/06/11 Python

MybatisPlus EntityWrapper如何自定义SQL

2022/03/22 Java/Android