首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
EXTJS记事本 当CompositeField遇上RowEditor
Jul 31 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 Javascript
canvas 弹幕效果（实例分享）
Jan 11 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
详解小程序退出页面时清除定时器
Apr 28 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
NginxConfig(1) caddy(1) 骨架屏(1) 共享文件夹(1) 表约束(2) 主从复制(1) Master(1) Slave(1) ESXI(1) SVN(1)
You might like
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
PHP静态成员变量
2017/02/14 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
CKEditor无法验证的解决方案（js验证+jQuery Validate验证）
2016/05/09 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
js实现烟花特效
2020/03/02 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
gearman的安装启动及python API使用实例
2014/07/08 Python
跟老齐学Python之用Python计算
2014/09/12 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
python生成器与迭代器详解
2019/01/01 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
django celery redis使用具体实践
2019/04/08 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
俄罗斯电子产品、计算机和家用电器购物网站：OLDI
2019/10/27 全球购物
酒店拾金不昧表扬信
2014/01/18 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
市场部经理岗位职责
2015/02/02 职场文书
人口与计划生育责任书
2015/05/09 职场文书
争做文明公民倡议书
2019/06/24 职场文书
2019经典广告词集锦！
2019/07/02 职场文书
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL