设矩形的左上顶点是(x, y), 宽w, 高h, 那么只要存在以下情况一定不相交, 否则是相交的
创新互联建站2013年至今,先为黄埔等服务建站,黄埔等地企业,进行企业商务咨询服务。为黄埔企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
(x1 + w1) x2 || (x2 + w2) x1 || (y1 + h1) y2 || (y2 + h2) y1
使用Raycaster进行碰撞检测 用Raycaster来检测碰撞的原理很简单,我们需要以物体的中心为起点,向各个顶点(vertices)发出射线,然后检查射线是否与其它的物体相交。如果出现了相交的情况,检查最近的一个交点与射线起点间的距离,
两个球的速度差是矢量DV,相对位移矢量是DS,那么碰撞的条件就是两个球的距离足够小,并且DV和DS的内积大于0(就是趋向接近的位置相对运动)
你可以在拖动时获取子div的offsetLeft和offsetTop,然后联合子div、父div的高度和宽度计算两个div位置的关系。
offsetTop :当前对象到其上级层顶部的距离.
offsetLeft :当前对象到其上级层左边的距离.
比如:
父div的四个点的位置是(0,0),(0,width1),(height1,0),(height1,width1)
而子div的四个点的位置是(offsetTop,offsetLeft),(offsetTop ,offsetLeft+width2),(offsetTop+height2,offsetLeft),(offsetTop+height2,offsetLeft+width2)
然后对比这些点的位置即可
div碰撞判断方法
function impact(move,fixed){
var move_left=move.offsetWidth + move.offsetLeft; //移动div的宽+移动div离浏览器的左宽
var fixed_left=fixed.offsetLeft; //固定div离浏览器的左宽
var move_top=move.offsetWidth + move.offsetTop; //移动div的宽+移动div离浏览器的上高
var fixed_top=fixed.offsetTop; //固定div离浏览器的上高
var move_right=document.body.offsetWidth-move.offsetLeft; //移动div右宽=浏览器宽-移动div到浏览器的宽
var fixed_right=document.body.offsetWidth-fixed_left-fixed.offsetWidth; //固定div右宽=浏览器宽-固定div到浏览器的宽-固定div的宽
var move_bottom=document.body.offsetHeight-move.offsetTop; //移动div下高=浏览器宽-移动div到浏览器的高
var fixed_bottom=document.body.offsetHeight-fixed_top-fixed.offsetHeight;//固定div下高=浏览器高-固定div到浏览器的高-固定div的高
if(move_leftfixed_left move_topfixed_top move_rightfixed_right move_bottomfixed_bottom){
return true;
}
else{
return false;
}
}
如果你是获取可视区域的宽度是
document.documentElement.clientWidth || document.body.clientWidth (兼容写法)
如何你是获取div的宽度应该是
oDiv.offsetWidth
你这个oDiv.documentElement.clientWidth表述是错误的