编程 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 date格式化示例

Sep 25 Javascript

Javascript实现简单二级下拉菜单实例

Jun 15 Javascript

nw.js实现类似微信的聊天软件

Mar 16 Javascript

jQuery定义背景动态切换效果的方法

Mar 23 Javascript

JS制作图形验证码实现代码

Oct 19 Javascript

angular-ngSanitize模块-$sanitize服务详解

Jun 13 Javascript

微信小程序实现图片懒加载的示例代码

Dec 13 Javascript

JavaScript使用ul中li标签实现删除效果

Apr 15 Javascript

小程序云开发实现数据库异步操作同步化

May 18 Javascript

javascript中this的用法实践分析

Jul 29 Javascript

JavaScript和TypeScript中的void的具体使用

Sep 12 Javascript

解决LayUI数据表格复选框不居中显示的问题

Sep 25 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

解析WordPress中控制用户登陆和判断用户登陆的PHP函数

2016/03/01 PHP

PHP判断json格式是否正确的实现代码

2017/09/20 PHP

php使用curl_init()和curl_multi_init()多线程的速度比较详解

2018/08/15 PHP

ThinkPHP框架下微信支付功能总结踩坑笔记

2019/04/10 PHP

ThinkPHP5.0框架使用build 自动生成模块操作示例

2019/04/11 PHP

Javascript 同时提交多个Web表单的方法

2009/02/19 Javascript

javascript 获取select下拉列表值的代码

2009/09/07 Javascript

JavaScript 学习笔记（七）字符串的连接

2009/12/31 Javascript

在html页面上拖放移动标签

2010/01/08 Javascript

jQuery中实现动画效果的基本操作介绍

2013/04/16 Javascript

js动态创建、删除表格示例代码

2013/08/07 Javascript

通过正则表达式实现表单验证是否为中文

2014/02/18 Javascript

jQuery元素选择器用法实例

2014/12/23 Javascript

jQuery幻灯片带缩略图轮播效果代码分享

2015/08/17 Javascript

javascript正则表达式定义（语法）总结

2016/01/08 Javascript

JavaScript笔记之数据属性和存储器属性

2016/03/31 Javascript

JS弹出窗口插件zDialog简单用法示例

2016/06/12 Javascript

json定义及jquery操作json的方法

2016/10/03 Javascript

Seajs源码详解分析

2019/04/02 Javascript

angular4应用中输入的最小值和最大值的方法

2019/05/17 Javascript

微信小程序JS加载esmap地图的实例详解

2019/09/04 Javascript

详解javascript中var与ES6规范中let、const区别与用法

2020/01/11 Javascript

[48:21]林俊杰圣堂刺客超神杀戮秀

2014/10/29 DOTA

[03:20]2015国际邀请赛全明星表演赛

2015/08/08 DOTA

解决pycharm运行时interpreter为空的问题

2018/10/29 Python

荷兰鞋子在线：Nelson Schoenen

2017/12/25 全球购物

ECCO俄罗斯官网：北欧丹麦鞋履及皮具品牌

2020/06/26 全球购物

印度电子产品购物网站：Vijay Sales

2021/02/16 全球购物

DataList 能否分页，请问如何实现？

2015/05/03 面试题

水果超市创业计划书

2014/01/27 职场文书

优秀员工推荐信

2014/05/10 职场文书

慈善捐赠倡议书

2014/08/30 职场文书

2014年销售人员工作总结

2014/11/27 职场文书

大学生毕业个人总结

2015/02/15 职场文书

2015中学学校工作总结

2015/07/20 职场文书

详解CSS不定宽溢出文本适配滚动

2021/05/24 HTML / CSS