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 相关文章推荐
Javascript日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
提示$ is not defined错误分析及解决
Apr 09 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
关于vue编译版本引入的问题的解决
Sep 17 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
详解小程序之简单登录注册表单验证
May 13 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制作简单的内容采集器的原理分析
2008/10/01 PHP
php设计模式 Strategy(策略模式)
2011/06/26 PHP
Linux中为php配置伪静态
2014/12/17 PHP
PHP单例模式详细介绍
2015/07/01 PHP
简单实用的PHP文本缓存类实例
2019/03/22 PHP
javascript学习网址备忘
2007/05/29 Javascript
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
将json转换成struts参数的方法
2016/11/08 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
python正则表达式match和search用法实例
2015/03/26 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
浅析Python3 pip换源问题
2020/01/06 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
servlet面试题
2012/08/20 面试题
园林设计专业毕业生求职信
2014/03/23 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
2015教师年度考核评语
2015/03/25 职场文书
运动会广播稿50字
2015/08/19 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
用Python实现Newton插值法
2021/04/17 Python
react如何快速设置文件路径别名
2021/04/28 Javascript
Python OpenCV之常用滤波器使用详解
2022/04/07 Python
Windows server 2016服务器基本设置
2022/08/14 Servers