js 实现碰撞检测的示例
(function(){
vardragging=false
varboxX,boxY,mouseX,mouseY,offsetX,offsetY
varbox=document.getElementById('box')
varbox2=document.getElementById('box2')
varbox2X,box2Y
//鼠标按下的动作
box.onmousedown=down
//鼠标的移动动作
document.onmousemove=move
//释放鼠标的动作
document.onmouseup=up
//鼠标按下后的函数,e为事件对象
functiondown(e){
dragging=true
//获取元素所在的坐标
boxX=box.offsetLeft
boxY=box.offsetTop
//获取元素box2所在的坐标
box2X=box2.offsetLeft
box2Y=box2.offsetTop
//获取鼠标所在的坐标
mouseX=parseInt(getMouseXY(e).x)
mouseY=parseInt(getMouseXY(e).y)
//鼠标相对元素左和上边缘的坐标
offsetX=mouseX-boxX
offsetY=mouseY-boxY
}
//鼠标移动调用的函数
functionmove(e){
if(dragging){
//获取移动后的元素的坐标
varx=getMouseXY(e).x-offsetX
vary=getMouseXY(e).y-offsetY
//计算可移动位置的大小，保证元素不会超过可移动范围
varwidth=document.documentElement.clientWidth-box.offsetWidth
varheight=document.documentElement.clientHeight-box.offsetHeight
//min方法保证不会超过右边界，max保证不会超过左边界
x=Math.min(Math.max(0,x),width)
y=Math.min(Math.max(0,y),height)
//给元素及时定位
box.style.left=x+'px'
box.style.top=y+'px'
//碰撞检测
//x坐标值的范围判断，y坐标值的范围判断
varjudge_x=(x>=box2X-box2.offsetWidth)&&(x<=box2X+box2.offsetWidth)
varjudge_y=(y>=box2Y-box2.offsetHeight)&&(y<=box2Y+box2.offsetHeight)
if(judge_x&&judge_y){
console.log("碰撞到")
}
}
}
//释放鼠标的函数
functionup(e){
dragging=false
}
//函数用于获取鼠标的位置
functiongetMouseXY(e){
varx=0,y=0
e=e||window.event
if(e.pageX){
x=e.pageX
y=e.pageY
}else{
x=e.clientX+document.body.scrollLeft-document.body.clientLeft
y=e.clientY+document.body.scrollTop-document.body.clientTop
}
return{
x:x,
y:y
}
}
})()
与简易拖拽的差异
简易拖拽的链接
碰撞检测
//碰撞检测
//x坐标值的范围判断，y坐标值的范围判断
varjudge_x=(x>=box2X-box2.offsetWidth)&&(x<=box2X+box2.offsetWidth)
varjudge_y=(y>=box2Y-box2.offsetHeight)&&(y<=box2Y+box2.offsetHeight)
if(judge_x&&judge_y){
console.log("碰撞到")
}
下载源码链接
星辉的Github
以上就是js实现碰撞检测的示例的详细内容，更多关于js碰撞检测的资料请关注毛票票其它相关文章！
