前面的话

  前面分别介绍了拖拽模拟磁性吸附,当可视区域内存在多个可拖拽元素,就出现碰撞检测的问题,这也是javascript动画的一个经典问题。本篇将详细介绍碰撞检测

原理介绍

  碰撞检测的方法有很多,接下来使用九宫格分析法

  假设黄色元素要与红色元素进行碰撞。将红色元素所处的区域分为9部分,自身处于第9部分,周围还存在8个部分。只要黄色元素进入红色元素的第9部分,就算碰撞。否则,都算未碰撞

  总共分为以下5种情况:

  1、处于上侧未碰撞区域——1、2、3区域

  2、处于右侧未碰撞区域——3、4、5区域

  3、处于下侧未碰撞区域——5、6、7区域

  4、处于左侧未碰撞区域——1、7、8区域

  5、处于碰撞区域——9区域

代码实现

  我们把上面的原理用代码实现

function bump(obj,objOther,bgColor){

    /***被碰元素***/
//被碰元素左侧距离可视区域左侧的距离
var L0 = obj.offsetLeft;
//被碰元素上侧距离可视区域上侧的距离
var T0 = obj.offsetTop;
//被碰元素右侧距离可视区域右侧的距离
var R0 = obj.offsetLeft + obj.offsetWidth;
//被碰元素下侧距离可视区域下侧的距离
var B0 = obj.offsetTop + obj.offsetHeight;
/**侵入元素**/
var L = objOther.offsetLeft;
var T = objOther.offsetTop;
var R = objOther.offsetLeft + objOther.offsetWidth;
var B = objOther.offsetTop + objOther.offsetHeight; /*******碰撞检测*******/
//上侧区域if(B < T0)
//左侧区域if(R < L0)
//右侧区域if(L > R0)
//下侧区域if(T > B0) //碰撞区域
if(B >= T0 && R >= L0 && L <= R0 && T <= B0){
obj.style.backgroundColor = 'red';
}else{
obj.style.backgroundColor = bgColor;
}
}

完整效果

<div id="test1" style="height: 100px;width: 100px;background:pink;position:absolute;top:0;left:0;">元素一</div>
<div id="test2" style="height: 100px;width: 100px;background:orange;position:absolute;top:150px;left:150px;">元素二</div>
<script>
function addEvent(target,type,handler){
if(target.addEventListener){
target.addEventListener(type,handler,false);
}else{
target.attachEvent('on'+type,function(event){
return handler.call(target,event);
});
}
}
function getCSS(obj,style){
if(window.getComputedStyle){
return getComputedStyle(obj)[style];
}
return obj.currentStyle[style];
}
function bump(obj,objOther){
bump.objBGColor = (bump.objBGColor === undefined) ? getCSS(obj,'backgroundColor') : bump.objBGColor;
bump.objOtherBGColor = (bump.objOtherBGColor === undefined) ? getCSS(objOther,'backgroundColor') : bump.objOtherBGColor;
/***被碰元素***/
//被碰元素左侧距离可视区域左侧的距离
var L0 = obj.offsetLeft;
//被碰元素上侧距离可视区域上侧的距离
var T0 = obj.offsetTop;
//被碰元素右侧距离可视区域右侧的距离
var R0 = obj.offsetLeft + obj.offsetWidth;
//被碰元素下侧距离可视区域下侧的距离
var B0 = obj.offsetTop + obj.offsetHeight;
/**侵入元素**/
var L = objOther.offsetLeft;
var T = objOther.offsetTop;
var R = objOther.offsetLeft + objOther.offsetWidth;
var B = objOther.offsetTop + objOther.offsetHeight; /*******碰撞检测*******/
//上侧区域if(B < T0)
//左侧区域if(R < L0)
//右侧区域if(L > R0)
//下侧区域if(T > B0) //碰撞区域
if(B >= T0 && R >= L0 && L <= R0 && T <= B0){
obj.style.backgroundColor = objOther.style.backgroundColor ='red';
}else{
obj.style.backgroundColor = bump.objBGColor;
objOther.style.backgroundColor = bump.objOtherBGColor; }
} function drag(ele){
var x0,y0,x1,y1,isMoving;
var L0,R0,T0,B0,EH,EW; var mousedownHandler = function(e){
e = e || event;
//获取元素距离定位父级的x轴及y轴距离
x0 = this.offsetLeft;
y0 = this.offsetTop;
//获取此时鼠标距离视口左上角的x轴及y轴距离
x1 = e.clientX;
y1 = e.clientY;
//按下鼠标时,表示正在运动
isMoving = true;
//鼠标按下时,获得此时的页面区域
L0 = 0;
R0 = document.documentElement.clientWidth;
T0 = 0;
B0 = document.documentElement.clientHeight;
//鼠标按下时,获得此时的元素宽高
EH = ele.offsetHeight;
EW = ele.offsetWidth;
}
var mousemoveHandler = function(e){
//如果没有触发down事件,而直接触发move事件,则函数直接返回
if(!isMoving){
return;
}
e = e || event;
//获取此时鼠标距离视口左上角的x轴及y轴距离
var x2 = e.clientX;
var y2 = e.clientY;
//计算此时元素应该距离视口左上角的x轴及y轴距离
var X = x0 + (x2 - x1);
var Y = y0 + (y2 - y1);
/******范围限定*******/
//获取鼠标移动时元素四边的瞬时值
var L = X;
var R = X + EW;
var T = Y;
var B = Y + EH;
//在将X和Y赋值给left和top之前,进行范围限定。只有在范围内时,才进行相应的移动
//如果脱离左侧范围,则left置L0
if(L < L0){X = L0;}
//如果脱离右侧范围,则left置为R0
if(R > R0){X = R0 - EW;}
//如果脱离上侧范围,则top置T0
if(T < T0){Y = T0;}
//如果脱离下侧范围,则top置为B0
if(B > B0){Y = B0 - EH;} //将X和Y的值赋给left和top,使元素移动到相应位置
ele.style.left = X + 'px';
ele.style.top = Y + 'px'; bump(test2,test1);
}
var mouseupHandler = function(e){
//鼠标抬起时,表示停止运动
isMoving = false;
//释放全局捕获
if(ele.releaseCapture){
ele.releaseCapture();
}
}
var preventDefaultHandler = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
//IE8-浏览器阻止默认行为
if(ele.setCapture){
ele.setCapture();
} }
addEvent(ele,'mousedown',mousedownHandler);
addEvent(ele,'mousedown',preventDefaultHandler);
addEvent(document,'mousemove',mousemoveHandler)
addEvent(document,'mouseup',mouseupHandler) }; drag(test1);
drag(test2);
</script>

