JavaScript碰撞检测原理及其实现代码


Posted in Javascript onMarch 12, 2020

本文实例为大家分享了JavaScript实现碰撞检测原的具体代码,供大家参考,具体内容如下

1.模拟碰撞

简单模拟碰撞过程,用一个可以拖拽的div2去尝试碰撞一个固定的div1(均用绝对定位)

2.碰撞检测原理

JavaScript碰撞检测原理及其实现代码

如图所示:
使得div分别有4个距离属性( L(left),T(top),R(right),B(bottom) ).
对于div1来说,画出一个九宫格,div2在除中心以为的8个格子任意移动都不会发送碰撞.

JavaScript碰撞检测原理及其实现代码

也就是说,只要满足条件: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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一段利用WSH获取登录时间的jscript代码
May 11 Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
js锁屏解屏通过对$.ajax进行封装实现
Jul 31 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
Bootstrap响应式表格详解
May 23 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
react-native使用react-navigation进行页面跳转导航的示例
Sep 07 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 Javascript
详解微信UnionID作用
May 15 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
JavaScript实现多个物体同时运动
Mar 12 #Javascript
基于javascript实现碰撞检测
Mar 12 #Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 #jQuery
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 #Javascript
javascript实现拖拽碰撞检测
Mar 12 #Javascript
原生js实现碰撞检测
Mar 12 #Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 #Javascript
You might like
PHP获取windows登录用户名的方法
2014/06/24 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
PHP中each与list用法分析
2016/01/08 PHP
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
关于js类的定义
2011/06/28 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
2013/04/02 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
JQuery控制radio选中和不选中方法总结
2015/04/15 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
使用Python实现博客上进行自动翻页
2017/08/23 Python
python版学生管理系统
2018/01/10 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
python读取图片任意范围区域
2019/01/23 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
python实现智能语音天气预报
2019/12/02 Python
Python celery原理及运行流程解析
2020/06/13 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
幼儿园教师考核制度
2014/02/01 职场文书
人力资源部经理岗位职责规定
2014/02/23 职场文书
诚信承诺书范文
2014/03/27 职场文书
企业员工辞职信范文
2015/05/12 职场文书
借条格式范本
2015/05/25 职场文书
校运会新闻稿
2015/07/17 职场文书
聘任书范文大全
2015/09/21 职场文书