javascript碰撞,html碰撞检测

javascript中如何判断两个矩形是否碰撞

设矩形的左上顶点是(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表述是错误的

网站栏目：javascript碰撞,html碰撞检测
分享URL：http://scjbc.cn/article/phesch.html