源码查看

javascript动画系列第三篇——碰撞检测的更多相关文章

  1. javascript面向对象系列第三篇——实现继承的3种形式

    × 目录 [1]原型继承 [2]伪类继承 [3]组合继承 前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.本文是javascript面向对象系列第三篇——实现继承的3种形式 [ ...

  2. 深入理解javascript函数系列第三篇——属性和方法

    × 目录 [1]属性 [2]方法 前面的话 函数是javascript中的特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本 ...

  3. 深入理解javascript作用域系列第三篇——声明提升(hoisting)

    × 目录 [1]变量 [2]函数 [3]优先 前面的话 一般认为,javascript代码在执行时是由上到下一行一行执行的.但实际上这并不完全正确,主要是因为声明提升的存在.本文是深入理解javasc ...

  4. 深入理解javascript作用域系列第三篇

    前面的话 一般认为,javascript代码在执行时是由上到下一行一行执行的.但实际上这并不完全正确,主要是因为声明提升的存在.本文是深入理解javascript作用域系列第三篇——声明提升(hois ...

  5. 深入理解javascript函数系列第三篇

    前面的话 函数是javascript中特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本文是深入理解javascript函数 ...

  6. javascript运动系列第三篇——曲线运动

    × 目录 [1]圆周运动[2]三维圆周 [3]钟摆运动 [4]抛物线[5]流体运动 前面的话 上一篇介绍了变速运动,但只实现了直线运动.如果元素的left和top同时运动,并遵循不同的曲线公式,则会进 ...

  7. javascript动画系列第四篇——拖拽改变元素大小

    × 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位 ...

  8. 深入理解javascript对象系列第三篇——神秘的属性描述符

    × 目录 [1]类型 [2]方法 [3]详述[4]状态 前面的话 对于操作系统中的文件,我们可以驾轻就熟将其设置为只读.隐藏.系统文件或普通文件.于对象来说,属性描述符提供类似的功能,用来描述对象的值 ...

  9. javascript动画系列第五篇——模拟滚动条

    × 目录 [1]原理介绍 [2]数字加减 [3]元素尺寸[4]内容滚动 前面的话 当元素内容溢出元素尺寸范围时,会出现滚动条.但由于滚动条在各浏览器下表现不同,兼容性不好.所以,模拟滚动条也是很常见的 ...

随机推荐

  1. Spring Boot中的事务管理

    原文  http://blog.didispace.com/springboottransactional/ 什么是事务? 我们在开发企业应用时,对于业务人员的一个操作实际是对数据读写的多步操作的结合 ...

  2. C++之路进阶codevs1242(布局)

    1242 布局 2005年USACO  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold    <:section class="hbox" ...

  3. Java基础毕向东day03

    Java基础毕向东day03 1.变量 2.条件结构 3.循环结构,for while,和几种特殊的情况. 4.函数重载

  4. canvas实现跟随鼠标旋转的箭头

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...

  5. Timestamp的作用及与字符串的相互转换 .

    一.Timestamp的介绍 每一个数据库都有一个计数器,这个计数器记录着数据行的插入.更新行为.如果我们为一个表中增加 timestamp 列,那么,该列将记录每一个数据行的计数器值.假如数据库中当 ...

  6. OpenStack Havana 部署在Ubuntu 12.04 Server 【OVS+GRE】(一)——控制节点的安装

      序:OpenStack Havana 部署在Ubuntu 12.04 Server [OVS+GRE] 控制节点: 1.准备Ubuntu 安装好Ubuntu12.04 server 64bits后 ...

  7. OC-深浅复制

    [OC学习-26]对象的浅拷贝和深拷贝——关键在于属性是否可被拷贝 对象的拷贝分为浅拷贝和深拷贝, 浅拷贝就是只拷贝对象,但是属性不拷贝,拷贝出来的对象和原来的对象共用属性,即指向同一个属性地址. 深 ...

  8. 循环结构中break、continue、return和exit的区别

    1. break break语句的使用场合主要是switch语句和循环结构.在循环结构中使用break语句,如果执行了break语句,那么就退出循环,接着执行循环结构下面的第一条语句.如果在多重嵌套循 ...

  9. Linux下Memcached的安装步骤

    一.安装gcc# yum -y install gcc 二.安装libevent# wget http://www.monkey.org/~provos/libevent-2.0.12-stable. ...

  10. 2017-12-14python全栈9期第一天第一节之太白自我介绍和内容大纲

    1.计算机基础 2.python历史 3.python的环境 4.Python的发展 5.python的种类 6.变量 7.常量 8.注释 9.用户交互 10.基础类型初始 11.if 12.whil ...