好资源导航 » 文章资讯 » JS实现碰撞检测效果

JS实现碰撞检测效果

2023-07-28 19:37:13 63

本文实例为大家分享了JS实现碰撞检测效果的具体代码，供大家参考，具体内容如下





#all{
width:500px;
height:500px;
border:2pxsolidsandybrown;
position:relative;
margin:0auto;
}
#div1{
width:50px;
height:50px;
background-color:red;
position:absolute;
}
#center{
width:150px;
height:150px;
background-color:black;
position:absolute;
margin:175px;
}

varoAll=document.getElementById("all"); varoDiv1=document.getElementById("div1"); varoCenter=document.getElementById("center"); varmaxL=oAll.clientWidth-oDiv1.clientWidth; varmaxT=oAll.clientHeight-oDiv1.clientHeight; oDiv1.onmousedown=function(){ varev=ev||window.event; varlessX=ev.clientX-oDiv1.offsetLeft; varlessY=ev.clientY-oDiv1.offsetTop; document.onmousemove=function(){ varev=ev||window.event; varposL=ev.clientX-lessX; varposT=ev.clientY-lessY; if(oCenter.offsetLeft-oDiv1.offsetWidthmaxL){ posL=maxL; } if(posT>maxT){ posT=maxT; } oDiv1.style.left=posL+"px"; oDiv1.style.top=posT+"px"; } } document.onmouseup=function(){ document.onmousemove=null; oDiv1.onmousemove=null; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

JS实现碰撞检测效果

热门推荐

随机推荐