JavaScript碰撞检测原理及其实现代码
更新时间：2020年03月12日 15:11:22 作者：SuperluminalSnails
这篇文章主要为大家详细介绍了JavaScript碰撞检测原理及其实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现碰撞检测原的具体代码，供大家参考，具体内容如下
1.模拟碰撞
简单模拟碰撞过程,用一个可以拖拽的div2去尝试碰撞一个固定的div1(均用绝对定位)
2.碰撞检测原理
如图所示:
使得div分别有4个距离属性( L(left),T(top),R(right),B(bottom) ).
对于div1来说,画出一个九宫格,div2在除中心以为的8个格子任意移动都不会发送碰撞.
也就是说,只要满足条件:oDiv2.div2R小于oDiv1.div1L|| oDiv2.div2L大于oDiv1.div1R || oDiv2.div2B小于oDiv1.div1T|| oDiv2.div2T大于oDiv1.div1B就不会发送碰撞
3.具体测试代码
<html>
<head>
<title></title>
<style type="text/css">
body{margin: 0;padding: 0;}
#div2{height: 100px;width: 200px;background-color: orange;position: absolute;left: 0px;top:0px;z-index: 1;}
#div1{height: 100px;width: 100px;background-color: #a6e22e;position: absolute;left: 600px;top:400px;}
</style>
<script type="text/javascript">
//获取对象样式属性值
function getObjStyle(obj,attr)
{
return getComputedStyle(obj)?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
}
</script>
<script type="text/javascript">
window.οnlοad=function (){
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
oDiv2.οnmοusedοwn=function (onEvent,obj){//对div1实现拖拽,并对碰撞进行检测
obj=this;
var ev=onEvent||event;
var distance={};
distance.disX=ev.clientX-obj.offsetLeft;//到左边框的距离
distance.disY=ev.clientY-obj.offsetTop;//到上边框的距离
//获取div1的四个值
oDiv1.div1L=getObjStyle(oDiv1,'left');
oDiv1.div1R=parseInt(getObjStyle(oDiv1,'left'))+parseInt(getObjStyle(oDiv1,'width'))+'px';
oDiv1.div1T=getObjStyle(oDiv1,'top');
oDiv1.div1B=parseInt(getObjStyle(oDiv1,'top'))+parseInt(getObjStyle(oDiv1,'height'))+'px';
if(obj.setCapture)
obj.setCapture();
document.οnmοusemοve=function (onEvent){
var ev=onEvent||event;
obj.style.left=ev.clientX-distance.disX+'px';
obj.style.top=ev.clientY-distance.disY+'px';
//获取div2的四个值
oDiv2.div2L=getObjStyle(oDiv2,'left');
oDiv2.div2R=parseInt(getObjStyle(oDiv2,'left'))+parseInt(getObjStyle(oDiv2,'width'))+'px';
oDiv2.div2T=getObjStyle(oDiv2,'top');
oDiv2.div2B=parseInt(getObjStyle(oDiv2,'top'))+parseInt(getObjStyle(oDiv2,'height'))+'px';
/*console.log('oDiv2.div2L:'+oDiv2.div2L+' oDiv2.div2R:'+oDiv2.div2R+' oDiv2.div2T:'+oDiv2.div2T+' oDiv2.div2B:'+oDiv2.div2B);*/
//碰撞检测
if(oDiv2.div2R<oDiv1.div1L || oDiv2.div2L>oDiv1.div1R || oDiv2.div2B<oDiv1.div1T || oDiv2.div2T>oDiv1.div1B){
//未发送碰撞
}else{
//发生碰撞
alert('发生碰撞');
}
}
document.οnmοuseup=function (){
document.οnmοuseup=document.οnmοusemοve=null;
if(obj.setCapture)
obj.releaseCapture();
}
return false;
}
}
</script>
</head>
<body>
<div id="div2">div2</div>
<div id="div1">div1</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
重写JS setTimeout 方法 JavaScript Hook
想要重写 setTimeout 方法，发现有动态引入的js，需要改成自己的js，以下教教大家这个需求，防止网站被劫持2023-07-07
这篇文章主要介绍了TypeScript联合类型,交叉类型和类型保护，联合类型就是定义一些类型，定义的变量只需要满足任意一种类型即可，交叉类型就是需要满足所有类型，交叉类型使用，更多内容我们来看看下面文章详细内容吧2021-12-12
这篇文章主要介绍了JavaScript 预解析的4种实现方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
右下角弹出窗体的效果在浏览网页的时候会遇到，那么它是怎么实现的呢？本文有个不错的示例，大家可以参考下2014-06-06
这篇文章主要为大家详细介绍了javascript实现列表切换效果的相关资料,需要的朋友可以参考下2016-05-05
这篇文章主要介绍了JavaScript常用数学函数用法,结合实例形式分析了JavaScript常见的对数、平方、绝对值、正弦、四舍五入等相关数学函数使用技巧,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了JavaScript中奇葩的假值应用,需要的朋友可以参考下2014-03-03
这篇文章主要介绍了js动态创建上传表单通过iframe模拟Ajax无刷新的具体实现,需要的朋友可以参考下2014-02-02
这篇文章主要介绍了js实现大转盘抽奖游戏的方法,实例分析了javascript基于数组、随机数等实现抽奖游戏的技巧,需要的朋友可以参考下2015-06-06
这篇文章主要给大家介绍了关于微信小程序开发问题之wx.previewImage的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
最新评论