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;
 }
Javascript 相关文章推荐
Js中sort()方法的用法
Nov 04 Javascript
JavaScript 自动完成脚本整理(33个)
Oct 20 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
Chosen 基于jquery的选择框插件使用方法
May 30 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 Javascript
解决使用vue.js路由后失效的问题
Mar 17 Javascript
小程序云开发实战小结
Oct 25 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
js实现简单五子棋游戏
May 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
You might like
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
PHP Swoole异步MySQL客户端实现方法示例
2019/10/24 PHP
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
Python爬虫模拟登录带验证码网站
2016/01/22 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
pytorch实现线性拟合方式
2020/01/15 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
Python request中文乱码问题解决方案
2020/09/17 Python
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
医药销售自荐书
2014/05/29 职场文书
企业宣传策划方案
2014/05/29 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
法人代表证明书格式
2014/10/01 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python