首页
所有分类
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 相关文章推荐
jquery监控数据是否变化(修正版)
Apr 12 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
js实现进度条的方法
Feb 13 Javascript
浅析angularJS中的ui-router和ng-grid模块
May 20 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
Oct 08 Javascript
小程序自定义圆形进度条
Nov 17 Javascript
js 数组 fill() 填充方法
Nov 02 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
callback(1) dict(1) expdp(1) cudn(1) 脚本(1) Vite(1) 字符画(1) 热力图(1) cudnn(1) hook(1)
You might like
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
laravel框架中路由设置，路由参数和路由命名实例分析
2019/11/23 PHP
用js得到网页中所有的div的id
2020/10/19 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
究竟什么是Node.js？Node.js有什么好处？
2015/05/29 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
JavaScript实现拖拽元素对齐到网格（每次移动固定距离）
2016/11/30 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
在HTML中使用JavaScript的两种方法
2020/12/24 Javascript
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
Python GAE、Django导出Excel的方法
2008/11/24 Python
简单的Python2.7编程初学经验总结
2015/04/01 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
Python单元测试简单示例
2018/07/03 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
出国考察邀请函
2014/01/21 职场文书
2014年助理工程师工作总结
2014/11/14 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
golang 实现菜单树的生成方式
2021/04/28 Golang
python 制作一个gui界面的翻译工具
2021/05/14 Python
CSS 伪元素::marker详解
2021/06/26 HTML / CSS
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android
用Python生成会跳舞的美女
2022/01/18 Python
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript