编程 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 相关文章推荐

用js实现的页面关键字密度查询代码

Dec 27 Javascript

基于jquery的仿百度搜索框效果代码

Apr 11 Javascript

javascript:FF/Chrome与IE动态加载元素的区别说明

Jan 26 Javascript

微信浏览器内置JavaScript对象WeixinJSBridge使用实例

May 25 Javascript

JS简单实现城市二级联动选择插件的方法

Aug 19 Javascript

Javascript页面跳转常见实现方式汇总

Nov 28 Javascript

关于react-router的几种配置方式详解

Jul 24 Javascript

基于Vue生产环境部署详解

Sep 15 Javascript

10种JavaScript最常见的错误(小结)

Jun 21 Javascript

Vue 实现把表单form数据转化成json格式的数据

Oct 29 Javascript

vue 实现在同一界面实现组件的动态添加和删除功能

Jun 16 Javascript

swiperjs实现导航与tab页的联动

Dec 13 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中的串行化变量和序列化对象

2006/09/05 PHP

PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用

2011/07/17 PHP

thinkPHP查询方式小结

2016/01/09 PHP

PHP设计模式之模板方法模式实例浅析

2018/12/20 PHP

SharePoint 客户端对象模型 (一) ECMA Script

2011/05/22 Javascript

JavaScript Math.ceil() 函数使用介绍

2013/12/11 Javascript

js弹出确认是否删除对话框

2014/03/27 Javascript

javascript中attribute和property的区别详解

2014/06/05 Javascript

transport.js和jquery冲突问题的解决方法

2015/02/10 Javascript

JQuery实现级联下拉框效果实例讲解

2015/09/17 Javascript

js运动应用实例解析

2015/12/28 Javascript

jQuery select自动选中功能实现方法分析

2016/11/28 Javascript

微信小程序实战之登录页面制作（5）

2020/03/30 Javascript

js实现延迟加载的几种方法

2017/04/24 Javascript

nodejs body-parser 解析post数据实例

2017/07/26 NodeJs

vue父组件通过props如何向子组件传递方法详解

2017/08/16 Javascript

Angularjs中ng-repeat的简单实例

2017/08/25 Javascript

纯js实现画一棵树的示例

2017/09/05 Javascript

JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题

2017/10/15 Javascript

解决axios会发送两次请求,有个OPTIONS请求的问题

2018/10/25 Javascript

微信小程序自定义导航教程（兼容各种手机）

2018/12/12 Javascript

[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26

2018/08/30 DOTA

小米5s微信跳一跳小程序python源码

2018/01/08 Python

Python使用progressbar模块实现的显示进度条功能

2018/05/31 Python

python控制windows剪贴板,向剪贴板中写入图片的实例

2018/05/31 Python

对python中dict和json的区别详解

2018/12/18 Python

python如果快速判断数字奇数偶数

2019/11/13 Python

python实现图片二值化及灰度处理方式

2019/12/07 Python

Python实现清理微信僵尸粉功能示例【基于itchat模块】

2020/05/29 Python

介绍下WebSphere的安全性

2013/01/31 面试题

财务经理岗位职责

2013/11/09 职场文书

一名老师的自我评价

2014/02/07 职场文书

公司领导九九重阳节发言稿2014

2014/09/25 职场文书

民事申诉状范本

2015/05/20 职场文书

银行柜员优质服务心得体会

2016/01/22 职场文书

JS前端轻量fabric.js系列之画布初始化

2022/08/05 Javascript