利用JavaScript如何实现一个碰撞检测功能示例

tangjin

作者

利用JavaScript如何实现一个碰撞检测功能示例？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

具体如下：

利用JavaScript如何实现一个碰撞检测功能示例

<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>www.jb51.netJS碰撞检测</title>
<style>
div{width:100px;
height:100px;
}
#box{background:red;position:absolute;}
#box1{background:green;position:absolute;top:300px;left:300px;}
</style>
<script>
//两个碰撞的盒子。是建立在一个不动的基础上。所以可以根据不动的盒子求出四个方向的left和top值。然后再判断其是否碰撞，且碰撞的过程随时改变其层级，（原需var8个变量，现在只需4个变量）
functioncollText(obj,left,top,obj1){
varl1=obj.offsetLeft-obj.offsetWidth;
vart1=obj.offsetTop-obj.offsetHeight;
varr1=obj.offsetLeft+obj.offsetWidth;
varb1=obj.offsetTop+obj.offsetHeight;
if(left<l1||top<t1||left>r1||top>b1){
obj.style.zIndex=3;
obj1.style.zIndex=1;
returntrue;
}else{
obj.style.zIndex=1;
obj1.style.zIndex=3;
returnfalse;
}
};
window.onload=function(){
varoBox=document.getElementById('box');
varoBox1=document.getElementById('box1');
oBox.onmousedown=function(ev){
varoEvent=ev||event;
vardisX=oEvent.clientX-oBox.offsetLeft;
vardisY=oEvent.clientY-oBox.offsetTop;
document.onmousemove=function(ev){
varoEvent=ev||event;
varl=oEvent.clientX-disX;
vart=oEvent.clientY-disY;
oBox.style.left=l+'px';
oBox.style.top=t+'px';
if(collText(oBox1,l,t,oBox)){
oBox1.style.background='green';
}else{
oBox1.style.background='yellow';
}
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
oBox.reseaseCapture&&oBox.reseaseCapture();
};
oBox.setCapture&&oBox.setCapture();
returnfalse;
}
oBox1.onmousedown=function(ev){
varoEvent=ev||event;
vardisX1=oEvent.clientX-oBox1.offsetLeft;
vardisY1=oEvent.clientY-oBox1.offsetTop;
document.onmousemove=function(ev){
varoEvent=ev||event;
varle=oEvent.clientX-disX1;
varto=oEvent.clientY-disY1;
oBox1.style.left=le+'px';
oBox1.style.top=to+'px';
if(collText(oBox,le,to,oBox1)){
oBox.style.background='red';
}else{
oBox.style.background='#000';
}
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
oBox1.reseaseCapture&&oBox1.reseaseCapture();
}
oBox1.setCapture&&oBox1.setCapture();
returnfalse;
}
}
</script>
</head>
<body>
<divid="box"></div>
<divid="box1"></div>
</body>
</html>

关于利用JavaScript如何实现一个碰撞检测功能示例问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注恰卡编程网行业资讯频道了解更多相关知识。

阅读全文

发布于 2021-04-08 13:38:11

javascript