编程 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中两种链式调用实现代码

Jan 12 Javascript

JQUERY 获取IFrame中对象及获取其父窗口中对象示例

Aug 19 Javascript

jquery实现页面关键词高亮显示的方法

Mar 12 Javascript

javascript html5 canvas实现可拖动省份的中国地图

Mar 11 Javascript

JS中的forEach、$.each、map方法推荐

Apr 05 Javascript

Extjs让combobox写起来简洁又漂亮

Jan 05 Javascript

angular框架实现全选与单选chekbox的自定义

Jul 06 Javascript

express + jwt + postMan验证实现持久化登录

Jun 05 Javascript

微信小程序页面上下滚动效果

Nov 18 Javascript

JS常用排序方法实例代码解析

Mar 03 Javascript

Vue scoped及deep使用方法解析

Aug 01 Javascript

javascript this指向相关问题及改变方法

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

一个oracle+PHP的查询的例子

2006/10/09 PHP

不用GD库生成当前时间的PNG格式图象的程序

2006/10/09 PHP

Optimizer与Debugger兼容性问题的解决方法

2008/12/01 PHP

关于URL最大长度限制的相关资料查证

2014/12/23 PHP

PHP生成随机数的方法实例分析

2015/01/22 PHP

php实现图片转换成ASCII码的方法

2015/04/03 PHP

分享几个超级震憾的图片特效

2012/01/08 Javascript

nodeType属性返回被选节点的节点类型介绍

2013/11/22 Javascript

Javascript 实现简单计算器实例代码

2016/10/23 Javascript

JS实现的RGB网页颜色在线取色器完整实例

2016/12/21 Javascript

JS实现复制内容到剪贴板功能

2017/02/05 Javascript

原生js实现秒表计时器功能

2017/02/16 Javascript

vue深入解析之render function code详解

2017/07/18 Javascript

vue $mount 和 el的区别说明

2020/09/11 Javascript

JavaScript实现点击自制菜单效果

2021/02/02 Javascript

[01:38]DOTA2辉夜杯欢乐的观众现场采访

2015/12/26 DOTA

学习python 之编写简单乘法运算题

2016/02/27 Python

python中文乱码不着急，先看懂字节和字符

2017/12/20 Python

Python之ReportLab绘制条形码和二维码的实例

2018/01/15 Python

浅谈python日志的配置文件路径问题

2018/04/28 Python

python实现爬取图书封面

2018/07/05 Python

python实现弹跳小球

2019/05/13 Python

基于pandas中expand的作用详解

2019/12/17 Python

浅谈django 重载str 方法

2020/05/19 Python

如何用 Python 制作 GitHub 消息助手

2021/02/20 Python

html5需遵循的6个设计原则

2016/04/27 HTML / CSS

英国DIY和家居装饰领域的主要品牌：Wickes

2019/11/26 全球购物

Marlies Dekkers内衣荷兰官方网店：荷兰奢侈内衣品牌

2020/03/27 全球购物

英国健身专家：WIT Fitness

2021/02/09 全球购物

SQL Server提供的3种恢复模型都是什么？有什么区别？

2012/05/13 面试题

职业生涯规划书结束语

2014/04/15 职场文书

公司员工离职证明书

2014/10/04 职场文书

2014年全国法制宣传日宣传活动方案

2014/11/02 职场文书

2015年大学社团工作总结

2015/04/09 职场文书

单位收入证明范本

2015/06/18 职场文书

Golang 使用Map实现去重与set的功能操作

2021/04/29 Golang